标签:ret 多次 ace required clear map prope 插入 www
效果如下:
原理:在所显示的名字前面拼一个img标签
代码如下:
<van-popup v-model="showPicker" position="bottom"> <van-picker show-toolbar :columns="columns.map(bank => bank.bankName)" @confirm="onConfirm" @cancel="showPicker = false" /> </van-popup>
import pic1 from ‘../../assets/pic_1.png‘; //图片引用根据自己的情况而定 import pic2 from ‘../../assets/pic_2.png‘; import pic3 from ‘../../assets/pic_3.png‘; data() { return { banks:[ { "code": "1", "bankName": "?.?.?."
}, { "code": "2", "bankName": "???????"
}, { "code": "3", "bankName": "???????"
} ], imgsrc: [pic1,pic2,pic3], columns: [],
value:null,
}},
created() {
this.columns = this.clone(this.banks); //做克隆是为了防止图片被多次增加
this.columns.forEach((el, i) => {
// console.log(el);
this.columns[i].bankName = `<img style="width: 20px;height: 20px;margin-right: 5px;" src=‘${this.imgsrc[i]}‘>` + el.bankName;
});
},
methods: {
//克隆的方法 clone (obj) { if (obj === null) return null; if (typeof obj !== "object") return obj; if (obj.constructor === Date) return new Date(obj); var newObj = new obj.constructor(); //保持继承链 for (var key in obj) { if (obj.hasOwnProperty(key)) { //不遍历其原型链上的属性 var val = obj[key]; newObj[key] = typeof val === "object" ? this.clone(val) : val; } } return newObj; }, }
最后,因为name被我们选择的时候,加了img标签,所以弹框点【确认】后,要把img标签去掉,因为input是不识别img标签的
不做处理会导致这样子:
onConfirm(value) { let newval = value.replace(/<[^>]+>/g, ""); //用正则把带尖括号的标签去掉 this.value = newval; this.showPicker = false; },
最后就大功告成啦!
参照:https://www.cnblogs.com/justyouadmin/p/13823393.html
标签:ret 多次 ace required clear map prope 插入 www
原文地址:https://www.cnblogs.com/tanweiwei/p/14512840.html