vue 设置 input 为不可以编辑

vue 设置 input 为不可以编辑

我用最笨的方法，先实现功能先,用两个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.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 () {

  }

编辑