vue 使用 span 来修改值 的小坑
前面有个需求,展现很多标签,展现的同时可以对标签进行修改。使用vue,思路是 用 span 展现标签,点击 span 打开contenteditable ,使其可编辑,编辑完成后,回车完成修改,提交。最开始可以正常运行,但偶然发现,在修改第一个span时,回车后,不会变还是之前的值。网上找了下,大部分说改input来实现,没有用span这种的方案。最后处理方式,对dom元素直接进行操...
·
前面有个需求,展现很多标签,展现的同时可以对标签进行修改。
使用vue,思路是 用 span 展现标签,点击 span 打开 contenteditable ,使其可编辑,编辑完成后,回车完成修改,提交。
最开始可以正常运行,但偶然发现,在修改第一个span时,回车后,不会变还是之前的值。网上找了下,大部分说改input来实现,没有用span这种的方案。
最后处理方式,对dom元素直接进行操作 el.innerHTML = "应该显示的值";
附上代码:(部分是多余的)重点就一句, tg.innerHTML = tips[index].name; // 这句重点
<ul>
<li v-for="(item, index) in tipCnts" :key="index">
<span class="title" @click.prevent.stop="mod(item, $event)" @keydown.enter="change(item, index, $event)">{{item.name}}</span>
<span class="badge">{{item.cnt}}</span>
</li>
</ul>
vue 对应方法
methods: {
mod: function (item, e) {
var top = this;
// 不允许修改直接返回
if (!top.canmod) {
return;
}
var tg = e.target;
if (!tg.getAttribute('contenteditable')) {
tg.setAttribute('contenteditable', true);
}
tg.focus();
},
change: function (item, idx, e) {
var top = this;
var tg = e.target;
var nVal = tg.innerHTML;
top.update(nVal, item.name, item, idx, tg);
if (tg.getAttribute('contenteditable')) {
tg.removeAttribute('contenteditable');
}
},
update: function (val, oldVal, item, index, tg) {
if (val === oldVal) return;
var top = this, tips = top.tips;
var cnt = item.cnt, len = top.tips.length, found = false;
// 检查是否有符合条件的
for (var i = 0; i < len; i++) {
var tip = tips[i];
if (tip.name === val) {
tip.cnt += cnt;
found = true;
break;
}
}
if (found) {
tips.splice(index, 1);
tg.innerHTML = tips[index].name; // 这句重点
} else {
item.name = val;
}
}
}
但是,针对这个需求,用 span 还是 input 对页面更好,请大佬留下宝贵意见。
更多推荐
已为社区贡献1条内容
所有评论(0)