vant中van-picker選項插入圖片

效果如下：

 原理：在所顯示的名字前面拼一個img標簽

代碼如下：

<van-field

　　readonly

　　is-link

　　name="picker"

　　:value="value"

　　clearable

　　label="選擇您的還款銀行"

　　placeholder="選擇銀行"

　　input-align="right"

　　:rules="[{ required: true, message: '選擇銀行' }]"

　　@click="showPicker = true"

　　/>

<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