Vue2.x通用编辑组件的封装及应用详解
程序员文章站
2023-12-01 21:38:34
本文实例为大家分享了vue2.x通用编辑组件的封装及应用,供大家参考,具体内容如下
效果
组件源码
&l...
本文实例为大家分享了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加个背景图即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: c#字符长度查询代码