我用最笨的方法，先实现功能先,用两个input,一个可以编辑，一个不可以编辑，失去焦点后隐藏可以点击的那个，点“编辑”时，显示可以编辑的那个input

          <div class="edit-item"><input type="text" id="group-name" v-model="groupName" class="edit-input" disabled v-show="!isEditGroupName" ><input type="text" id="group-name2" v-model="groupName" class="edit-input" ref="groupName"@input="changeValue"@change="editGroupNameSave(groupInfo.name)" v-show="isEditGroupName" @blur="isEditGroupName = false"><span  @click="editGroupName"><icon-svg name="icon-kaka-compile" icon-style="edit-ico"></icon-svg></span></div>

export default {name: 'RightSideBar',props: {},data () {return {isEditGroupName: false, // 修改群名称}},computed: {// 群名称groupName: {get () {return this.$store.getters.groupSetInfo.name},set (val) {// 使用vuex中的mutations中定义好的方法来改变let groupSetInfo = this.$store.getters.groupSetInfolet copyMyinfo = Object.assign({}, groupSetInfo)copyMyinfo.name = valthis.$store.dispatch('groupSetInfo', copyMyinfo)}},},methods: {changeValue () {let leng = this.validateTextLength(this.groupName)if (leng >= 15) {this.$refs.groupName.maxLength = leng} else {this.$refs.groupName.maxLength = 30}},validateTextLength (value) {// 中文、中文标点、全角字符按1长度，英文、英文符号、数字按0.5长度计算let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/glet mat = value.match(cnReg)let lengthif (mat) {length = (mat.length + (value.length - mat.length) * 0.5)return length} else {return value.length * 0.5}},// 打开编辑editGroupName () {this.isEditGroupName = truelet nickNameInput = document.querySelector('#group-name2')setTimeout(() => {nickNameInput.focus()}, 0)},// 保存群名修改editGroupNameSave (data) {},},created () {}

编辑