小鹅通组件

# dialog 对话框

b端在保存当前页面状态的情况下，弹出提示对话框，主要用于消息提示，展示内容，和提交内容

# 初始化

单独引入时：从入口的js文件引入

import {SsDialog, Button} from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(SsDialog)
Vue.use(Button)
1
2
3
4

# 效果

# 基本弹框


点击点开对话框 这是一段信息这是一段信息 
<ss-dialog
    title="提示"
    width="480px"
    :visible.sync="dialogVisible"
    @submit="dialogVisible = false"
    @cancel="dialogVisible = false"
    :submit-btn-loading="submitBtnLoading"
>
    <span slot="content">这是一段信息这是一段信息</span>
    <span slot="footer"></span>
</ss-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 内容超出的dialog


点击内容超出的对话框
这里是内容
 
<ss-dialog
    title="内容超出的Dialog"
    :visible.sync="dialogVisible1"
    @submit="dialogVisible1 = false"
    @cancel="dialogVisible1 = false"
    width="600px"
    messageTip="辅助提示信息辅助提示信息辅助提示信息辅助提示信息辅助提示信息辅助提示信息"
>
    <div slot="content" class="content">这里是内容</div>
    <span slot="footer"></span>
</ss-dialog>
1
2
3
4
5
6
7
8
9
10
11

# 带有侧边栏的dialog


点击带有侧边栏的对话框
这里是左边的内容
这里是右边的内容
 
<ss-dialog
    title="标题"
    :visible.sync="dialogVisible2"
    tabbar
    @submit="dialogVisible2 = false"
    @cancel="dialogVisible2 = false"
    :customFooter="true"
>
    <div slot="contentSide">这里是左边的内容</div>
    <div slot="content" class="tag-content">这里是右边的内容</div>
    <span slot="footer"></span>
</ss-dialog>
1
2
3
4
5
6
7
8
9
10
11
12

# 参数

参数 说明 类型 默认值 可选值
visible 是否显示 Dialog，支持 .sync 修饰符 boolean false —
title 标题 String — —
width 宽度 String 50% —
contentSide 是否展示左边栏 boolean false —
messagetip 左下角提示信息 String — —
modal 是否需要遮罩层 boolean true —
show-close 是否显示关闭按钮 boolean true —
center 居中布局 boolean false —

# 事件

事件名称 说明 回调参数
submit 确定回调 —
cancel 取消回调 —

← rate 评分 →