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

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

View File

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

View File

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

View File

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

View File

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

View File

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