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

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.groupSetInfo          let copyMyinfo = Object.assign({}, groupSetInfo)          copyMyinfo.name = val          this.$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])/g        let mat = value.match(cnReg)        let length        if (mat) {          length = (mat.length + (value.length - mat.length) * 0.5)          return length        } else {          return value.length * 0.5        }      },      // 打开编辑      editGroupName () {        this.isEditGroupName = true        let nickNameInput = document.querySelector('#group-name2')        setTimeout(() => {          nickNameInput.focus()        }, 0)      },      // 保存群名修改      editGroupNameSave (data) {      },    },    created () {  }

编辑