traffic-eff-app/components/SingleDropList/index.vue

<template>
  <view class="single-drop-list" @click="show = true">
    <u--input
        v-model="name"
        disabled
        disabledColor="#ffffff"
        :placeholder="placeholder"
        border="none"
    ></u--input>
    <u-icon
        slot="right"
        name="arrow-right"
    ></u-icon>
    <u-action-sheet
        :show="show"
        :actions="src"
        :title="placeholder"
        @close="show = false"
        @select="onSelect"
    >
    </u-action-sheet>
  </view>
</template>

<script>

export default {
  name: 'single-drop-list',
  props: {
    src: {
      type: Array,
      default: () => [],
    },
    defaultValue: {
      type: String,
      default: () => {},
    },
    placeholder: {
      type: String,
      default: '选择参会企业',
    },
    onChange: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      show: false,
      name: '',
      value: '',
    };
  },
  watch: {
    src: {
      handler(val) {
        if (val && val.length > 0 && this.defaultValue) {
          const defItem = val.find((item) => item.value === this.defaultValue);
          this.name = defItem.name;
        }
      },
      immediate: true,
    },
  },
  created() {
  },
  mounted() {
  },
  methods: {
    onSelect(item) {
      this.name = item.name;
      this.onChange(item);
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />