全局提示

普通全局提示

用于表示普通操作信息提示

用于表示操作顺利达成

用于表示操作引起一定后果

用于表示操作引起严重的后果

用于帮助用户操作的信息提示

<template>
  <div class="demo-message-column">
    <t-message theme="info">用于表示普通操作信息提示</t-message>
    <t-message theme="success">用于表示操作顺利达成</t-message>
    <t-message theme="warning">用于表示操作引起一定后果</t-message>
    <t-message theme="error">用于表示操作引起严重的后果</t-message>
    <t-message theme="question">用于帮助用户操作的信息提示</t-message>
  </div>
</template>

显示代码 复制代码 复制代码

关闭全局提示

点击关闭按钮触发事件 close-btn-click

自定义关闭按钮（文字）关闭

自定义关闭按钮（函数）

x

自定义关闭按钮（插槽）

x

<template>
    <div class="demo-message-column">

        <t-message
        v-if="isShowMsg"
        :closeBtn="true"
        @close-btn-click="isShowMsg = false"
        >点击关闭按钮触发事件 close-btn-click </t-message>

        <t-message
        v-if="closableMsg"
        closeBtn="关闭"
        @close-btn-click="closableMsg = false"
        >自定义关闭按钮（文字）</t-message>

        <t-message :closeBtn="closeBtn" v-if="closableMsg1">自定义关闭按钮（函数）</t-message>

        <t-message v-if="closableMsg2">
        自定义关闭按钮（插槽）
        <template #closeBtn>
            <div class='t-message__close' @click="closableMsg2 = false">
            <b>x</b>
            </div>
        </template>
        </t-message>
    </div>
</template>

<script>
export default {
    data() {
        return {
        isShowMsg: true,
        closableMsg: true,
        closableMsg1: true,
        closableMsg2: true,
        };
    },
    methods: {
        closeBtn() {
        return (
            <div
            class='t-message__close'
            onClick={() => {
                this.closableMsg1 = false;
            }}
            >
            <b>x</b>
            </div>
        );
        },
    },
};
</script>

显示代码 复制代码 复制代码