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的让非HTML5浏览器支持placeholder属性的代码
May 24 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
js和jquery中获取非行间样式
May 05 jQuery
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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中$this-&amp;gt;含义分析
2009/11/29 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
Symfony生成二维码的方法
2016/02/04 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
微信小程序实现选项卡功能
2020/06/19 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
事业单位请假制度
2014/01/13 职场文书
美发活动策划书
2014/01/14 职场文书
初中成绩单评语
2014/12/29 职场文书
满月酒邀请函
2015/01/30 职场文书
车间班组长竞聘书
2015/09/15 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python