该组件用于显示预览内容,支持在对话框中展示指定 URL 的内容,并提供关闭功能。
<el-button type='primary' @click="showDialog = true">弹窗
<template>
<PreviewDialog v-model="showDialog" url="https://www.shengyc.com/" />
</template>
<script setup>
import PreviewDialog from '@/components/PreviewDialog/index.vue'
import { ref } from 'vue'
const showDialog = ref(false)
</script>
在该示例中,PreviewDialog
组件被使用,并传递了 modelValue
控制对话框的显示状态,以及 url
属性指定预览内容的 URL。
属性名 | 类型 | 默认值 | 必填 | 描述 |
---|
| modelValue | Boolean | - | 是 | 控制对话框显示 |
| url | String | 'http://www.baidu.com' | 否 | 预览内容的 URL |
| append-to-body | Boolean | true | 否 | 是否将对话框插入到 body 元素内 |
| width | Number | 1200 | 否 | 对话框宽度 |
| show-close | Boolean | true | 否 | 是否显示关闭按钮 |
事件名 | 参数 | 描述 |
---|---|---|
update:modelValue | Boolean | 更新对话框显示状态 |
| close | - | 关闭对话框时触发 |