WARNING

请在手机模拟器模式查看该功能

dialog props

属性	描述	类型	默认值
visible	开启dialog，可用v-model关联	boolean	false
type	dialog类型，有'alert', 'confirm'可选	_ string _	alert
title	标题	string	-
message	toast内容	string	-
confirmBtnText	确认按钮的文案	string	-
confirmBtnColor	确认按钮的颜色	string	rgb(19, 187, 134)
confirmBtnFontSize	确认按钮的font-size	number	14
cancelBtnText	取消按钮的文案	string	-
cancelBtnColor	取消按钮的颜色	string	#999999
cancelBtnFontSize	取消按钮的font-size	number	14
beforeConfirm	确认前的回调函数，当返回false时则，终止确认回调事件，仅当type为confirm时有效，该函数支持promise	funtion	-
callback	点击操作事件的回调函数，当dialog组件以函数的形式调用时，可以不用传	funtion	-
zIndex	层级样式	number	1000

dialog 方法

名称	描述
Dialog.alert	以提示的形式展示
Dialog.confrim	以确认框的形式展示

dialog slot

名称	描述
title	标题区域的替换
message	文案区域的替换

dialog events

名称	描述	参数
close	当dialog关闭动画结束后的回调	-
cancel	confirm点击取消按钮的回调	-
confirm	点击确认按钮的回调	-
before-confirm-error	beforeConfir回调函数抛出异常的回调	err

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">组件方式的基本用法</p>
      <vill-button @click="visible=true">组件方式的基本用法</vill-button>
      <vill-dialog
        v-model="visible"
        title="dialog的标题"
        message="dialog的内容"
        confirmBtnText="确定"
        @cancel="handleCancel"
        @close="handleClose"
      />
      <p class="item_change">{{visible}}</p>
    </div>
    <div class="items">
      <p class="item_title">组件方式的自定义</p>
      <vill-button @click="visible2=true">组件方式的自定义</vill-button>
      <vill-dialog
        v-model="visible2"
        type="confirm"
        message="dialog的内容"
        confirmBtnText="确定"
        confirmBtnColor="red"
        :confirmBtnFontSize="16"
        cancelBtnText="取消"
        cancelBtnColor="#333333"
        :cancelBtnFontSize="16"
        :beforeConfirm="beforeConfirm"
        :callback="callback"
        :zIndex="2000"
      />
      <p class="item_change">{{visible2}}</p>
    </div>
    <div class="items">
      <p class="item_title">组件方式的插槽用法</p>
      <vill-button @click="visible3=true">组件方式的插槽用法</vill-button>
      <vill-dialog
        v-model="visible3"
        confirmBtnText="确定"
      >
        <template #title>
          <div class="title">
            - dialog的标题 -
          </div>
        </template>
        <template #message>
          <div class="message">
            <vill-icon name="calculator" />
            <span>我是内容</span>
          </div>
        </template>
      </vill-dialog>
      <p class="item_change">{{visible3}}</p>
    </div>
    <div class="items">
      <p class="item_title">函数方式的调用alert</p>
      <vill-button @click="openalert">函数方式的调用alert</vill-button>
    </div>
    <div class="items">
      <p class="item_title">函数方式的调用confirm(阻止确认按钮回调)</p>
      <vill-button @click="openconfirm">函数方式的调用confirm(阻止确认按钮回调)</vill-button>
    </div>
    <div class="items">
      <p class="item_title">函数方式的调用confirm(beforeConfirm异常)</p>
      <vill-button @click="openconfirmErr">函数方式的调用confirm(beforeConfirm异常)</vill-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      visible2: false,
      visible3: false
    }
  },
  methods: {
    handleClose() {
      console.log('alert close')
    },

    handleCancel() {
      console.log('alert cancel')
    },

    beforeConfirm() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(true)
        }, 2500)
      })
    },

    callback() {
      console.log('我是点击操作后的回调函数')
    },

    openalert() {
      this.$dialog.alert({
        message: '这是内容',
        title: '标题',
        confirmBtnText: "确定",
      }).catch((action) => {
        console.log('alert关闭了', action)
      })
    },

    openconfirm() {
      this.$dialog.confirm({
        message: '这是内容',
        title: '标题',
        beforeConfirm: () => {
          return false
        },
        confirmBtnText: "确定",
        cancelBtnText: "取消"
      }).then((action) => {
        console.log('确认后的回调', action)
      }).catch((action) => {
        console.log('confirm关闭了', action)
      })
    },

    openconfirmErr() {
      this.$dialog.confirm({
        message: '这是内容',
        title: '标题',
        beforeConfirm: this.errPromise,
        confirmBtnText: "确定",
        cancelBtnText: "取消",
        beforeConfirmError: this.dealErr
      }).then((action) => {
        console.log('确认后的回调', action)
      }).catch((action) => {
        console.log('confirm关闭了', action)
      })
    },

    errPromise() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('我出了异常')
        }, 2500)
      })
    },

    dealErr(err) {
      console.log(err)
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  padding: 10px 15px;
  box-sizing: border-box;
  color: red;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.message{
  background: palevioletred;
  color: white;
  font-size: 14px;
  padding:10px 20px;
  text-align: center;
  >span{
    margin-left: 5px;
  }
}
</style>