Vue2.x通用编辑组件的封装及应用详解


Posted in Javascript onMay 28, 2019

本文实例为大家分享了Vue2.x通用编辑组件的封装及应用,供大家参考,具体内容如下

效果

 Vue2.x通用编辑组件的封装及应用详解

组件源码

<template>
 <div class="edit-input">
 <div class="editBox">
  <div>
  <span class="list">{{ name }}:</span>
  <span class="listValue" v-if="!editStatus">{{value}}</span>
  </div>
  <span class="editLogo iconfont icon-Edit" @click="editStatus = !editStatus" v-if="!editStatus"></span>
  <div class="edit" v-if="editStatus">
  <el-input v-model="newValue" :placeholder="placeholderDes"></el-input>
  <span class="confirmEdit" @click="changeValue">√</span>
  <span class="cancel" @click="editStatus = !editStatus">×</span>
  </div>
 </div>
 </div>
</template>

<script>
import '@/common/font/iconfont.css'
export default {
 props: {
 name: {
  type: String,
  require: true
 },
 value: {
  type: String,
  require: true
 },
 placeholderDes: {
  type: String,
  default: ''
 }
 },
 data () {
 return {
  newValue: '',
  editStatus: false
 }
 },
 methods: {
 changeValue () {
  this.$emit('valueChange', this.newValue)
  this.editStatus = false
 }
 }
}
</script>

<style lang="less" scoped>
.edit-input {
 .editBox {
 display: flex;
 margin-top: 10px;
 text-align: center;
 .list {
  color: #909399;
  font-size: 14px;
  line-height: 40px;
  display: inline-block;
  }
  .listValue {
  color: #303133;
  font-size: 14px;
  line-height: 26px;
  }
 .editLogo {
  color: #2695E4;
  padding-top: 12px;
  padding-left: 10px;
 }
 .edit{
  height: 50px;
  width: 260px;
  .confirmEdit {
  margin-left: 4px;
  width: 20px;
  height: 36px;
  display: inline-block;
  color: #67c23a;
  font-size: 20px;
  cursor: pointer;
  }
  .cancel {
  color: #929398;
  font-size: 20px;
  margin-left: 6px;
  cursor: pointer;
  width: 20px;
  height: 36px;
  display: inline-block;
  font-size: 26px;
  &:hover {
   color: #fa5555;
  }
  }
  .el-input {
  width: 200px;
  }
 }
 }
}
</style>

父组件中引用

<template>
 <div class="test">
 <v-edit-input placeholderDes="请输入新名称" name="测试名称" value="哈哈哈哈" @valueChange="changeValue"></v-edit-input>
 </div>
</template>

<script>
import VEditInput from '@/components/Common/EditInput'
export default {
 components: {
 VEditInput
 },
 methods: {
 changeValue (newVal) {
  // newVal即为修改后的新值,接下来用来与后端交互即可。
 }
 }
}
</script>

注:组件源码中import '@/common/font/iconfont.css'目的是为了引入编辑图标,图标使用于iconfont官网使用svg制作,实际应用时请删除此行代码,改为你自己的图标,即给.editLogo加个背景图即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
JS瀑布流实现方法实例分析
Dec 19 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
Vue发布项目实例讲解
Jul 17 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 #jQuery
小程序多图列表实现性能优化的方法步骤
May 28 #Javascript
实例详解带参数的 npm script
May 28 #Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
Vue2.x通用条件搜索组件的封装及应用详解
May 28 #Javascript
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
vue实现条件叠加搜索的解决方法
May 28 #Javascript
You might like
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php简单图像创建入门实例
2015/06/10 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
微信小程序template模版的使用方法
2019/04/13 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
vue 组件简介
2020/07/31 Javascript
在Python中处理字符串之ljust()方法的使用简介
2015/05/19 Python
Python读大数据txt
2016/03/28 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
个人自荐信
2013/12/05 职场文书
公务员综合考察材料
2014/02/01 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
中国入世承诺
2014/04/01 职场文书
技术员岗位职责
2015/02/04 职场文书
早上好问候语大全
2015/11/10 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL