AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonDrawer 抽屉

基础用法 

<template>
  <div>
    <el-button type="primary" @click="handelClick">点击1抽屉</el-button>
    <common-drawer v-if="showDialog" title="我是抽屉组件"></common-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showDialog = ref(false)


function handelClick() {
  showDialog.value = true
}

</script>


<template>
  <div>
    <el-button type="primary" @click="handelClick">点击1抽屉</el-button>
    <common-drawer v-if="showDialog" title="我是抽屉组件"></common-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showDialog = ref(false)


function handelClick() {
  showDialog.value = true
}

</script>


<!-- 自定义抽屉按钮 -->
<template>
  <div>
    <el-button @click.stop="handelClick">自定义抽屉</el-button>
    <common-drawer
      v-if="showCustomDialog"
      title="自定义抽屉"
      :drawer-data="dialogData"
      @close-drawer="handelCancel"
    ></common-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showCustomDialog = ref(false)


function handelClick() {
  showCustomDialog.value = true
}

function handelCancel() {
  showCustomDialog.value = true
}

function handelClose() {
  showCustomDialog.value = false
}

function handelConfirm () {
  showCustomDialog.value = false
}
const dialogData = ref({
  btns: [
    { label: '取消', name: 'cancel', onClick: handelCancel },
    { label: '关闭', type: 'danger', name: 'close', onClick: handelClose },
    { label: '确认', type: 'promary', name: 'confirm', onClick: handelConfirm }
  ]
});

</script>


<!-- 自定义抽屉按钮 -->
<template>
  <div>
    <el-button @click.stop="handelClick">自定义抽屉</el-button>
    <common-drawer
      v-if="showCustomDialog"
      title="自定义抽屉"
      :drawer-data="dialogData"
      @close-drawer="handelCancel"
    ></common-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showCustomDialog = ref(false)


function handelClick() {
  showCustomDialog.value = true
}

function handelCancel() {
  showCustomDialog.value = true
}

function handelClose() {
  showCustomDialog.value = false
}

function handelConfirm () {
  showCustomDialog.value = false
}
const dialogData = ref({
  btns: [
    { label: '取消', name: 'cancel', onClick: handelCancel },
    { label: '关闭', type: 'danger', name: 'close', onClick: handelClose },
    { label: '确认', type: 'promary', name: 'confirm', onClick: handelConfirm }
  ]
});

</script>

配置参数

参数说明类型是否必须
dialogDatadrawerData： 支持element-plus中el-drawer全部参数的导入； btns： 支持抽屉按钮自定义Object[]false
fullscreen是否采用全屏抽屉Booleanfalse
width抽屉宽度， 目前支持两种数据形式， ’数字自定义方式‘，如果直接传number数字时或者百分比时，支持按照百分比或者数字进行宽度的自定义调整, 默认900pxString/Numberfalse

事件

事件

事件名称说明回调
handleClose触发el-dialog的before-close钩子，确保点击右上角×后下次依然可以打开弹窗，必须调用--
closeDialog点击取消时，触发的回调事件--
confirmDialog点击确认按钮时，触发的回调事件--
如果为自定义按钮时，回调事件将按照自定义按钮的onClick函数进行执行回调，
同时需要调用handleClose事件去做弹窗的关闭动作，否则弹窗被关闭后将无法在打开；

如果为自定义按钮时，回调事件将按照自定义按钮的onClick函数进行执行回调，
同时需要调用handleClose事件去做弹窗的关闭动作，否则弹窗被关闭后将无法在打开；