气泡确认框

基础气泡确认框

<template>
    <div class="demo-popconfirm-column">
        <div class='demo-popconfirm-row'>
            <t-popconfirm theme="default" content="确认删除订单吗"
            :cancelBtn="{
            content: '取消',
            theme: 'default',
            variant: 'outline',
            }">
                <t-button>删除订单</t-button>
            </t-popconfirm>
        </div>

        <!-- 受控用法：自由控制浮层显示与否 -->
        <div class='demo-popconfirm-row'>
            <t-popconfirm
            :visible="visible"
            theme="default"
            content="是否提交审核？（自由控制浮层显示或隐藏）"
            @visible-change="onVisibleChange"
            :cancelBtn="{
            content: '取消',
            theme: 'default',
            variant: 'outline',
            }"
            >
                <t-button >提交审核</t-button>
            </t-popconfirm>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        visible: true,
        };
    },
    methods: {
        onVisibleChange(val, context = {}) {
            // trigger 表示触发来源，可以根据触发来源自由控制 visible
            if (context && context.trigger === 'confirm') {
                const msg = this.$message.info('提交中');
                const timer = setTimeout(() => {
                    this.$message.close(msg);
                    this.$message.success('提交成功！');
                    this.visible = false;
                    clearTimeout(timer);
                }, 1000);
            } else {
                this.visible = val;
            }
        },
    },
};
</script>

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

不同图标气泡确认框

<template>
    <div>
        <div class="demo-popconfirm-column">
            <div class="demo-popconfirm-row">
                <t-popconfirm content="普通事件通知类型偏向于确认" v-model="visible1">
                    <t-button>默认</t-button>
                </t-popconfirm>
            </div>

            <div class="demo-popconfirm-row">
                <t-popconfirm theme="warning" content="事件通知类型偏向于提示" v-model="visible2">
                    <t-button theme="warning">警告</t-button>
                </t-popconfirm>
            </div>

            <div class="demo-popconfirm-row">
                <t-popconfirm theme="danger" content="事件通知类型偏向于高危提醒" v-model="visible3">
                    <t-button theme="danger">危险</t-button>
                </t-popconfirm>
            </div>
        </div>

        <div class="demo-popconfirm-column">
            <div class="demo-popconfirm-row">
                <t-popconfirm content="基础气泡确认框文案示意文字按钮" :popupProps="{ placement: 'bottom' }">
                <i slot='icon' class="care-icon-help"></i>
                <t-button variant="outline">自定义图标（插槽）</t-button>
                </t-popconfirm>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
        visible1: true,
        visible2: false,
        visible3: false,
        };
    }
};
</script>

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

带描述信息的气泡确认框

<template>
    <div class="demo-popconfirm-column">
        <div class="demo-popconfirm-row">
            <t-popconfirm theme="default">
                <template slot="content">
                    <p class="care-popconfig__title">带描述的气泡确认框文字按钮</p>
                    <p class="care-popconfig__describe">带描述的气泡确认框在主要说明之外增加了操作相关的详细描述</p>
                </template>
                <t-button theme="primary">自定义浮层内容</t-button>
            </t-popconfirm>
        </div>
    </div>
</template>

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

不同位置的气泡确认框

<template>
    <!-- 可以使用 popupProps.placement 控制弹出方向 -->
    <div class="demo-popconfirm-column">
        <t-popconfirm theme="default" content="直接使用 placement 进行设置" placement="bottom">
            <t-button variant="outline">浮层出现在下方</t-button>
        </t-popconfirm>
        <t-popconfirm theme="default" content="透传属性到 Popup 组件进行设置" :popupProps="{ placement: 'right' }">
            <t-button variant="outline" style="margin-left: 60px;">浮层出现在右侧</t-button>
        </t-popconfirm>
    </div>
</template>

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