[Experiência prática] O pacote seletor de picker em vant facilita a seleção de formulários

prefácio

Para o componente seletor, o componente picker in vant é uma escolha muito adequada. Ele não apenas fornece opções de configuração flexíveis, mas também pode ser facilmente combinado com outros componentes vant para nos ajudar a criar rapidamente páginas móveis bonitas e fáceis de usar. Neste artigo, apresentarei como realizar a embalagem secundária com base no componente picker da vant para melhor atender às necessidades reais de negócios.

---

Ideias de implementação

1. Primeiro defina uma página de subcomponente para encapsular o seletor;
2. Introduza e registre o componente de encapsulamento (subcomponente) no componente pai (a página usada) e, em seguida, use-o na página. No componente pai, vincule vários atributos ao rótulo (nome do componente registrado) e o atributo precisa ser passado para montar O valor de é recebido recebendo dados propsno subcomponente (arquivo de encapsulamento);
3. Personalize o evento determinado no componente filho.Após chamar este evento, o componente filho this.$emit('自定义事件名',要传递的数据)envia os dados que o componente pai pode escutar, e finalmente o componente pai escuta o evento do componente filho, chama o evento e recebe os dados passados.

parâmetros definidos

parâmetro	descrever
Selecione o valor	valor de ligaçãomodel
valor chave	keycampo vinculado
keyLabel	valuecampo vinculado
colunas	A fonte optionde dados
obrigatório	Se deve exibir *o cheque
regras	Regras de validação
obrigatório	É necessário?
confirme	A função de retorno de chamada selecionada

---

arquivo de pacote

<template>
  <div>
    <van-field v-model="textValue" v-bind="$attrs" :name="$attrs.name" :rules="rules" :required="required" :readonly="readonly"
      :is-link="islink" @click="show = !show" />
    <van-popup v-model="show" get-container="body" position="bottom">
      <van-picker :columns="columns" show-toolbar :value-key="keyValue" :title="$attrs.label" @cancel="show = !show" @confirm="onConfirm">
        <template #option="option">
          {
   
   { option[keyLabel] }}
        </template>
      </van-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
      
      
  props: {
      
      
    required: {
      
      
      type: Boolean,
    },
    readonly: {
      
      
      type: Boolean,
    },
    islink: {
      
      
      type: Boolean,
    },
    columns: {
      
      
      type: Array,
    },
    rules: {
      
      
      type: Array,
    },
    selectValue: {
      
      
      type: String,
    },
    keyValue: {
      
      
      type: String,
    },
    keyLabel: {
      
      
      type: String,
    },
  },
  data() {
      
      
    return {
      
      
      show: false,
      textValue: "",
      selectOptions: [],
    };
  },
  methods: {
      
      
    onConfirm(obj) {
      
      
      this.textValue = obj.label;
      this.show = !this.show;
      this.$emit("confirm", obj);
    },
    formatterValue(value) {
      
      
      let str = "";
      if (!this.columns.length || !value.length) {
      
      
        str = "";
      } else {
      
      
        let oArr = this.columns.filter((item) => {
      
      
          return item[this.keyValue].toString() == value.toString();
        });
        str = oArr[0][this.keyLabel];
      }

      return str;
    },
    //根据key值格式化成picker需要的option格式
    formatColumnsByKey() {
      
      
      let arr = [];
      let value = this.keyValue ? this.keyValue : "value";
      let label = this.keyLabel ? this.keyLabel : "label";
      this.columns.map((item) => {
      
      
        arr.push({
      
      
          label: item[label],
          value: item[value],
        });
      });
      this.selectOptions = arr;
    },
  },
  watch: {
      
      
    columns: {
      
      
      handler(newValue) {
      
      
        this.textValue = this.formatterValue(
          this.selectValue ? this.selectValue : ""
        );
      },
      deep: true,
      immediate: true,
    },
    selectValue: {
      
      
      handler(newValue) {
      
      
        this.textValue = this.formatterValue(newValue ? newValue : "");
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

---

usar arquivo

<template>
  <div>
    <van-form validate-first>
      <VanSelect name="qylx" label="企业类型" placeholder="请选择企业类型" :selectValue="qylx" :keyValue="`value`" :keyLabel="`label`" :required="true"
        :readonly="true" :columns="qylxOption" :rules="rules.qybh" @confirm="qylxConfirm" />
      <div class="btnBomBox">
        <van-button round size="small" block @click="submitOn" type="info">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import VanSelect from "@/components/vanSelect/index";
export default {
      
      
  components: {
      
      
    VanSelect,
  },
  data() {
      
      
    return {
      
      
      qylx: "",
      qylxOption: [
        {
      
       label: "自营企业", value: "1" },
        {
      
       label: "其他企业", value: "2" },
      ],
      rules: {
      
      
        qybh: [
          {
      
      
            required: true,
            message: "请选择企业类型",
          },
        ],
      },
    };
  },
  methods: {
      
      
    // 点击确定
    qylxConfirm(value) {
      
      
      this.qylx = value.value;
    },
    // 提交
    submitOn() {
      
      
      console.log(this.qylx);
    },
  },
};
</script>

<style scoped>
.btnBomBox {
      
      
  padding: 0px 16px;
  display: flex;
  justify-content: center;
}
</style>

---

alcançar o efeito