android-cloud-H5/pages/rtcEngine/components/DropdownMenu.vue

vue
<template>
  <div class="dropdown-list-wrap">
    <div class="list-ite-wrap" :class="[{active: isActvie && item[defaultprop.label] === activeValue}]" :style="isActvie && item[defaultprop.label] === activeValue ? activeStyle : {}" v-for="(item, index) in list" :key="index" @click="selectHandle(item)">
      <span class="list-ite-label">{{ item.label }}</span>
      <span class="list-ite-value">{{ item.value }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropdownMenu',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 替换回显以及key字段
    prop: {
      type: Object,
      default: () => ({})
    },
    // 选中的值
    activeValue: '',
    // 下拉菜单是否激活选中项
    isActvie: {
      type: Boolean,
      default: false
    },
    // 下拉菜单选中时的样式
    activeStyle: {
      type: [Object, Array],
      default: () => ({})
    }
  },
  data() {
    return {
      // 默认的prop
      defaultprop: {
        label: 'label',
        value: 'value'
      },
    };
  },
  mounted() {
    // 如果有自定义的prop，那么就直接替换
    if (Object.keys(this.prop).length) Object.assign(this.defaultprop, this.prop)
  },
  methods: {
    selectHandle(item) {
      // 触发选择事件
      this.$emit('change', item);
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdown-list-wrap{
  .list-ite-wrap{
    display: flex;
    padding: 12px 0;
    width: 110px;
    justify-content: space-between;
  }
}

.active {
  color: #3666F2;
}
</style>