码迷,mamicode.com
首页 > 其他好文 > 详细

vant中van-picker选项插入图片

时间:2021-03-11 13:02:40      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:ret   多次   ace   required   clear   map   prope   插入   www   

效果如下:

技术图片

 原理:在所显示的名字前面拼一个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

vant中van-picker选项插入图片

标签:ret   多次   ace   required   clear   map   prope   插入   www   

原文地址:https://www.cnblogs.com/tanweiwei/p/14512840.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!