crm-mobile/components/wk-dropdown-item/wk-dropdown-item.vue

<template>
  <view>
    <view
      v-if="opened"
      class="wk-dropdown-item"
      @touchmove.stop.prevent
      @tap.stop.prevent>
      <template v-if="!$slots.default && !$slots.$default">
        <view
          v-for="(item, index) in options"
          :key="index"
          :class="{active: activeIndex === index}"
          class="wk-dropdown-item_options__item"
          @click="handleChoose(item, index)">
          <view class="text">
            {{ item.label }}
          </view>
          <text v-if="activeIndex === index" class="wk wk-check icon" />
        </view>
      </template>
		
      <slot v-else />
    </view>
  </view>
</template>

<script>
	/**
	 * WkDropdownItem 下拉菜单
	 * @author yxk
	 * @property {Array<Object>} options 下拉选项数组
	 * @property {String} name tab标题
	 * @property {String} leftIcon tab左侧图标
	 * @property {Number} defaultIndex 默认勾选中第几项
	 * @event {Function} choose 点击选项时触发 参数 opt 被点击的项 index 第几个被点击
	 */
  export default {
    name: 'WkDropdownItem',
    inject: ['dropdown'],
    props: {
      options: {
        type: Array,
        default: () => []
      },
      name: {
        type: String,
        required: true
      },
      leftIcon: {
        type: String,
        default: null
      },
      defaultIndex: {
        type: Number,
        default: -1
      }
    },
    data() {
      return {
        opened: false,
        activeIndex: -1
      }
    },
    computed: {
      propsObj() {
        return {
          name: this.name,
          leftIcon: this.leftIcon
        }
      }
    },
    watch: {
      propsObj: {
        handler() {
          this.initFunc()
        },
        deep: true
      },
      defaultIndex: {
        handler(val) {
          this.activeIndex = val
        },
        immediate: true
      }
    },
    created() {
      this.initFunc()
    },
    methods: {
      initFunc() {
        const findIndex = this.dropdown.menuList.findIndex(o => this.name === o.name)
        if (findIndex === -1) {
          // this.dropdown.children.push(this)
          this.dropdown.menuList.push({
            name: this.name,
            leftIcon: this.leftIcon
          })
        } else {
          // this.dropdown.children.splice(findIndex, 1, this)
          this.dropdown.menuList.splice(findIndex, 1, {
            name: this.name,
            leftIcon: this.leftIcon
          })
        }
      },
			
      getParentNode(name = undefined) {
        let parent = this.$parent;
        // 通过while历遍，这里主要是为了H5需要多层解析的问题
        while (parent) {
          // 父组件
          if (parent.$options && parent.$options.name !== name) {
            // 如果组件的name不相等，继续上一级寻找
            parent = parent.$parent;
          } else {
            return parent;
          }
        }
        return false;
      },
			
      handleChoose(opt, index) {
        this.activeIndex = index
        this.$emit('choose', opt, index)
        if (this.dropdown.autoClose) {
          this.dropdown.close()
        }
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-dropdown-item {
		width: 100%;
		flex: 1;
		overflow: auto;
		
		.wk-dropdown-item_options__item {
			height: 75rpx;
			line-height: 75rpx;
			padding: 0 30rpx;
			@include left;
			.text {
				flex: 1;
			}
			
			&.active {
				color: $theme-color;
				.icon {
					color: $theme-color;
					text-align: right;
				}
			}
		}
	}
</style>