封装element Dialog实现全屏、最小、双击回复原状和拖拽功能

一、效果图

正常

2020-04-29_160148.png

全屏

2020-04-29_162312.png

最小

2020-04-29_162427.png

1.1 下载阿里图标

下载阿里图标https://www.iconfont.cn/,然后解压，在src/assets下建一个iconfont文件夹，将解压的文件复制到iconfont下

1.2 配置访问阿里图标

1)在vue.config.js中配置解析规则

    config.module
      .rule('iconfont')
      .test(/\.(png|jpg|gif)$/)
      .include.add(resolve('src/assets/iconfont'))
      .end()
      .use('url-loader')
      .loader('url-loader')
      .options({
      })
      .end()

2)在main.js中配置css

import '@/assets/iconfont/iconfont.css' // permission control

1.3 iconfont使用

1.4 封装Dialog为ZDialog

1.5 组件调用

传入的参数title,show,zDialogRef,isFooter(默认可省略，省略则不显示footer)

       

        对话框body
       
       

        对话框footer
       
       

import ZDialog from '@/components/ZDialog'
export default {        
  components: {
      ZDialog
  },
  data() {
     return {
       title:'提示',
       dialogVisible: false,
     }
  }
  }
}