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>测试标题</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

.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属性，否则报错。

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

vue 如何开发封装自己的公共组件库，并发布到 npm 上
一.全局安装 vue-cli 脚手架,使用 vue init webpack-simple yyl-npm-practice 初始化项目初始化项目后 npm install ; npm run de ...
Vue中怎样封装与使用公共状态属性组件实现类似枚举类的效果
场景如果一个状态量在多个地方用到,或者一个业务用到多个状态量. 可以使用类似枚举类代替直接使用明文表示. 这样如果需要修改状态量的值就不用再每个地方都要修改. Vue中要实现同样的效果,比如自定义一 ...
【5分钟搞定】如何将py打包成exe可执行文件
简介 python代码运行肯定是需要python环境还有一些外在依赖包的. pyinstaller将Python脚本打包成可执行程序,使在没有Python环境的机器上运行. 安装 # 建议先配置pip ...
Handsontable VUE+element-ui +handsontable 实现Excel复制文本到项目表格列表（基于Elemenet+handsontable）
@VUE封装handsontable(仿写Element样式)-重点查看使用方法 #Handsontable VUE+element-ui 实现Excel复制文本到项目表格列表(基于Elemenet) ...
vue+elementUI实现前端分页
vue+elementUI实现前端分页前言代码前言大多数情况下都是后端做分页的,前端只需要传递 currentpage / pagesize 即可,当然也有可能遇到后端没有做分页的情况,这时前 ...
vue elementui 切换语言
1.安装插件:npm install vue-i18n --save 2.src下新建i18n文件夹, i18n文件夹下创建langs文件夹和i18n.js文件 langs文件夹下创建cn.js; ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
vue elementUI弹窗使用destroy-on-close后，关闭弹窗会重新发送请求
vue elementUI的el-dialog弹窗组件使用destroy-on-close属性后,关闭弹窗会重新发送请求. 所以改变了方式,没有用这个属性,直接用v-if来销毁的. <el-di ...
Vue+element-ui实现表格数据渲染+分页
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档:Table 表格这里给大家看一个比较不错的表格数据渲染的例子,也是我目前所写的项目中的一部分. 这里呢我们就不给大家说顶栏和 ...

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

目录

1、下载插件

2、注册组件

3、使用插件

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

最新文章

热门文章