jlst-new-company/src/components/c-select.vue

<template>
  <div id="c-select">
    <van-cell :title="label" @click="show = true">
      <span v-if="mval" style="color: #000">{{ mval }}</span>
      <span v-else>{{ `请选择${label}` }}</span>
    </van-cell>
    <van-popup v-model="show" show-toolbar position="bottom">
      <van-picker v-if="type === 'select'" :value-key="valueKey" :title="label" show-toolbar :columns="list" @confirm="onConfirm" @cancel="show = false" />
      <van-checkbox-group v-model="multi" v-else>
        <van-picker :title="label" :show-toolbar="true" :columns="list" @confirm="onConfirm" @cancel="show = false">
          <template #option="item">
            <van-checkbox :name="item">{{ item }}</van-checkbox>
          </template>
        </van-picker>
      </van-checkbox-group>
    </van-popup>
  </div>
</template>

<script>
const _ = require('lodash');
export default {
  name: 'c-select',
  props: {
    label: { type: String },
    mval: { type: String },
    list: { type: Array, default: () => [] },
    type: { type: String },
    valueKey: { type: String },
  },
  model: {
    prop: 'mval',
    event: 'change',
  },
  components: {},
  data: function () {
    return {
      show: false,
      selectList: [],
      multi: [],
    };
  },
  created() {},
  methods: {
    onConfirm(value) {
      if (this.type === 'select') this.$emit('change', value);
      else {
        const str = this.multi.join(',');
        this.$emit('change', str);
      }
      this.show = false;
    },
  },
  computed: {
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-cell__value {
  text-align: left;
}
</style>