theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🌀(dropdown): 整理代码

Browse Source
This commit is contained in:
就眠儀式 2022-06-07 21:04:20 +08:00
parent 1718e32735
commit 60da1da79b
3 changed files with 19 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
package/component/src/component/dropdown/index.vue
View File

@ -6,7 +6,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import "./index.less"; import "./index.less";
import { computed, provide, ref } from "vue"; import { provide, ref } from "vue";
import { onClickOutside } from "@vueuse/core"; import { onClickOutside } from "@vueuse/core";
import { DropdownTrigger } from "./interface"; import { DropdownTrigger } from "./interface";
@ -22,33 +22,30 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
const openState = ref(false); const openState = ref(false);
const dropdownRef = ref<null | HTMLElement>(); const dropdownRef = ref<null | HTMLElement>();
const dropdownX = ref<number | string>(0);
const dropdownY = ref<number | string>("auto");
const emit = defineEmits(["open", "hide"]); const emit = defineEmits(["open", "hide"]);
onClickOutside(dropdownRef, () => { onClickOutside(dropdownRef, () => {
openState.value = false; openState.value = false;
}); });
const open = function (event?: Event): void { const open = (): void => {
if (props.disabled === false) { if (props.disabled == false) {
openState.value = true; openState.value = true;
emit("open"); emit("open");
} }
}; };
const hide = function (): void { const hide = (): void => {
openState.value = false; openState.value = false;
emit("hide"); emit("hide");
}; };
const toggle = function (event?: Event): void { const toggle = (): void => {
if (props.disabled === false) if (props.disabled == false)
if (openState.value) { if (openState.value) {
hide(); hide();
} else { } else {
open(event); open();
} }
}; };
@ -61,13 +58,13 @@ defineExpose({ open, hide, toggle });
<div <div
ref="dropdownRef" ref="dropdownRef"
class="layui-dropdown" class="layui-dropdown"
@mouseenter="trigger === 'hover' && open()" @mouseenter="trigger == 'hover' && open()"
@mouseleave="trigger === 'hover' && hide()" @mouseleave="trigger == 'hover' && hide()"
:class="{ 'layui-dropdown-up': openState }" :class="{ 'layui-dropdown-up': openState }"
> >
<div <div
@click="trigger === 'click' && toggle()" @click="trigger == 'click' && toggle()"
@contextmenu.prevent="trigger === 'contextMenu' && toggle($event)" @contextmenu.prevent="trigger == 'contextMenu' && toggle()"
> >
<slot></slot> <slot></slot>
</div> </div>

17
package/document/src/layouts/Layout.vue
View File

@ -79,24 +79,19 @@
<div class="theme-panel"> <div class="theme-panel">
<lay-color-picker <lay-color-picker
v-model="appStore.themeVariable['--global-primary-color']" v-model="appStore.themeVariable['--global-primary-color']"
></lay-color-picker ></lay-color-picker>
>
<lay-color-picker <lay-color-picker
v-model="appStore.themeVariable['--global-normal-color']" v-model="appStore.themeVariable['--global-normal-color']"
></lay-color-picker ></lay-color-picker>
>
<lay-color-picker <lay-color-picker
v-model="appStore.themeVariable['--global-warm-color']" v-model="appStore.themeVariable['--global-warm-color']"
></lay-color-picker ></lay-color-picker>
>
<lay-color-picker <lay-color-picker
v-model="appStore.themeVariable['--global-danger-color']" v-model="appStore.themeVariable['--global-danger-color']"
></lay-color-picker ></lay-color-picker>
>
<lay-color-picker <lay-color-picker
v-model="appStore.themeVariable['--global-checked-color']" v-model="appStore.themeVariable['--global-checked-color']"
></lay-color-picker ></lay-color-picker>
>
<lay-input <lay-input
v-model="appStore.themeVariable['--global-border-radius']" v-model="appStore.themeVariable['--global-border-radius']"
style="display: inline-block; width: 130px" style="display: inline-block; width: 130px"
@ -390,7 +385,7 @@ export default {
.theme-panel { .theme-panel {
width: 380px; width: 380px;
padding: 0px 10px 10px 10px padding: 0px 10px 10px 10px;
} }
.theme-panel > * { .theme-panel > * {