点击除了修改框以外的地方保存修改
html:
<div class="EngravingModule" v-if="item.lettering">
<div class="seal">
<div class="buycort_Lettering">
<!-- ref="container" -->
<div class="inputBox" ref="container">
<span class="txt" v-if="!(showSealBox && showBox && selectIndex == index && toggle) " @click.stop="showInput(item, index, 'singleLetter')">{{item.lettering}}</span>
<input ref="container" v-focus v-if="showSealBox && showBox && selectIndex == index && toggle" id="input" :class="{'input-width': language == 'zh_CN'}" v-model="lettering" type="text" :placeholder="lang.placeHold">
<div>
<em ref="container" class="em1" v-for="(a,index) in content" :key="index" @click="choose('input',a)">{{a}}</em>
</div>
</div>
<i class="looktokz" @click.stop="confirmAttr()" :class="{'i-padding':language == 'en_US'}">{{lang.confirmBtn}}</i>
</div>
</div>
</div>
mounted里:
// 点击除了修改框以外的地方保存修改的刻字内容
document.addEventListener('click',(e) =>{
let tree = this.$refs.container
// let box = this.$refs.boxContainer
// console.log("窗口区域以外被点击了",box,e.target)
if(!this.showBox){ //输入框是否是展示的
return
}
if (tree) {
if (!tree.includes(e.target)) {
this.confirmAttr() //调用修改的方法
}
}
})
效果展示: