我用最笨的方法，先實現功能先,用兩個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 () {}

編輯

轉載于:https://www.cnblogs.com/ybixian/p/10729096.html

總結

以上是生活随笔為你收集整理的vue 设置 input 为不可以编辑的全部內容，希望文章能夠幫你解決所遇到的問題。

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