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