支持最大化、最小化、还原及弹窗主体内容自适应的vue-vuecmf-dialog弹窗组件

最新推荐文章于 2024-06-28 10:08:48 发布

emei8

最新推荐文章于 2024-06-28 10:08:48 发布

阅读量1.9k

点赞数 1

分类专栏： vue3组件文章标签： vue typescript

本文链接：https://blog.csdn.net/emei8/article/details/124286521

版权

vue3组件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue-vuecmf-dialog弹窗组件是基于vue3、Element Plus和TypeScript构建，支持最大化、最小化、还原及弹窗主体内容自适应屏幕功能。

显示效果：

详细使用文档：组件 | VueCMF基于vue3、element plus、typescript开发的vuecmf相关组件：vue-vuecmf-dialog弹窗组件、vue-vuecmf-editor富文本编辑器、vue3-vuecmf-table多功能列表组件。http://www.vuecmf.com/components/#vue-vuecmf-dialog

安装

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>