上拉框菜单 的多种用法

1.先去插件市场找到该插件

lb-picker选择器 - DCloud 插件市场

三级联动写法：

• 1.在script标签内引入

import lbPicker from "@/components/lb-picker/index.vue";

• 2.在template标签内任意地方写（list绑定接口返回的数组，confirm绑定的是点击后的操作）

<view class="row">
      <text class="label need">所在辖区：</text>
      <view class="select" @click="showPicker('areaPicker')">
        <text v-if="areaText">{{ areaText }}</text>
        <text class="default" v-else>请选择所在辖区</text>
      </view>
      <image src="@/static/image/right.png" mode="" class="right"></image>
    </view> 

<lb-picker
      ref="areaPicker"
      mode="multiSelector"
      :level="3"
      :props="{ label: 'name', value: 'id' }"
      :list="chooesList"
      confirm-color="#38B771"
      @confirm="areaPickerConfirm"
    >
    </lb-picker> 

• 3.在methods中写

showPicker(item) {
      this.$refs[item].show();
    }, 

areaPickerConfirm(e) {
      this.form.gdId = e.value.splice(-1)[0];
      this.areaText = e.item.map((e) => e.name).join("-");
    },

下拉单选写法：

• 1.和上面一样先引入插件

import lbPicker from "@/components/lb-picker/index.vue";

• 2.在template标签内写（lb-picker标签可以像上面一样单独写也可以把需要被操作的代码包裹起来，这样就不用多写调用的方法）

<lb-picker ref="picker"

:props="{

label:'dicLabel',

value:'dicValue',

}"

:list="sexList" v-model="from.sex"

confirm-color="#DF3326"

@confirm="changeSex"

>

<view class="row">

<view class="message">

<span>性别</span>

</view>

<view class="address">

<view class="addressText">{{sexText}}</view>

<!-- <view class="addressText default" v-else>请选择性别</view> -->

<image src="@/static/images/icon_1.png" mode=""></image>

</view>

</view>

</lb-picker>

3.在data中定义

sexList: [{

dicLabel: "男",

dicValue: 0

},

{

dicLabel: "女",

dicValue: 1

}],

sexText:" ",

from:{

sex:" ",

}

4.methods中写

changeSex(e) {

this.sexText = e.item.dictLabel

this.from.sex= e.item.dictValue

} 

 下拉日期选择器

1.和上面一样先引入插件

import lbPicker from "@/components/lb-picker/index.vue";

2.在template标签内写

 <lbPicker
      mode="dateSelector"
      v-model="form.fristTime"
      ref="datePicker"
      display-format="YYYY-MM-DD"
      format="YYYY-MM-DD"
      confirm-color="#38B771"

     @confirm="changeDate"
    ></lbPicker> 

3.用法同一个datePicker绑定需要用的地方

<view class="row">
      <text class="label">初次发现日期：</text>
      <view class="select" @click="showPicker('datePicker')">
        <text v-if="form.fristTime">{{ form.fristTime }}</text>
        <text class="default" v-else>请选择初次发现日期</text>
      </view>
      <image src="@/static/image/right.png" mode="" class="right"></image>
    </view> 

4.在data中定义 

 form: {

       fristTime: "",

}

4. 方法中

showPicker(item) {
      this.$refs[item].show();
    }, 

 changeDate(e) {

this.form.fristTime = e.value

}