AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonDialog 弹窗

基础用法 

<template>
  <div>
    <el-button type="primary" @click="handelClick">点击1弹窗</el-button>
    <common-dialog v-if="showDialog" title="我是弹窗组件" @close-dialog="closeDialog" @confirm-diaog="confirmDialog"></common-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
const showDialog = ref(false)


function handelClick() {
  showDialog.value = true
}

function closeDialog() {
  showDialog.value = false;
  ElMessage('关闭弹窗')
}

function confirmDialog() {
  showDialog.value = false;
  ElMessage('确认按钮')
}

</script>


<template>
  <div>
    <el-button type="primary" @click="handelClick">点击1弹窗</el-button>
    <common-dialog v-if="showDialog" title="我是弹窗组件" @close-dialog="closeDialog" @confirm-diaog="confirmDialog"></common-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { ElMessage } from 'element-plus'
const showDialog = ref(false)


function handelClick() {
  showDialog.value = true
}

function closeDialog() {
  showDialog.value = false;
  ElMessage('关闭弹窗')
}

function confirmDialog() {
  showDialog.value = false;
  ElMessage('确认按钮')
}

</script>


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

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

const showCustomDialog = ref(false)


function handelClick() {
  showCustomDialog.value = true
}

function handelCancel() {
  showCustomDialog.value = false
}

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-dialog
      v-if="showCustomDialog"
      title="自定义弹窗"
      :dialog-data="dialogData"
      @close-dialog="handelCancel"
    ></common-dialog>
  </div>
</template>

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

const showCustomDialog = ref(false)


function handelClick() {
  showCustomDialog.value = true
}

function handelCancel() {
  showCustomDialog.value = false
}

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-dialog全部参数的导入； btns： 支持弹窗按钮自定义Object[]false
fullscreen是否采用全屏弹窗Booleanfalse
width弹窗宽度， 目前支持两种数据形式， ’big/middle/small/full/及数字自定义方式‘，其中big:960pxmiddle:'831px', small:'560px',如果直接传number数字时或者百分比时，支持按照百分比或者数字进行宽度的自定义调整, 默认为middleString/Numberfalse

事件

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

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