vue如何设置 input为不可以编辑

tangjin

作者

小编给大家分享一下vue如何设置 input为不可以编辑，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

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

<divclass="edit-item">
<inputtype="text"id="group-name"v-model="groupName"class="edit-input"disabledv-show="!isEditGroupName">
<inputtype="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-svgname="icon-kaka-compile"icon-></icon-svg></span>
</div>

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

},

},
created(){
}