122 lines
4.0 KiB
Vue
122 lines
4.0 KiB
Vue
<template>
|
||
<view
|
||
v-if="show && active"
|
||
class="u-dropdown-item"
|
||
:class="customClass"
|
||
:style="$u.toStyle(customStyle)"
|
||
@touchmove.stop.prevent
|
||
@tap.stop.prevent
|
||
>
|
||
<block v-if="!slots.default && !slots.$default">
|
||
<scroll-view :scroll-y="true" :style="{ height: $u.addUnit(String(height)) }">
|
||
<view class="u-dropdown-item__options">
|
||
<u-cell-group>
|
||
<u-cell-item
|
||
@click="cellClick(item.value)"
|
||
:arrow="false"
|
||
:title="item.label"
|
||
v-for="(item, index) in options"
|
||
:key="index"
|
||
:title-style="{ color: modelValue == item.value ? activeColor : inactiveColor }"
|
||
>
|
||
<u-icon
|
||
v-if="modelValue == item.value"
|
||
name="checkbox-mark"
|
||
:color="activeColor"
|
||
size="32"
|
||
></u-icon>
|
||
</u-cell-item>
|
||
</u-cell-group>
|
||
</view>
|
||
</scroll-view>
|
||
</block>
|
||
<slot v-else />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
export default {
|
||
name: 'u-dropdown-item',
|
||
options: {
|
||
addGlobalClass: true,
|
||
// #ifndef MP-TOUTIAO
|
||
virtualHost: true,
|
||
// #endif
|
||
styleIsolation: 'shared'
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, useSlots, watch } from 'vue';
|
||
import { $u, useChildren } from '../..';
|
||
import { DropdownItemProps } from './types';
|
||
|
||
/**
|
||
* dropdown-item 下拉菜单
|
||
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
|
||
* @tutorial https://uviewpro.cn/zh/components/dropdown.html
|
||
* @property {String | Number} v-model 双向绑定选项卡选择值
|
||
* @property {String} title 菜单项标题
|
||
* @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
|
||
* @property {Boolean} disabled 是否禁用此选项卡（默认false）
|
||
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
|
||
* @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
|
||
* @property {Boolean} show 控制是否显示菜单项（默认true）
|
||
* @example <u-dropdown-item title="标题"></u-dropdown-item>
|
||
*/
|
||
|
||
// props 定义
|
||
const props = defineProps(DropdownItemProps);
|
||
|
||
// emits 定义
|
||
const emit = defineEmits(['update:modelValue', 'change']);
|
||
|
||
// 插槽
|
||
const slots = useSlots();
|
||
|
||
const { parentExposed, emitToParent } = useChildren('u-dropdown-item', 'u-dropdown');
|
||
|
||
// 当前项是否处于展开状态
|
||
const active = ref(false);
|
||
// 激活时左边文字和右边对勾图标的颜色
|
||
const activeColor = computed(() => parentExposed.value?.props?.activeColor || $u.color.primary);
|
||
// 未激活时左边文字和右边对勾图标的颜色
|
||
const inactiveColor = computed(() => parentExposed.value?.props?.inactiveColor || $u.color.contentColor);
|
||
|
||
// 监听props变化，通知父组件重新初始化
|
||
const propsChange = computed(() => `${props.title}-${props.disabled}-${props.show}`);
|
||
|
||
// 监听propsChange变化，通知父组件重新init
|
||
watch(propsChange, () => {
|
||
emitToParent('init');
|
||
});
|
||
|
||
/**
|
||
* cell被点击
|
||
* @param value 选中值
|
||
*/
|
||
function cellClick(value: string | number | any) {
|
||
// 修改通过v-model绑定的值
|
||
emit('update:modelValue', value);
|
||
// 通知父组件(u-dropdown)收起菜单
|
||
emitToParent('close');
|
||
// 发出事件，抛出当前勾选项的value
|
||
emit('change', value);
|
||
}
|
||
|
||
function setActive(value: boolean) {
|
||
active.value = value;
|
||
}
|
||
|
||
defineExpose({
|
||
cellClick,
|
||
setActive,
|
||
props
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '../../libs/css/style.components.scss';
|
||
</style>
|