通知

html

<div class="demo-line">
    <feng-button text="成功" @click="showMessage('success', '成功', '成功啦   (^&^)/')"></feng-button>
    <feng-button text="警告" @click="showMessage('warning', '警告', '警告！  （～￣▽￣～）')"></feng-button>
    <feng-button text="错误" @click="showMessage('error', '错误', '发生错误了！！！  w(ﾟДﾟ)w')"></feng-button>
    <feng-button text="提示" @click="showMessage('info', '提示', '这是一个消息   ( つ•̀ω•́)つ')"></feng-button>
</div>

javascript

import { getCurrentInstance } from "vue";

const currentInstance = getCurrentInstance();
showMessage = (type, title, text) => {
    currentInstance?.appContext.config.globalProperties.$FengMessage({
        title: title,
        type: type,
        text: text,
        // isBrief: false,
        duration: 5000
    })
}

属性

属性名	说明	默认值
title	标题	''
type	消息类型	'info'
text	内容文本	''
isBrief	是否为短内容	true
duration	显示时长	-（不会消失）

type

类型	说明
success	成功
warning	警告
error	错误
info	提示

对话框

<div class="demo-line">
    <feng-button text="打开对话框" @click="isOpenDialog = true"></feng-button>
    <feng-dialog width="60%" v-model:open="isOpenDialog" @ok="output('点击了确定按钮')" @no="output('点击了取消按钮')">
        <template #body>
            <div class="user-select" style="padding: 20px;font-weight: 300;">
                <header style="font-size: 20px;font-weight: 500;margin-bottom: 10px;">
                    这是一个对话框
                </header>
                <p>
                    人永远不会知道，谁哪次不经意的跟你说了再见之后，就真的不会见了。
                </p>
                <p style="text-align: right;">
                    ——《千与千寻》
                </p>
            </div>
        </template>
    </feng-dialog>
</div>

属性

属性名	说明	默认值
v-model:open	是否打开	false
width	对话框宽度	"80%"

插槽

插槽名	说明
body	主体内容
footer	底部内容

事件

属性名	说明
ok	确定回调
no	取消回调