龙马ui lm-ui-element

龙马ui lm-ui-element lm-dialog弹窗组件

2021-02-09  本文已影响0人  东扯葫芦西扯瓜

lm-ui-element 快速上手——安装使用

上一个组件:地址选择组件

使用时请确保引入了element-uiElButton 组件

基础用法

<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

name 说明
footer 底部内容

Events

事件名 说明 回调参数
close 关闭弹窗 --
sure 点击确定 --
cancel 点击取消 --

下一个组件:文件图片上传组件

上一篇 下一篇

猜你喜欢

热点阅读