小鹅通组件

# Modal 弹框

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容

# 初始化

单独引入时：在入口js文件处引入

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

# 效果

# 添加确认按钮回调--打开控制台查看


按钮回调 
<ss-modal
    iconType="primary"
    title="提示"
    content="确认回调"
    :visible.sync="isShow1"
    @confirms="cb"
    :btnText = "{confirm: '确定'}"
>
</ss-modal>
1
2
3
4
5
6
7
8
9

# 自定义校验方法--打开控制台查看


自定义校验方法 
<ss-modal
    iconType="warning"
    title="提示--打开控制台"
    content="校验参数类型为function，根据实际业务需求，返回值必须设为true/false。"
    :visible.sync="isShow4"
    :validation="test"
    @confirms="cb"
    @cancel="() => {}"
    :btnText = "{confirm: '确定', cancel: '返回'}"
>
<input type="text" v-model="inputs" placeholder="此处应该输入123">
</ss-modal>

methods: {
    test() {
      /* eslint-disable */
      if(this.inputs == '123') {
        return true;
      } else {
        return false;
      }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 插槽


插槽 
<ss-modal
    iconType="error"
    title="提示"
    content="插槽"
    :visible.sync="isShow3"
>
<input type="text">
</ss-modal>
1
2
3
4
5
6
7
8

# 参数

参数 说明 类型 默认值 可选值
iconType icon图案 String — success,primary,error,warning
title 标题 String — 任意
content 内容 String — 任意
btnText 确认/取消按钮文本定义 Object 可选 自定义
validation 校验规则 Funciton 可选 自定义 函数必须有返回值true/false

# 事件

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

← messageBox 确认框 →