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

本文实例为大家分享了Vue2.x通用编辑组件的封装及应用，供大家参考，具体内容如下

效果

组件源码

模板div class=' edit-input ' div class=' editBox ' div span class=' list ' { name } }:/span span class=' list value ' v-if='！editStatus " { value } }/span/div span class=' editLogo图标字体图标-Edit ' @ click=' editStatus=！editStatus' v-if='！editStatus/span div class=' edit ' v-if=' editStatus ' El-input v-model=' new value ' :占位符='占位符rdes '/El-input span class='确认编辑' @单击='更改值'/span class='取消' @单击=' editStatus=！editStatus '/span/div/div/template scription ' @/common/font/icon font。CSS ' export default { prop : { type : String，必选： true }，value: { type: String，必选： true }，place holder d 3360 { type 3: String，default: '' }，data(){ return { new value : ' ' $ emit(' value change '，this。NewVaLue)这个。editStatus=false } }/脚本样式lang=' less '作用域。编辑-输入{ .editBox { display : flex margin-top : 10px；文本对齐：中心；列表{ color : # 909399 font-size : 14px；线高： 40px显示器：内联块；} .list value { color : # 303133 font-size : 14px；线高： 26px} .editLogo { color : # 2695 E4 padding-top : 12px；左填充： 10px} .编辑{高： 50像素宽度： 260 px。确认编辑{左边距： 4px宽度： 20px高度： 36pxdisplay:内联块；color : # 67c 23 font-size : 20px；光标：指针；} .取消{ color : # 929398 font-size : 20px；左边距左侧： 6pxcursor:指针；宽度： 20px高度： 36pxdisplay:内联块；font-size : 26px:hover { color: # fa5555} }。El-输入{宽度： 200 px} } }}/style父组件中引用

模板div class=' test ' v-edit-input place holders='请输入新名称名称='测试名称值='哈哈哈哈@ value change=' change value '/v-edit-input/div/template script从' @/components/Common/EditInput '导入VEditInput导出默认值{ components 3360 { VEditInput }，方法： { change value(new val){//new val即为修改后的新值，接下来用来与后端交互即可} } }/脚本注：组件源码中导入@/common/font/iconfont.css '目的是为了引入编辑图标，图标使用于图标字体官网使用挽救(保存的简写)制作，实际应用时请删除此行代码，改为你自己的图标，即给。编辑徽标加个背景图即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。