lm-ui-element 快速上手——安装使用
使用时请确保引入了element-ui 的 ElButton 组件
基础用法
<template>
<div class="exampleBox">
<el-button type="primary" @click="showDialog=true">打开弹窗</el-button>
<lm-dialog v-if="showDialog" @cancel="showDialog=false" @close="showDialog=false" @sure="sure">
<span>弹窗内容</span>
</lm-dialog>
</div>
</template>
<script>
export default {
data() {
return {
showDialog:false,//是否显示弹窗
}
},
methods: {
sure(){
this.showDialog=false
},
},
}
</script>
Attributes
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| title |
标题 |
String |
-- |
-- |
| width |
宽度 |
String / Number |
-- |
400 |
| background |
背景色 |
String / Number |
-- |
40 |
| titleHeight |
标题栏高度 |
String |
-- |
-- |
| titleBk |
标题背景色 |
String |
-- |
-- |
| titleTextColor |
标题文字颜色 |
String |
-- |
-- |
| bottomPadding |
底部内边距 |
String / Number |
-- |
30 |
| contentMarginBottom |
内容底部外边距 |
String / Number |
-- |
30 |
| contentPadding |
内容区域内边距 |
String / Number |
-- |
'30px 20px 10px 20px' |
| showFooter |
是否显示底部 |
Boolean |
-- |
true |
| saveText |
保存按钮文字 |
String |
-- |
-- |
| backText |
返回按钮文字 |
String |
-- |
-- |
| btnWidth |
按钮宽度 |
String |
-- |
100px |
| btnHeight |
按钮高度 |
String |
-- |
40px |
| showLoading |
是否显示保存按钮的加载状态 |
Boolean |
-- |
-- |
| contentBoxStyle |
内容框样式 |
Object |
-- |
-- |
Slots
Events
| 事件名 |
说明 |
回调参数 |
| close |
关闭弹窗 |
-- |
| sure |
点击确定 |
-- |
| cancel |
点击取消 |
-- |
网友评论