M i n s u i
引入
直接引入minsui.js并初始化即可，相关样式和资源会自动加载。如下：

1

2

3

4

5

6

<script src="http://www.minsth.com/minsui/minsui.js"></script>
<script>
    minsui.init({
        iconfont: '', // iconfont 图标样式文件地址
    });
</script>
在执行minsui.init()时，
按钮

1

2

3

4

5

<button type="default">默认按钮</button>
<button type="primary">主要按钮</button>
<button type="success">成功按钮</button>
<button type="warning">警告按钮</button>
<button type="danger">危险按钮</button>

1

2

3

4

5

<button type="default" plain>辅助按钮</button>
<button type="primary" plain>辅助按钮</button>
<button type="success" plain>辅助按钮</button>
<button type="warning" plain>辅助按钮</button>
<button type="danger" plain>辅助按钮</button>

1

2

3

4

5

<button type="default" disabled>已禁用</button>
<button type="primary" disabled>已禁用</button>
<button type="success" disabled>已禁用</button>
<button type="warning" disabled>已禁用</button>
<button type="danger" disabled>已禁用</button>

1

2

3

4

5

<button type="default" small>小按钮</button>
<button type="primary" small>小按钮</button>
<button type="success" small>小按钮</button>
<button type="warning" small>小按钮</button>
<button type="danger" small>小按钮</button>

1

2

3

4

5

<button type="default" icon="minsui-bianji">带图标</button>
<button type="primary" icon="minsui-tianjia1">带图标</button>
<button type="success" icon="minsui-chenggong">带图标</button>
<button type="warning" icon="minsui-warning">带图标</button>
<button type="danger" icon="minsui-cuowuguanbiquxiao">带图标</button>

1

2

3

4

5

<button type="default" text>文字按钮</button>
<button type="primary" text>文字按钮</button>
<button type="success" text>文字按钮</button>
<button type="warning" text>文字按钮</button>
<button type="danger" text>文字按钮</button>
按钮组

1

2

3

4

5

6

<button-group type="primary">
    <button>成功按钮</button>
    <button>成功按钮</button>
    <button>成功按钮</button>
    <button>成功按钮</button>
</button-group>
提示：按钮组中所有的按钮保持统一风格，为按钮组添加属性时，会覆盖到当前组内所有的按钮中，如：small type 等
输入框

1

2

<input type="text" placeholder="请输入内容">
<textarea placeholder="请输入内容"></textarea>
单选框
华晨宝马 北京奔驰 一汽奥迪

1

2

3

4

5

<radio-group name="car">
    <radio-item value="1" checked>华晨宝马</radio-item>
    <radio-item value="2">北京奔驰</radio-item>
    <radio-item value="3">一汽奥迪</radio-item>
</radio-group>

1

2

3

4

5

// 获取当前选中的值
minsui.radio.get('car'); // 1
 
// 设置指定值被选中
minsui.radio.set('car', '2'); // car = name， 2 = value

提示：

每个radio-group必须指定一个唯一的属性：name

使用checked属性指定默认选中的项，但每个radio-group中最多只能有一个

多选框
华晨宝马 北京奔驰 一汽奥迪

1

2

3

4

5

<checkor-group name="car">
    <checkor-item value="1" checked>华晨宝马</checkor-item>
    <checkor-item value="2" checked>北京奔驰</checkor-item>
    <checkor-item value="3">一汽奥迪</checkor-item>
</checkor-group>

1

2

3

4

5

// 获取当前选中的值
minsui.checkor.get('car'); // ['1', '2']，返回一个字符串组成的数组
// 设置指定值被选中
minsui.checkor.set('car', ['1', '2']); // car = name， 参数2：传入一个数组，匹配的 value 会被选中

提示：

每个checkor-group必须指定一个唯一的属性：name

使用checked属性指定默认选中的项

下拉框
华晨宝马 北京北京奔驰北京奔驰北京奔驰奔驰 一汽奥迪

1

2

3

4

5

