feat(tab): 新增 allowClose 属性, change close 事件
This commit is contained in:
@@ -5,9 +5,10 @@
|
||||
v-for="ss in slots"
|
||||
:key="ss"
|
||||
:class="[ss.props.id === modelValue ? 'layui-this' : '']"
|
||||
@click="change(ss.props.id)"
|
||||
@click.stop="change(ss.props.id)"
|
||||
>
|
||||
{{ ss.props.title }}
|
||||
<i @click.stop="close(ss.props.id)" v-if="allowClose" class="layui-icon layui-icon-close layui-unselect layui-tab-close"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
@@ -17,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayTab" lang="ts">
|
||||
import { defineProps, inject, provide, ref, useSlots } from 'vue'
|
||||
import { defineProps, provide, ref, useSlots } from 'vue'
|
||||
|
||||
const slot = useSlots() as any
|
||||
const slots = slot.default && slot.default()
|
||||
@@ -25,17 +26,23 @@ const slots = slot.default && slot.default()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
modelValue: string
|
||||
allowClose?: boolean
|
||||
}>()
|
||||
|
||||
// select update 时, 通知 change 事件
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue','change','close'])
|
||||
|
||||
const active = ref(props.modelValue)
|
||||
|
||||
const change = function (id: any) {
|
||||
emit('update:modelValue', id)
|
||||
emit('change', id)
|
||||
active.value = id
|
||||
}
|
||||
|
||||
const close = function(id: any) {
|
||||
emit('close', id)
|
||||
}
|
||||
|
||||
provide('active', active)
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user