警告

基础警告

这是一条普通的消息提示

这是一条成功的消息提示

这是一条警示信息

这是一条失败信息提示

<template>
    <div class="demo-alert-column">
        <t-alert theme="info" :message="infoMessage" />
        <t-alert theme="success" message="这是一条成功的消息提示" />
        <t-alert theme="warning">
            <template #message>
                这是一条警示信息
            </template>
        </t-alert>
        <t-alert theme="error">
            这是一条失败信息提示
        </t-alert>
    </div>
</template>
<script>
export default {
    data() {
        return {
            infoMessage: () => (
                <div>这是一条普通的消息提示</div>
            ),
        };
    },
};
</script>

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

带操作的警告

这是一条普通的消息提示

相关操作

<template>
    <div class="demo-alert-column">
        <t-alert theme="info" message="这是一条普通的消息提示" close>
            <template #operation>
                <span @click="handleOperation">相关操作</span>
            </template>
        </t-alert>
    </div>
</template>
<script>
export default {
    data() {
        return {
        };
    },
    methods: {
        handleOperation() {
            alert('operation clicked');
        },
    },
};
</script>

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

带相关描述性的警告

这是一条普通的消息提示

这是与普通的消息提示相关的文字辅助说明

相关操作

<template>
    <div class="tdesign-demo-block">
            <t-alert
            theme="info"
            title="这是一条普通的消息提示"
            message="这是与普通的消息提示相关的文字辅助说明"
            close
        >
            <template #operation>
                <span @click="handleOperation">相关操作</span>
            </template>
        </t-alert>
    </div>
</template>
<script>
export default {
    data() {
        return {
            warningClose: () => 'FunctionPropClose',
        };
    },
    methods: {
        handleOperation() {
            alert('operation clicked');
        },
    },
};
</script>

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

折叠的警告

这是折叠的第一条消息

展开全部

<template>
    <div class="tdesign-demo-block">
        <t-alert
        theme="info"
        close
        :max-line="2"
        >
            <span>这是折叠的第一条消息</span>
            <span>这是折叠的第二条消息</span>
            <span>这是折叠的第三条消息</span>
            <span>这是折叠的第四条消息</span>
            <span>这是折叠的第五条消息</span>
            <span>这是折叠的第六条消息</span>
        </t-alert>
    </div>
</template>
<script lang="jsx">
export default {
  data() {
    return {
      warningClose: () => 'FunctionPropClose',
    };
  },
  methods: {
    beforeClose() {
      return window.confirm('确认关闭吗？');
    },
    handleClosed() {
      alert('closed');
    },
  },
};
</script>

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