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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
js DOM的学习笔记
Dec 22 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 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代码
2010/02/16 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
Python如何为图片添加水印
2016/11/25 Python
python实现京东秒杀功能
2018/07/30 Python
python线程的几种创建方式详解
2019/08/29 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
银行演讲稿范文
2014/01/03 职场文书
求职自荐信的格式
2014/04/07 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
社会实践活动总结范文
2014/07/03 职场文书
员工趣味活动方案
2014/08/27 职场文书
委托培训协议书
2014/11/17 职场文书
小学中队活动总结
2015/05/11 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
Pygame Time时间控制的具体使用详解
2021/11/17 Python