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);