Modal 模态框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

<template>
	<LiButton @click="handleModal">徐然</LiButton>
	<LiModal
		:show="showModal"
		title="提示"
		content="Licht UI 是一个基于Vue3开发的轻量级组件库"
		@on-ok="showModal = !showModal"
		@on-cancle="showModal = !showModal"
	/>
</template>
<script setup lang="ts">
	import { ref } from "vue";

	const showModal = ref(false);
	const handleModal = () => (showModal.value = !showModal.value);
</script>
<style scope lang="scss"></style>

按钮文本

使用ok-text、cancle-text控制

<template>
	<LiButton @click="handleModal">徐然</LiButton>
	<LiModal
		:show="showModal"
		title="提示"
		content="Licht UI 是一个基于Vue3开发的轻量级组件库"
		ok-text="我是徐然"
		cancle-text="我是好像不是徐然"
		@on-ok="showModal = !showModal"
		@on-cancle="showModal = !showModal"
	/>
</template>
<script setup lang="ts">
	import { ref } from "vue";

	const showModal = ref(false);
	const handleModal = () => (showModal.value = !showModal.value);
</script>
<style scope lang="scss"></style>

插槽

<template>
	<LiButton @click="handleModal">徐然</LiButton>
	<LiModal
		:show="showModal"
		@on-ok="showModal = !showModal"
		@on-cancle="showModal = !showModal"
	>
		<template #title> 插槽标题 </template>
		<template #default> 插槽内容 </template>
	</LiModal>
</template>
<script setup lang="ts">
	import { ref } from "vue";

	const showModal = ref(false);
	const handleModal = () => (showModal.value = !showModal.value);
</script>
<style scope lang="scss"></style>

message Attributes

参数	说明	类型	可选值	默认值
type	类型	string	default / primary / success / warning / info / danger	default
duration	退出时间	number		2000
closed	是否可以关闭	boolean		false
location	位置	string	left / middle / right	left

Menu Slots

插槽名	作用域参数	说明
[title]		标题
-		内容