[新增] dropdown组件添加disabled属性

This commit is contained in:
castleiMac 2022-04-04 10:05:27 +08:00
parent 305eff05e5
commit b914103920
2 changed files with 38 additions and 2 deletions

View File

@ -80,6 +80,37 @@ export default {
} }
</script> </script>
::: title 禁用弹出
:::
::: demo
<template>
<lay-dropdown>
<lay-button type="primary" disabled>点击无效</lay-button>
<template #content>
<lay-dropdown-menu>
<lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
<lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
<lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
</lay-dropdown-menu>
</template>
</lay-dropdown>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
}
</script>
::: :::
::: title Dropdown 属性 ::: title Dropdown 属性
@ -90,6 +121,7 @@ export default {
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 可选值 |
| ------- | -------- | --------------- | | ------- | -------- | --------------- |
| trigger | 触发方式 | `click` `hover` | | trigger | 触发方式 | `click` `hover` |
| disabled | 是否禁用触发 | `true` `false` |
::: :::

View File

@ -12,10 +12,12 @@ import { DropdownTrigger } from "./interface";
export interface LayDropdownProps { export interface LayDropdownProps {
trigger?: DropdownTrigger; trigger?: DropdownTrigger;
disabled?: boolean
} }
const props = withDefaults(defineProps<LayDropdownProps>(), { const props = withDefaults(defineProps<LayDropdownProps>(), {
trigger: "click", trigger: "click",
disabled: false
}); });
const openState = ref(false); const openState = ref(false);
@ -26,7 +28,8 @@ onClickOutside(dropdownRef, (event) => {
}); });
const open = function () { const open = function () {
openState.value = true; if (props.disabled === false)
openState.value = true;
}; };
const hide = function () { const hide = function () {
@ -34,7 +37,8 @@ const hide = function () {
}; };
const toggle = function () { const toggle = function () {
openState.value = !openState.value; if (props.disabled === false)
openState.value = !openState.value;
}; };
provide("openState", openState); provide("openState", openState);