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加个背景图即可。

Vue2.x通用编辑组件的封装及应用相关推荐

vue2.0 如何自定义组件（vue组件的封装）
一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
Vue 人资实战篇七员工管理上封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、
1.0 封装一个通用的工具栏目标:封装一个通用的工具栏供大家使用 1.1 通用工具栏的组件结构在后续的业务开发中,经常会用到一个类似下图的工具栏,作为公共组件,进行一下封装组件 src/comp ...
【template写法】TS + vue3.2 + vite2 + element-plus 通用表格组件封装
这里通用表格,和上一篇通用表单一样的(表格组件都在我博客里),配置完全可控,然后每个el-table-column 都是通过传入的数组来循环便利渲染,大部分常用实现也写在了下面,无法具体实现或需要你自 ...
vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
微信团队分享：iOS版微信的高性能通用key-value组件技术实践
本文来自微信开发团队guoling的技术分享. 1.前言本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称 ...
Vue实战（六）通用Table组件
本文是Vue实战系列的第六篇文章,主要介绍Falcon项目中通用 Table 组件的开发和使用 .Falcon项目地址:https://github.com/thierryxing/Falcon 通用 ...
HTML 上标题栏把右标题栏遮挡,如何编辑组件的样式（编辑样式）？
如何编辑组件的样式(编辑样式)?如何设置某一块内容的背景.边框.边距.文字样式? 编辑样式为组件通用功能,即几乎每个组件都是有"编辑样式"这个功能的. 一.如何进入组件的" ...
vue2.0桌面端框架_Element-UI组件库(Vue2.0桌面端组件库)V2.9.2 免费版
Element-UI组件库(Vue2.0桌面端组件库)是一款很优秀好用的为开发者.设计师和产品经理推出的基于Vue 2.0的桌面端组件库软件.小编带来的这款Element-UI组件库功能强大全面,简单 ...
一个通用中间组件，简单通用的适配 ViewPager,以及 pager 中的 RecycleView 简化复杂的操作，简单直接。
EasyTabPager 项目地址:ccj659/EasyTabPager 简介:一个通用中间组件,简单通用的适配 ViewPager,以及 pager 中的 RecycleView 简化复杂的操作 ...

Vue2.x通用编辑组件的封装及应用

效果

组件源码

父组件中引用

Vue2.x通用编辑组件的封装及应用相关推荐

最新文章

热门文章