原生微信小程序中封装一个模拟select 下拉框组件

1.首先在components 里面设置组件名称：van-select（随便取名字）；

2.新建文件写代码：

wxml：

<view class="w100 select_all_view">
  <!-- 标题，可以没有 -->
  <view class="mr-10 pt-10 size-28" style="width: {
  {titleWidth}};" wx:if="{
  {title}}">{
  {title}}</view>
  <view class="select_view relative" style="width: {
  {title ? 'calc(100% - ' + titleWidth + ' - 10rpx)' : '100%'}};max-width: {
  {title ? 'calc(100% - ' + titleWidth + ' - 10rpx)' : '100%'}};">
    <view class="inputPlaceholder h100 w100 radius-10 relative flex_l pd-10 {
  { disabled ? 'gray-3' : 'black' }}" bindtap="{
  {disabled || readonly ? '' : 'changeShow'}}" style="background: {
  {disabled ?'#f5f7fa' : bgColor}};border: 2rpx solid #ddd;">
      <block wx:if="{
  {disabled || readonly}}">
        <view class="flex-1" wx:if="{
  {selectLabel}}">{
  {selectLabel}}</view>
        <view class="flex-1 gray-3 line-1" wx:else>{
  {placeholder}}</view>
        <van-icon class="gray-3" name="arrow-down" />
      </block>
      <block wx:else>
        <block wx:if="{
  {selectLabel}}">
          <view class="flex-1">{
  {selectLabel}}</view>
          <van-icon class="gray-3" name="clear" wx:if='{
  {!show}}' catchtap="clearInput" />
          <van-icon class="gray-3" name="arrow-up" wx:else />
        </block>
        <block wx:else>
          <view class="flex-1 gray-3 line-1">{
  {placeholder}}</view>
          <van-icon class="gray-3" name="arrow-down" class="transfer {
  {show ? 'is-reverse' : 'no-reverse