img

vue vant的vant-picker实现薪资选择器

2023-04-03 0条评论 679次阅读 JavaScript


image.png

<template>
<div>
  <!-- 遮罩层 -->
  <van-popup
    v-model="wages"
    position="bottom"
    custom-style="height: 20%;"
    bind:close="onClose"
  >
    <!--  picker多联级选择器 -->
    <van-picker
      v-model="salaryRequirements"
      value-key="text"
      show-toolbar
      title="期望月薪" 
      confirm-button-text="确定"
      :columns="wagesColumns"
      @cancel="wagesCancel"
      @confirm="wagesConfirm"
      @change="wagesChange"
   />
  </van-popup>
</div>
</template>
<script>
export default {
  data() {
    return {
      salaryRequirements: [],
      wages: true, // 控制这个去显示picker+遮罩层
      salaryExpectationLeft: [],
      salaryExpectation: {},
      wagesColumns: [],
     }
  },
  mounted () {
    // 因为有联动,所以说如果选择了1k,那么右边就不能选择低于1k的,所以
    // 得设置x = 0
    let x = 0;
    for (let i = 0; i <= 250; i++) {
      // 因为第一个是面议,后面的都是数字,id与text值相同
      if (i == 0) {
        this.salaryExpectationLeft.push({ id: 0, text: `面议` });
        this.salaryExpectation['面议'] = [{ id: 0, text: `面议` }]; 
      } else {
        this.salaryExpectation[`${i}k`] = [];
        this.salaryExpectationLeft.push({ id: i, text: `${i}k` });
        x++;
        for (let j = 1; j <= 250; j++) {
          this.salaryExpectation[`${i}k`].push(
            { id: j + x, text: `${j + x}k` }
          )
        }
      }
    }
    this.wagesColumns = [
      {
        values: this.salaryExpectationLeft,
        className: 'column1',
        // defaultIndex: this.salaryRequirements[0].id
        // 没选中情况下进入picker的时候默认选种哪个数据
      },
      {
        values: this.salaryExpectation[
          this.salaryExpectationLeft[0].text
        ],
        className: 'column2',
        // defaultIndex: this.salaryRequirements[1].id
        // 没选中情况下进入picker的时候默认选种哪个数据
      },
    ];
  },
  methods: {
    // 每一次change的时候让picker右边数据变化
    wagesChange (picker, values) {
      this.wagesColumns[1].values = 
      this.salaryExpectation[values[0].text]
    },
    // 点击取消
    wagesCancel () {
      this.wages = false;
    },
    // 点击确定
    wagesConfirm (item) {
      if (item[0].id == 0) {
        item[1] = { id: 0, text: '面议' }
      }
      this.wages = false;
    },
  }
}
</script>

💬 COMMENT


🦄 支持markdown语法

👋友