ci: 新增 interface , tools, use 文件夹

This commit is contained in:
就眠仪式
2021-10-18 21:31:06 +08:00
parent 8bb751699f
commit fcb36ec87a
6 changed files with 27 additions and 20 deletions

View File

@@ -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

View File

@@ -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({

View File

@@ -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>

View File

@@ -10,9 +10,7 @@ export type IDefineComponent<Props = UnknownObject> = DefineComponent<Props> & {
}
export interface InstallOptions extends StringObject {
/** Pagination Attributes */
pagination?: null
/** Menu Attributes */
menu?: null
}

View File

@@ -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;