效果展示:
默认展示经纬度数值,点击后变为input输入框可以输入
点击前:
点击后:
代码:
html:
首选是一个组件v-for的循环展示,v-for中再设置两种样式
<div id="item-area">
<div
class="item"
v-for="(i, index) in items"
:key="index"
>
<el-input
class="input-new-tag"
v-show="i.isShow"
ref="saveTagInput"
v-model="i.VALUE"
@keyup.enter.native="$event.target.blur()"
@blur.stop="handleChange(i, index)"
></el-input>
<el-tag
v-show="!i.isShow"
closable
:disable-transitions="false"
:style="{ backgroundColor: getColor(i.TYPE), color: 'white' }"
@click.stop="showInput(i, index)"
@close="deleteItem(index)"
>
{{ i.VALUE }}
</el-tag>
</div>
</div>
items是父组件传过来的数组,数组中是对象
v-show中用了每个对象的isShow属性即 i.isShow
<el-input v-show="i.isShow"></el-input>
<el-tag v-show="!i.isShow"></el-tag>
el-input 中绑定的值是i.VALUE
el-tag 中关联数值{{i.VALUE}}
tag点击触发函数showInput()
JS:
props中:
props: {
items: Array
},
watch中:
监视对象某属性变化需用deep:true
watch:{
items:{
deep:true
}
},
methods中:
注意:修改数组对象中某属性要用$set()。否则无法更改。
methods: {
showInput(item, index) {
let _this = this;
if (!item.isShow) {
_this.$set(item, "isShow", true);
} else {
_this.$set(item, "isShow", false);
}
},
}