vue-vuecmf-dialog弹窗组件是基于vue3、Element Plus和TypeScript构建,支持最大化、最小化、还原及弹窗主体内容自适应屏幕功能。
显示效果:
安装
yarn add vue-vuecmf-dialog
使用
导入组件
然后在项目的main.ts 引入,如下
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
/*导入组件*/
import VuecmfDialog from "vue-vuecmf-dialog"
createApp(App).use(VuecmfDialog).mount('#app')
模板中使用
<template>
<h3>vue-vuecmf-dialog demo</h3>
<el-button
size="default"
type="primary"
@click=" showDlg = true " >打开对话框</el-button>
<vuecmf-dialog
:model_value="showDlg"
title="标题"
@updateVisible="updateVisible"
@close="close"
@toggleScreen="toggleScreen">
<template #content>
<div> 这是一个可以最大化、最小化及还原的 对话框</div>
</template>
<template #footer>
<el-button type="primary" @click=" showDlg = false ">关闭</el-button>
</template>
</vuecmf-dialog>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
export default defineComponent({
name: 'App',
setup(){
const showDlg = ref()
showDlg.value = false
const updateVisible = (val:any) => {
console.log('val=', val)
showDlg.value = val
}
const close = ():void => {
console.log('dialog closed!')
}
const toggleScreen = (is_max: boolean):void => {
console.log('dialog is max:', is_max)
}
return {
showDlg,
updateVisible,
close,
toggleScreen
}
}
});
</script>