Dialog 对话框

基础用法

<template>
  <div>
    <plv-button @click="visible = true">点击打开 Dialog</plv-button>
    <plv-dialog v-model="visible">
      这是一段信息
    </plv-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    }
  };
</script>

显示代码

显示底部按钮

<template>
  <div>
    <plv-button @click="visible = true">打开</plv-button>
    <plv-dialog
      show-footer-btn
      @confirm="handleConfirm"
      @cancel="handleCancel"
      v-model="visible">
      这是一个有底部按钮的Dialog
    </plv-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    },
    methods: {
      handleConfirm() {
        this.$toast.success('点击了确认');
      },
      handleCancel() {
        this.$toast.warning('点击了取消');
      }
    }
  };
</script>

显示代码

一次性弹窗

<template>
  <div>
    <plv-button @click="visible = true">点击打开 Dialog</plv-button>
    <plv-dialog
      dialog-key="my-once-dialog"
      only-once-open
      v-model="visible"
      @close="handleClose">
      这是一段信息
    </plv-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    },

    methods: {
      handleClose({ isOnceAutoClose }) {
        if (isOnceAutoClose) {
          this.$toast.info('一次性窗口自动关闭');
        }
      }
    }
  };
</script>

显示代码

不再提示功能

<template>
  <div>
    <plv-button @click="visible = true">点击打开 Dialog</plv-button>
    <plv-dialog
      dialog-key="not-tips-again-dialog"
      not-tips-again
      show-footer-btn
      v-model="visible"
      @close="handleClose"
    >
      这又是一段信息
    </plv-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false
      };
    },

    methods: {
      handleClose({ isNotTipsAgainAutoClose }) {
        if (isNotTipsAgainAutoClose) {
          this.$toast.info('不再提示的窗口自动关闭');
        }
      }
    }
  };
</script>

显示代码

高度自动控制

窗口最大高度为 90%，超过后窗口主体会自动出现滚动条。

<template>
  <div>
    <plv-button @click="visible = true">打开</plv-button>
    <plv-dialog v-model="visible" show-footer-btn>
      <div class="test">123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123<br />123</div>
    </plv-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
}
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
visible / v-model	是否显示 Dialog	Boolean	-	false
title	标题	String	-	提示
width	窗口宽度	String	-	560px
custom-class	自定义类名	String	-	-
closable	是否显示关闭按钮	Boolean	-	true
close-on-click-mask	是否可以通过点击遮罩层关闭 Dialog	Boolean	-	true
refresh-on-show	Dialog 显示时是否重新加载内容插槽	Boolean	-	false
hide-shadow	是否不显示阴影	Boolean	-	false
show-footer-btn	是否显示底部按钮	Boolean	-	false
show-confirm	是否显示确定按钮	Boolean	-	true
show-cancel	是否显示取消按钮	Boolean	-	true
confirm-text	确认按钮文案	String	-	确认
confirm-disabled	确认按钮是否禁用	Boolean	-	false
confirm-type	确认按钮类型	String	operate delete cancel	-
cancel-text	取消按钮文案	String	-	取消
cancel-disabled	取消按钮是否禁用	String	-	false
cancel-type	取消按钮类型	String	operate delete cancel	cancel
close-on-click-confirm	点击确认按钮时是否关闭 Dialog	Boolean	-	false
close-on-click-cancel	点击取消按钮时是否关闭 Dialog	Boolean	-	true
append-to-body	是否把对话框元素已到body中	Boolean	-	true
content-style	内容区域样式	String Object	-	-
dialog-key	弹窗标示值	String	-	-
dialog-key-prefix	弹窗标示值前缀	String	-	plvAdminUiDialogDialogKeyPrefix
not-tips-again	是否开启不再提示选择	Boolean	-	false
not-tips-again-text	不再提示复选框文本	String	-	不再提示
only-once-open	是否只显示一次弹窗	Boolean	-	false
custom-style	自定义样式	Boolean	-	false
hide-header	是否隐藏弹窗 header	Boolean	-	false

Events

事件名称	说明	回调参数
visibleChange	Dialog 打开或关闭时触发	出现则为 true，隐藏则为 false
open	Dialog 打开时触发	-
close	Dialog 关闭时触发	{ type: 触发类型 }
confirm	点击确认按钮时触发	-
cancel	点击取消按钮时触发	-
beforeEnter	Vue transition组件生命周期 (opens new window)	-
enter	Vue transition组件生命周期 (opens new window)	-
afterEnter	Vue transition组件生命周期 (opens new window)	-
enterCancelled	Vue transition组件生命周期 (opens new window)	-
beforeLeave	Vue transition组件生命周期 (opens new window)	-
leave	Vue transition组件生命周期 (opens new window)	-
afterLeave	Vue transition组件生命周期 (opens new window)	-
leaveCancelled	Vue transition组件生命周期 (opens new window)	-

Slot

name	说明
—	内容插槽
title	标题区插槽
footer	底部插槽