DialogPreView 对话框预览组件

该组件用于显示对话框预览，可以展示图表或者图片列表。

示例

<el-button @click="dialogVisible = true" type='primary'>echart打开

<template>
  <Layout>
    <DialogPreView
      title="对话框预览示例"
      :isChart="isChart"
      :chartOptions="chartOptions"
      :picList="picList"
      v-model:visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    >
    </DialogPreView>
  </Layout>
</template>

<script setup>
import { ref } from 'vue'
import DialogPreView from '@/components/DialogPreView/DialogPreView.vue'

const dialogVisible = ref(false)
const isChart = ref(true)
const chartOptions = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
    },
  ],
})
const picList = ref([])

const handleClose = () => {
  console.log('对话框关闭')
}

const handleConfirm = () => {
  console.log('确认按钮被点击')
}
</script>

<el-button @click="dialogVisible1 = true" type='primary'>图片打开
<DialogPreView
title="对话框预览示例"
:isChart="false"
:chartOptions="chartOptions"
:picList="picList"
v-model="dialogVisible1"
@close="handleClose"
@confirm="handleConfirm">

<template>
  <Layout>
    <DialogPreView
      title="对话框预览示例"
      :isChart="isChart"
      :chartOptions="chartOptions"
      :picList="picList"
      v-model:visible="dialogVisible"
      @close="handleClose"
      @confirm="handleConfirm"
    >
    </DialogPreView>
  </Layout>
</template>

<script setup>
import { ref } from 'vue'
import DialogPreView from '@/components/DialogPreView/DialogPreView.vue'

const dialogVisible = ref(false)
const isChart = ref(true)
const chartOptions = ref({})
const picList = ref([
  'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280',
])

const handleClose = () => {
  console.log('对话框关闭')
}

const handleConfirm = () => {
  console.log('确认按钮被点击')
}
</script>

属性

属性名	类型	默认值	必填	描述
title	String	'预览'	否	对话框标题
isChart	Boolean	false	否	是否为图表预览
chartOptions	Object	{}	否	图表配置项
picList	Array<string>	[]	否	图片列表

事件

事件名	参数	描述
update:modelValue	Boolean	当对话框的显示状态发生改变时触发