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