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

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

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

2
package/document/src/plugin/highlight.ts
View File

@ -41,4 +41,4 @@ export default (str: string, lang: string): string => {
return wrap(code, rawLang);
}
return wrap(str, "text");
};
};