ci: 新增 interface , tools, use 文件夹
This commit is contained in:
@@ -32,9 +32,10 @@
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
import useClickOutside from '../use/useClickOutside'
|
||||
import useClickOutside from '../../use/useClickOutside'
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null)
|
||||
const isClickOutside = useClickOutside(dropdownRef)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
@@ -50,10 +51,7 @@ const openState = ref(false)
|
||||
const open = function () {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
// 控制点击事件
|
||||
const isClickOutside = useClickOutside(dropdownRef)
|
||||
|
||||
// 通过 watch 去监听事件的变化
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false
|
||||
|
||||
@@ -2,16 +2,16 @@
|
||||
<div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
|
||||
<ul class="layui-tab-title">
|
||||
<li
|
||||
v-for="ss in slots"
|
||||
:key="ss"
|
||||
:class="[ss.props.id === active ? 'layui-this' : '']"
|
||||
@click.stop="change(ss.props.id)"
|
||||
v-for="s in slots"
|
||||
:key="s"
|
||||
:class="[s.props.id === active ? 'layui-this' : '']"
|
||||
@click.stop="change(s.props.id)"
|
||||
>
|
||||
{{ ss.props.title }}
|
||||
{{ s.props.title }}
|
||||
<i
|
||||
v-if="allowClose"
|
||||
class="layui-icon layui-icon-close layui-unselect layui-tab-close"
|
||||
@click.stop="close(ss.props.id)"
|
||||
@click.stop="close(s.props.id)"
|
||||
></i>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -21,10 +21,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayTab" lang="ts">
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayTab',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, provide, ref, useSlots } from 'vue'
|
||||
|
||||
const slot = useSlots() as any
|
||||
const slot = useSlots()
|
||||
const slots = slot.default && slot.default()
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -33,7 +39,6 @@ const props = defineProps<{
|
||||
allowClose?: boolean
|
||||
}>()
|
||||
|
||||
// select update 时, 通知 change 事件
|
||||
const emit = defineEmits(['update:modelValue', 'change', 'close'])
|
||||
|
||||
const active = computed({
|
||||
|
||||
@@ -4,8 +4,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayTabItem',
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup name="LayTabItem" lang="ts">
|
||||
import { defineProps, inject, useSlots } from 'vue'
|
||||
import { defineProps, inject } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
id?: string
|
||||
@@ -13,3 +19,5 @@ const props = defineProps<{
|
||||
|
||||
const active = inject('active')
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -10,9 +10,7 @@ export type IDefineComponent<Props = UnknownObject> = DefineComponent<Props> & {
|
||||
}
|
||||
|
||||
export interface InstallOptions extends StringObject {
|
||||
/** Pagination Attributes */
|
||||
pagination?: null
|
||||
/** Menu Attributes */
|
||||
menu?: null
|
||||
}
|
||||
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
import { ref, onMounted, onUnmounted, Ref } from 'vue'
|
||||
|
||||
const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {
|
||||
|
||||
// 设置一个导出值
|
||||
const isClickOutside = ref(false);
|
||||
|
||||
// 给界面绑定上事件
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (elementRef.value) {
|
||||
// e.target 有可能是为 null 所以需要断言
|
||||
if (elementRef.value.contains(e.target as HTMLElement)) {
|
||||
// 判断目标节点是不是当前的节点
|
||||
isClickOutside.value = false;
|
||||
} else {
|
||||
isClickOutside.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handler);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handler);
|
||||
});
|
||||
return isClickOutside;
|
||||
}
|
||||
|
||||
export default useClickOutside;
|
||||
Reference in New Issue
Block a user