vue+elementUi+dialog封装自定dialog部分属性，并打包成插件npm install mj-dialog --savedisplayjustifybetween

Posted 2022-06-09 web半晨

目录

• 1、下载插件
• 2、注册组件
• 3、使用插件

---

1、下载插件

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

npm install mj-dialog --save  

---

2、注册组件

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

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

---

3、使用插件

html

<mj-dialog ref="refDialog">
    <div class="mj_dialog_box">
        <div class="mj_dialog_head">
            <span>测试标题</span>
            <span @click="clickClose">×</span>
        </div>

        <div class="mj_dialog_content">内容部分...</div>
    </div>
</mj-dialog>

---

javascript

export default 
    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

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

.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;