vue+elementUi+dialog封装自定dialog部分属性，并打包成插件、npm install mj-dialog --save、display、justify、between

1、下载插件

npm install mj-dialog --save

在vue目录结构中与src同级使用此命令下载插件即可。

2、注册组件

// 引入组件结构 import mjDialog from "mj-dialog"; // 引入组件样式 import "mj-dialog/mj-dialog.css"; // 注册组件到全局 Vue.use(mjDialog); 

在main.js文件中注册组件即可，目前暂不提供局部注册方式，只支持全局注册。

3、使用插件

html

<mj-dialog ref="refDialog"> <div class="mj_dialog_box"> <div class="mj_dialog_head"> <span>测试标题 name: "packageMjDialog", data() { return {}; }, methods: { // 关闭面板 clickClose() { this.$refs.refDialog.close(); }, // 打开面板 openPanels() { this.$refs.refDialog.openPanel({ // 自定宽 width: 240, // 自定高 height: 240, // 设置左边距 left: -360, // 设置上边距 top: 360, // 设置圆角 borderRadius: 7, }); }, }, }; 

css

.mj_dialog_box { padding: 14px; } .mj_dialog_head { display: flex; justify-content: space-between; align-items: center; } .mj_dialog_head > span:last-child { font-size: 24px; font-weight: 600; color: #ff0000; cursor: pointer; } .mj_dialog_content { margin-top: 10px; } 

注意：css标签需要设置lang="less"和scoped属性，否则报错。