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判断元素是否是隐藏的代码
Apr 24 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
iview table高度动态设置方法
Mar 14 Javascript
vue小白入门教程
Apr 02 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
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 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
打造超酷的PHP数据饼图效果实现代码
2011/11/23 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python读取excel表格生成erlang数据
2017/08/26 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python assert语句的简单使用示例
2019/07/28 Python
python numpy库np.percentile用法说明
2020/06/08 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
python爬取招聘要求等信息实例
2020/11/20 Python
如何查看python关键字
2021/01/17 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
会计人员演讲稿
2014/09/11 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书