storevisit-ui-mobile/src/components/zSelect.vue

<template>
  <div class="zSelect">
    <div>
      <div class="z-cell"><span class="van-f-red">*</span>下拉选择</div>
    </div>
    <div class="checkbox">
      <van-field
          readonly
          clickable
          name="picker"
          :value="zSelectValuec"
          placeholder="点击选择"
          @click="zSelect = true"
      >
      </van-field>
    </div>
    <van-popup v-model="zSelect" position="bottom">
      <van-picker
          show-toolbar
          :columns="zSelectcolumns"
          @confirm="onConfirm"
          @cancel="zSelect = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "zSelect",
  props: {
    zSelectcolumns: [],
    zSelectValue: "",
    textc: "",
    rules: false,
  },
  data() {
    return {
      zSelect: false,
      zSelectValuec: this.zSelectValue
    }
  },
  // computed: {
  // 	zSelectValuefn:{
  // 		get() {
  // 			return this.zSelectValuec=this.zSelectValuec;
  // 		},
  // 		set(newValue) {
  // 			return newValue;
  // 		}
  // 	}
  // },
  methods: {
    onConfirm(value) {
      let datalist = {
        type: this.textc,
        value: value
      }
      this.zSelectValuec = value
      this.$emit('zSelectVal', datalist)
      this.zSelect = false
    }
  }
}
</script>

<style scoped>
.van-f-red {
  color: red;
  width: 4px;
  display: inline-block;
  padding-right: 4px;
}

.zSelect .z-cell {
  padding: 10px 16px 0 16px;
  font-size: 16px;
}

.checkbox {
  padding: 10px 16px 0 16px;
  background-color: white;
}

.checkbox .van-checkbox {
  padding-bottom: 10px
}

</style>
<style>

</style>