Drawer 抽屉

默认配置

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

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

显示代码

常规用法

设置标题、内容样式、底部按钮，以及点击蒙层关闭抽屉

<template>
  <div>
    <plv-button @click="visible = true">点击打开 Drawer</plv-button>
    <plv-drawer
      title="标题"
      v-model="visible"
      :contentStyle="{ minWidth: '40%' }"
      close-on-click-mask
      show-footer-btn
      @confirm="handleConfirm"
      @cancel="handleCancel">
      这是一段信息
    </plv-drawer>
  </div>
</template>

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

显示代码

Attributes

参数	说明	类型	可选值	默认值
visible / v-model	是否显示 Drawer	Boolean	-	false
title	标题	String	-	提示
closable	是否显示关闭按钮	Boolean	-	true
close-on-click-mask	是否可以通过点击遮罩层关闭 Drawer	Boolean	-	true
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	取消按钮是否禁用	Boolean	-	false
cancel-type	取消按钮类型	String	operate delete cancel	cancel
close-on-click-confirm	点击确认按钮时是否关闭 Drawer	Boolean	-	false
close-on-click-cancel	点击取消按钮时是否关闭 Drawer	Boolean	-	true
append-to-body	是否把对话框元素移到body中	Boolean	-	true
content-style	内容区域样式	String Object	-	-

Events

事件名称	说明	回调参数
visibleChange	Drawer 打开或关闭时触发	出现则为 true，隐藏则为 false
open	Drawer 打开时触发	-
close	Drawer 关闭时触发	-
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)	-

Slots

name	说明
—	内容插槽
v4.10.0 footer-left	底部左侧
v4.10.0 footer-btn-center	按钮中间
v4.10.0 footer-right	底部右侧