效果

組件源碼

<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通用编辑组件的封装及应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。