[Small program] Encapsulation pop-up box + selector component: selector selection

Effect

Libraries used:

 {
    
    
    "usingComponents": {
    
    
      "van-popup": "@vant/weapp/popup/index",
      "van-cell": "@vant/weapp/cell/index",
      "van-cell-group": "@vant/weapp/cell-group/index",
      "van-picker": "@vant/weapp/picker/index"
    },
    "navigationBarTitleText": ""
  }

Attributes and methods that are not understood in the code can be found in the documentation: Vant Weapp

the code

HTML

Cell:

<!-- 活动名称 -->
<van-cell-group>
  <van-cell
    title="活动名称"
    border="{
     
     { false }}"
    title-width="60px"
    is-link
    value="{
     
     {activityNameChoose}}"
    bind:click="showPopup2"
    data-type="activityName"
  >
  </van-cell>
</van-cell-group>
<!-- 终端 -->
<van-cell-group>
  <van-cell
    title="终端"
    border="{
     
     { false }}"
    title-width="60px"
    is-link
    value="{
     
     {terminalChoose}}"
    bind:click="showPopup3"
    data-type="terminal"
  >
  </van-cell>
</van-cell-group>

Popup + selector:

<!-- 活动选择 -->
<van-popup show="{
     
     { showPop2 }}" bind:close="colsePopup" position="bottom">
  <van-picker
    columns="{
     
     { activityName }}"
    show-toolbar
    title="活动名称"
    default-index="{
     
     { 0 }}"
    bind:change="activityNameChange"
    bind:confirm="activityNameConfirm"
    bind:cancel="colsePopup"
  />
</van-popup>
<!-- 终端 -->
<van-popup show="{
     
     { showPop3 }}" bind:close="colsePopup" position="bottom">
  <van-picker
    columns="{
     
     { terminal }}"
    show-toolbar
    title="终端"
    default-index="{
     
     { 0 }}"
    bind:change="terminalChange"
    bind:confirm="terminalConfirm"
    bind:cancel="colsePopup"
  />
</van-popup>

JavaScript

data：

data(){
    
    
	return{
    
    
		activityName: ['全选'],
        activityNameChoose: '全选',
        terminal: ['全选'],
        terminalChoose: '全选',
        showPop2: false, //选择器-活动名称
        showPop3: false, //选择器-终端
        dataType: ''
	}
}

methods：

methods:{
    
    
   	showPopup2(e) {
    
    
       this.showPop2 = true
       this.dataType = e.currentTarget.dataset.type
     },
     showPopup3(e) {
    
    
       this.showPop3 = true
       this.dataType = e.currentTarget.dataset.type
     },
     // 统一关闭弹出
     colsePopup() {
    
    
       if (this.dataType === 'activityName') {
    
    
         this.showPop2 = false
       } else if (this.dataType === 'terminal') {
    
    
         this.showPop3 = false
       }
     },
   	 activityNameChange(event) {
    
    
        const {
    
     picker, value, index } = event.detail
      },
     activityNameConfirm(event) {
    
    
        this.activityNameChoose = event.detail.value
        this.colsePopup()
      },
     terminalChange(event) {
    
    
        const {
    
     picker, value, index } = event.detail
      },
     terminalConfirm(event) {
    
    
        this.terminalChoose = event.detail.value
        this.colsePopup()
      },
}

other

The data of activityName and terminal are actually more than that. For example, we need to request data through the network request interface and then dynamically add it to activityName and terminal. We can call the method of the request interface in onShow.
Similar blogs, encapsulation of pop-up box + time selector: [small program] encapsulation time selection component: use cell van-cell and slot slot, including start time and end time_karshey's blog-CSDN blog

This function feels very common, record it.
Just record the process of typing code, the level is very bad.