介绍 & lt; div 类=癳dit-item"比;
,,,,,& lt; input 类型=皌ext", id=癵roup-name", v模型=癵roupName",类=癳dit-input", disabled v-show=? isEditGroupName",在
,,,,,& lt; input 类型=皌ext", id=癵roup-name2", v模型=癵roupName",类=癳dit-input", ref=癵roupName"
,,,,,@input=癱hangeValue"
,,,,,@change=癳ditGroupNameSave (groupInfo.name)“, v-show=癷sEditGroupName", @blur=癷sEditGroupName =, false"比;
,,,,,& lt; span @click=癳ditGroupName"祝辞& lt; icon-svg name=癷con-kaka-compile",图标→& lt;/icon-svg> & lt;/span>
,,,,& lt;/div> export default {
,,名字:& # 39;RightSideBar& # 39;
,,道具:{
,,},
data 才能;(),{
,,return {
,,,isEditGroupName:,假的,,//,修改群名称
,,}
,,},
计算才能:{//,,,群名称
,,,groupName: {
,,,get (), {
,,,return 这。store.getters.groupSetInfo.name美元
,,,},
,,,set (val), {
,,,,//,使用vuex中的突变中定义好的方法来改变
,,,,let groupSetInfo store.getters.groupSetInfo美元=,这。
,,,,let copyMyinfo =, Object.assign ({},, groupSetInfo)
,,,,copyMyinfo.name =瓦尔
,,,,,美元store.dispatch (& # 39; groupSetInfo& # 39;,, copyMyinfo)
,,,}
,,},
,,},
方法:才能,{
,,changeValue (), {
,,,let leng =, this.validateTextLength (this.groupName)
,,,if (leng 祝辞=,15),{
,,,,这个。refs.groupName.maxLength 美元;=愣了
,,,},{else
,,,,这个。refs.groupName.maxLength 美元;=30
,,,}
,,},
,,validateTextLength (值),{
,,,//,中文,中文标点,全角字符按1长度,英文,英文符号,数字按0.5长度计算
,,,let cnReg =,/((\ u4e00 - \ u9fa5) | (\ u3000 - \ u303F) | [\ uFF00 - \ uFF60])/g
,,,let mat =, value.match (cnReg)
,,,let 长度
,,,if (垫),{
,,,,length =,(时间+ mat.length (value.length 作用;mat.length), *, 0.5)
,,,,return 长度
,,,},{else
,,,,return value.length 0.5 *,
,,,}
,,},//,,,打开编辑
,,editGroupName (), {
,,,this.isEditGroupName =,真的
,,,let nickNameInput =, document.querySelector (& # 39; # group-name2& # 39;)
,,,setTimeout((),=祝辞,{
,,,,nickNameInput.focus ()
,,,},,0)
,,},//,,,保存群名修改
,,editGroupNameSave (数据),{
,,},
,,},
created 才能;(),{
以前,}
小编给大家分享一下vue如何设置输入为不可以编辑,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
我用最笨的方法,先实现功能,先用两个输入,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点“编辑”时,显示可以编辑的那个输入
