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 () {
 }

以上这篇vue 设置 input 为不可以编辑的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。