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 相关文章推荐
Javascript中string转date示例代码
Nov 01 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
Jul 11 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
vue引入静态js文件的方法
Jun 20 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 DataGrid 实现代码
2009/08/12 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
javascript常见用法总结
2014/05/22 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
JS原型与原型链的深入理解
2017/02/15 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
JS关于刷新页面的相关总结
2018/05/09 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
python中time包实例详解
2021/02/02 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
单位创先争优活动方案
2014/01/26 职场文书
护士毕业生自荐信
2014/02/07 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
导游词之江南周庄
2019/12/06 职场文书