<selector-group label="请选择品牌" name="car">
    <selector-item value="1">华晨宝马</selector-item>
    <selector-item value="2">北京北京奔驰北京奔驰北京奔驰奔驰</selector-item>
    <selector-item value="3">一汽奥迪</selector-item>
</selector-group>

1

2

3

4

5

// 获取当前选中的值
minsui.selector.get('car'); // 无选中项时返回空字符串，有选中项时反馈选中的 value
 
// 设置指定值被选中
minsui.selector.set('car', 1); // car = name， 参数2：传入一个字符串，匹配的 value 会被选中
提示：每个selector-group必须指定一个唯一的属性：name
开关

1

<switch-button name="sale" on ontext="在售" offtext="已下架"></switch-button>

1

2

3

4

5

// 获取当前选中的值
minsui.switchor.get('sale'); // 反回当前开关的状态：true 或 false
// 设置指定值被选中
minsui.switchor.set('sale', true); // car = name， 参数2：传入布尔或可隐式转换为布尔的参数，指定状态

提示：

每个switch-button必须指定一个唯一的属性：name

使用on / off指定初始状态

日期选择器

1

<time-selector name="birthday" default="2021-01-01" label="请选择日期" format="yyyy-mm-dd hh:ii:ss"></time-selector>

1

2

3

4

5

6

7

8

9

10

11

// 获取当前选中的值
minsui.timer.get('birthday'); // 返回当前选中的日期，格式为：{ year: '', month: '', date: '', week: '' }
 
// 除此之外，minsui.timer 内置了几个常用的日期方法：
minsui.timer.today(); // 返回当天的日期
minsui.timer.getCountOfMonth(); // 获取当前月份有多少天
minsui.timer.getDayOfDate(); // 获取当天是星期几
minsui.timer.getDayOfFirstDate(); // 获取当月第一天是星期几
minsui.timer.getDayOfLastDate(); // 获取当月最后一天是星期几
minsui.timer.timeRepair(); // 在数字小于9的前面补0
// 上面几个内置方法，需要传入指定的日期字符串，如：2021-01-01， 2021-01

提示：

每个time-selector必须指定一个唯一的属性：name

使用default指定默认选中的日期

使用format指定输出格式 已弃用的属性

表格

1

2

3

4

5

6

7

8

9

<table-list name="users">
    <table-item title="姓名" prop="name" /></table-item>
    <table-item title="年龄" prop="age" /></table-item>
    <table-item title="性别" prop="sex" /></table-item>
    <table-item title="操作" button width="200px">
        <button action="del" small type="danger" text>删除</button>
        <button action="edit" small type="primary" text>编辑</button>
    </table-item>
</table-list>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 使用 minsui.table.init 方法初始化表格
let data = [ // 渲染的数据列表
    { // key 对应模板中的 prop
        name: '徐向博',
        sex: 1,
        age: 26
    }
]
let actions = { // 表格操作事件，对应 button 的 action 属性
    del (data){ // data 返回当前行的数据
        console.log(data)
    },
    edit (data){
 
    }
}
minsui.table.init('users', data, actions);
分页

1

<page-list name="pageList"></page-list>

1

2

3

4

5

6

7

8

9

// 使用 minsui.pageList.init 方法初始化分页器
minsui.pageList.init('pageList', {
    total: 102, // 总记录数
    size: 20, // 每页数量
    current: 3, // 指定当前页数
    action (page){ // 点击事件，page 返回点击时需要跳转的页码
        console.log(page)
    }
})
表单
北京 上海 广州 深圳 杭州 苏州 男生 女生 音乐 游戏 钓鱼
00

1

2

3

4

5

6

// 使用 minsui.form.init 方法初始化表单
minsui.form.init('userinfo', {
    submit (data){ // 提交事件，data 返回表单中所有的数据，组件项返回组件的默认数据格式，自定义内容项返回 html
        console.log(data)
    }
})
提示

1

2

3

4

5

