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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
vue路由插件之vue-route
Jun 13 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
js实现限定区域范围拖拉拽效果
Nov 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+DBM的同学录程序(2)
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
Js动态创建div
2008/09/25 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
浅析Python中的for 循环
2016/06/09 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
实例详解Python模块decimal
2019/06/26 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python下载库的步骤方法
2019/10/12 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
django实现后台显示媒体文件
2020/04/07 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
高中生学期学习自我评价
2014/02/24 职场文书
校园运动会广播稿
2014/10/06 职场文书
秋冬农业生产标语
2014/10/09 职场文书
人事主管岗位职责
2015/02/04 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js