给span标签设置contenteditable 为 true,就可以编辑了
<span
class="mn-input"
v-html="ipt17"
@blur="blurf($event, 'ipt17', 64)"
contenteditable = true
>
</span>
// watch监听数据变化
watch:{
ipt17(newone, oldone) {
this.cIpt2("ipt17", newone, oldone);
},
}
methods:{
chkstrlen2(str, max) {
var strlen = 0;
for (var i = 0; i < str.length; i++) {
if (!/[a-z|A-Z|0-9]/.test(str[i])) strlen += 2;
else strlen++;
if (strlen > max) {
return str.slice(0, i);
}
}
},
blurf(e, key, max) {
this.chkstrlen2(e.target.innerText, max);
this[key] = e.target.innerText;
if (this[key] == "") {
this[key] = " ";
}
},
}
.mn-input {
padding: 0 22px;
outline: none;
border-bottom: 1px solid #000;
font-weight: 640;
font-size: 18px;
word-break: break-all;
}