微信小程序封装自定义van-dropdown-item 下拉选择框

1.vant weapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容，限制了各位大神的操作，接下来我们先来了解他的使用在去封装自己的自定义

//json
"usingComponents": {
  "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
  "van-dropdown-item": "@vant/weapp/dropdown-item/index"
}
//html
van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
</van-dropdown-menu>
Page({
  data: {
    option1: [
      { text: '全部商品', value: 0 },
      { text: '新款商品', value: 1 },
      { text: '活动商品', value: 2 },
    ],
    option2: [
      { text: '默认排序', value: 'a' },
      { text: '好评排序', value: 'b' },
      { text: '销量排序', value: 'c' },
    ],
    value1: 0,
    value2: 'a',
  },
});

这是官方自己的效果！
下面来看看我们自己封装的组件

2.还能自定义搜索框等等是不是很奈斯！

接下来我们在components目录新建文件夹deopdown-pirck，这样没用页面都能直接使用了需要在j页面son注册

// components/deopdown-pirck/index.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        index: {
            type: String
        },
        options: {
            type: Array,
            value: []
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        imgurl: '../../images/mine/downl.png',
        isshow: false, //是否弹层
        height: 812 + 'px',
        value: '',
        title: '',
        indexs: 0,
        optionss: [], //传递过来的
        repoptionss: [] //用于显示过滤的
    },
    created() {
        var res = wx.getSystemInfoSync()
        this.setData({
            height: res.screenHeight + 'px'
        })
    },
    created() {
        console.log(this.properties.options)
    },
    /**
     * 组件的方法列表
     */
    methods: {
        onopent() {
            this.setData({
                isshow: !this.data.isshow
            })
        },
        opselect(e) {
            let {
                id
            } = e.currentTarget.dataset
            let textindex=null
            let datafilter=this.data.optionss
            datafilter.forEach((item,idnex)=>{
                if (item.value == id) {
                    textindex = item.text
                }
            })
            this.setData({
                indexs: id,
                title: textindex,
                isshow: !this.data.isshow
            })
            let index_id = 0
            let fildata = this.data.optionss
            console.log(id,fildata)
            console.log("选择项")
            fildata.forEach((item, index) => {
                if (item.value === id) {
                    index_id = item.value 
                    console.log("检测匹配项",item.value)
                }
            })
            this.triggerEvent('childFun', {
                id: index_id
            }); //通知父组件处理返回的选中数据
        },
        opsoce(){
            this.setData({
                isshow:false
            })
        },
        seachchange(e) {
            this.setData({
                value: e.detail,
            });
            let filtertext = []
            this.data.optionss.forEach((item) => {
                if (item.text.indexOf(e.detail) != -1) {
                    filtertext.push(item)
                }
            })
            this.setData({
                repoptionss: filtertext
            })
        }
    },
    observers: {
        'index,options': function (nn1, nn2) {
            console.log("原始数据")
            console.log(nn1)
            console.log(nn2)
            let indextile = null
            nn2.forEach((item, index) => {
                if (item.value == nn1) {
                    indextile = item.text
                }
            })
            this.setData({
                indexs: nn1,
                optionss: nn2,
                repoptionss: nn2,
                title: indextile
            })
        }
    }
})
<!--components/deopdown-pirck/index.wxml-->
<view class="drow" bindtap="onopent">
    <text>{{title}}</text>
    <image src="{{isshow===true? '../../images/mine/upl.png':'../../images/mine/downl.png'}}" class="imgseze"  style="height: 30rpx;width: 30rpx;"/>
</view>
<view class="pupo" style="min-height:{{height}}" wx:if="{{isshow}}" catchtap="opsoce">
    <van-search value="{{ value }}" placeholder="请输入关键名称" bind:change="seachchange" />
    <view wx:for="{{repoptionss}}" wx:key="{{index}}" class="{{item.value==indexs? 'itemles':'itemle'}}"  data-id="{{item.value}}" bindtap="opselect">
        <text>{{item.text}}</text>
        <image src="../../images/mine/select.png" wx:if="{{item.value==indexs}}" />
    </view>
</view>
/* components/deopdown-pirck/index.wxss */
.drow{
  display: flex;
  align-items: center;
  font-weight: bold;
}
.drow image{
    height: 30rpx;
    width: 30rpx;
    margin-left: 5rpx;
}
.pupo{
    position: absolute;
    width: 100vw;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
    left: 0rpx;
    overflow:scroll;
}
.itemle{
    height: 65rpx;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 10rpx 25rpx;
    z-index: 99;
}
.itemles{
    height: 65rpx;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 10rpx 25rpx;
    z-index: 99;
    color: #1eaaa9;
}
.pupo image{
    height: 35rpx;
    width: 40rpx;
    margin-right:55rpx;
}