minsui.tips.show('这是一条轻提示！');
minsui.tips.plain('这是一条普通提示！');
minsui.tips.success('这是一条成功提示！');
minsui.tips.warning('这是一条成功提示！');
minsui.tips.error('这是一条成功提示！');

1

2

// minsui.tips 配置
minsui.tips.delay = 3000 // 延迟关闭时间，默认 3000ms
弹窗

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

// 普通弹窗
minsui.alert('这是一个弹窗！').then(action => {
    console.log(1)
})
 
// 带取消按钮的弹窗
minsui.alert('这是一个带取消按钮的弹窗！', {
    showCancel: true
}).then(action => {
    console.log(1)
}).catch(action => {
    console.log(0)
})
 
// 带输入框的弹窗
minsui.alert('这是一个带输入框的弹窗！', {
    autoClose: false,
    showCancel: true,
    input: true
}).then(action => {
    console.log(1)
    action.loading();
    setTimeout(function(){
        action.close();
    }, 2000)
    minsui.tips.show('你提交的信息是: ' + action.input);
}).catch(action => {
    console.log(2)
})
 
// then(action)
// minsui.alert 返回一个promise对象，其中then回调里的参数 action 如下：
{
    loading (){}, // 使当前弹窗进入loading状态
    close (){} // 手动关闭当前弹窗
}

1

2

3

4

5

6

7

8

9

// 弹窗接受两个参数：msg: 提示的消息，  config: 弹窗配置[可选]
// config配置如下：
config.showCancel：是否显示取消按钮，默认为 false;
config.confirmClose：是否在点击确定按钮时关闭弹窗，默认为 true;
 
config.input：是否带输入框，默认为 false;
config.cancelText：取消按钮的文字，默认为 '取消';
config.confirmText：确定按钮的文字，默认为 '确定';
config.title：弹窗显示的标题，默认为 '提示';
config.buttonType：按钮类型，默认为 'primary';
加载中

1

2

[dom].loading(); // 进入loading状态
[dom].unloading(); // 取消loading状态
提示：给 body 加 loading 时，默认为全局加载。给某个 div 加 loading 时，会把当前 div 区域置为 loaidng
其他
除了以上的常用组件库，minsui 还提供了一些常用的方法。如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

// 获取元素真实样式，参数：style=需要获取的样式名
HTMLElement.css(style);
 
// 显示/隐藏元素 缩放 + 渐变，参数：withAnimate=是否需要动画效果，默认为 true
HTMLElement.show(withAnimate);
HTMLElement.hide(withAnimate);
 
// 显示/隐藏元素 渐变，参数：withAnimate=是否需要动画效果，默认为 true
HTMLElement.fadeIn(withAnimate);
HTMLElement.fadeOut(withAnimate);
 
// HTMLElement 演示
document.querySelector('div').show();
document.querySelector('div').hide();
 
// 判断字符串是否是合法的身份证号，返回布尔值
String.isIdcard();
// 判断字符串是否是合法的手机号，返回布尔值
String.isPhone();
 
// 判断字符串是否是合法的邮箱地址，返回布尔值
String.isMail();
 
// 字符串转为unicode
String.encodeUnicode();
 
// unicode转字符串
String.decodeUnicode();
 
// String 演示
'123456'.isPhone(); // false
'123456@mail.com'.isMail(); // true
 
// 获取设备类型，返回值：101=android，102=iphone，103=ipad，201=PC, 202=IE，203=apple mac
minsui.device();
 
// 获取客户端系统，返回值：5=win xp，7=win 7，8=win 8，81=win 8.1, 10=win 10，100=apple mac，200=linux，300=unknown
minsui.system();
 
// 获取地址栏参数，参数：param=需要获取的参数名，无匹配时返回 null
minsui.getUrlParam(param);
 
// 发送 GET 请求，返回一个 promise 对象，参数：请求地址
minsui.ajax.get(url);
 
// 发送 POST 请求，返回一个 promise 对象，参数： url=请求地址，data=请求体（参数或数据流），isFormData=是否以 formData 方式发送数据，默认为 true
minsui.ajax.post(url, data, isFormData);