Confirm 确认框

基础用法

<template>
  <plv-button @click="openConfirm">打开确认框</plv-button>
</template>

<script>
  export default {
    methods: {
      openConfirm() {
        this.$confirm('确认要删除吗？').then(() => {
          this.$toast.success('点击了确认');
        }).catch(({ type }) => {
          this.$toast.info(`点击了取消，${type}`);
        });
      }
    }
  };
</script>

显示代码

自定义按钮

<template>
  <plv-button @click="openConfirm">打开确认框</plv-button>
</template>

<script>
  export default {
    methods: {
      openConfirm() {
        this.$confirm({
          message: '确定清空聊天室？',
          confirmText: '清空',
          confirmType: 'delete',
          cancelText: '暂不'
        }).then(() => {
          this.$toast.success('点击了清空');
        }).catch(({ type }) => {
          this.$toast.info(`点击了暂不，${type}`);
        });
      }
    }
  };
</script>

显示代码

使用HTML字符串

<template>
  <plv-button @click="openConfirm">打开确认框</plv-button>
</template>

<script>
  export default {
    methods: {
      openConfirm() {
        this.$confirm({
          message: '<div>您是否确定删除直播：欢迎观看本次直播？</div><div style="color: #FF5722;margin-top: 8px">直播删除后将无法恢复</div>',
          confirmText: '删除',
          confirmType: 'delete',
          cancelText: '暂不',
          useHtmlString: true
        }).then(() => {
          this.$toast.success('点击了删除');
        }).catch(({ type }) => {
          this.$toast.info(`点击了暂不，${type}`);
        });
      }
    }
  };
</script>

显示代码

使用组件形式

<template>
  <div>
    <plv-button @click="openConfirm">打开确认框</plv-button>
    <plv-confirm ref="confirm">确认下要删除吗？</plv-confirm>
  </div>
</template>

<script>
  export default {
    methods: {
      openConfirm() {
        this.$confirm(this.$refs.confirm).then(() => {
          this.$toast.success('点击了确认');
        }).catch(({ type }) => {
          this.$toast.info(`点击了取消，${type}`);
        });
      }
    }
  };
</script>

显示代码

倒计时

<template>
  <plv-button @click="confirm">打开确认框</plv-button>
</template>

<script>
  export default {
    methods: {
      async confirm() {
        await this.$confirm({
          message: '老师邀请你上麦',
          countDown: 10,
        });
        this.$toast.success('上麦了');
      }
    }
  };
</script>

显示代码

确认提示

<template>
  <div>
    <plv-button @click="confirm1">二次确认提示</plv-button>
    <plv-button @click="confirm2">二次确认提示警告</plv-button>
  </div>
</template>

<script>
export default {
  methods: {
    confirm1() {
      this.$confirm({
        message: '这是一个确认文本文本文本',
        confirmTips: '这是一个提示文本'
      });
    },
    confirm2() {
      this.$confirm({
        message: '这是一个确认文本文本文本',
        confirmTips: '这是一个提示文本',
        confirmTipsType: 'warning'
      });
    }
  }
}
</script>

显示代码

全局配置

import Vue from 'vue';
import { Confirm } from '@polyv/polyv-ui';

// 修改全局的 Confirm 确认按钮文案
Vue.use(Confirm, {
  confirmText: '我确定',
});

Options

参数与 Dialog 对话框的 props 参数一致，只有以下参数被覆盖。

参数	说明	类型	可选值	默认值
message	二次确认文本	String	-	-
width	窗口宽度	String	-	400px
showFooterBtn	是否显示底部按钮	Boolean	-	true
useHtmlString	使用html字符串	Boolean	-	false
countDown	倒计时自动确认	Number	-	-
confirmTips	确认提示	String	-	-
confirmTipsType	确认提示类型，同 Tips 组件	String	-	normal
autoConfirm	倒计时结束后，是否自动确认。为 false 时自动取消。	Boolean	-	true

Promise Callback

事件名称	说明	回调参数
then	确认时触发	组件实例
catch	取消时触发	{ type: 触发类型, isCloseIcon: 是否关闭按钮, isMask: 是否遮罩层, isCancelBtn: 是否取消按钮 }