这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue2.x通用编辑组件的封装及应用，供大家参考，具体内容如下
效果
组件源码
<div class="edit-input"> <div class="editBox"> <div> <span class="list">{{ name }}：</span><span class="listValue">{{value}}</span></div><span class="editLogo iconfont icon-Edit"></span><div class="edit"> <span class="confirmEdit">√</span><span class="cancel">×</span></div></div></div> .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;<mark>本文来源gaodaimacom搞#代%码@网-</mark> height: 36px; display: inline-block; font-size: 26px; &:hover { color: #fa5555; } } .el-input { width: 200px; } } } }
父组件中引用
<div class="test"> </div>
注：组件源码中import ‘@/common/font/iconfont.css’目的是为了引入编辑图标，图标使用于iconfont官网使用svg制作，实际应用时请删除此行代码，改为你自己的图标，即给.editLogo加个背景图即可。
以上就是Vue2.x通用编辑组件的封装及应用详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue2.x通用编辑组件的封装及应用详解
转载请注明原文链接：Vue2.x通用编辑组件的封装及应用详解
