A ui-components webpack for weex.
npm install gts-weex-components --save
已有组件:
button/button-group/button-icon/button-plain/cell-item/cells-item/col/form-item/icon/input/line/list/menu/picker/row/search/select/slider/switch/tab/tabbar/textarea/textarea-withcount/upload
使用方法:按需引入 require('weex-ui-components/组件名称')
Each component attributes as follows:
按钮组件,以下分别是基本按钮、朴素按钮、图标按钮的属性说明:
参数 |
说明 |
类型 |
可选值 |
默认值 |
size |
尺寸 |
string |
large,small |
— |
type |
类型 |
string |
primary,secondary,warning,text |
— |
disabled |
是否禁用状态 |
boolean |
— |
false |
参数 |
说明 |
类型 |
可选值 |
默认值 |
size |
尺寸 |
string |
large,small |
— |
type |
类型 |
string |
primary,secondary,warning |
— |
disabled |
是否禁用状态 |
boolean |
— |
false |
参数 |
说明 |
类型 |
可选值 |
默认值 |
size |
尺寸 |
string |
large,small |
— |
type |
类型 |
string |
primary,secondary,warning,text |
— |
disabled |
是否禁用状态 |
boolean |
— |
false |
icon |
图标,已有的图标库中的图标名 |
string |
Icon List |
— |
类似于form的列表视图,用于将信息以列表的结构显示在页面上,属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
access |
是否有图标 |
boolean |
— |
false |
last |
是否为最后一列 |
boolean |
— |
false |
cellIcon |
图标 |
string |
— |
— |
title |
标题文字 |
string |
— |
— |
desc |
说明文字 |
string |
— |
— |
列表视图集合,属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
title |
列表标题 |
string |
— |
— |
栅格布局组件,属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
span |
栅格占据的列数 |
number |
— |
- |
由输入框、选择器、单选框、多选框等控件组成,用以收集、校验和提交数据。属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
inline |
是否在同一行 |
boolean |
— |
true |
align |
排列方式 |
string |
— |
left |
label |
标签 |
string |
— |
— |
width |
用于计算标签宽度 |
number |
— |
— |
last |
是否为最后一列 |
boolean |
— |
false |
参数 |
说明 |
类型 |
可选值 |
默认值 |
index |
图片标志 |
string |
— |
— |
galleryImgSrc |
图片路径 |
string |
— |
— |
图标更新步骤:
1.登录http://www.iconfont.cn/plus
2.找到想添加的图标添加至项目vue-com
3.更新Unicode的在线链接
4.将icon.vue文件中的url('//at.alicdn.com/t/***.ttf')替换掉
5.在icon.data.js中添加图标的名称和对应的code,搞定!
参数 |
说明 |
类型 |
可选值 |
默认值 |
name |
图标名称 |
string |
— |
— |
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
类型 |
string |
text/password/url/email/tel |
text |
value |
绑定值 |
string, number |
— |
— |
maxlength |
最大输入长度 |
number |
— |
— |
placeholder |
输入框占位文本 |
string |
— |
— |
disabled |
禁用 |
boolean |
— |
false |
autofocus |
原生属性,自动获取焦点 |
boolean |
true, false |
false |
事件名称 |
说明 |
回调参数 |
blur |
在 Input 失去焦点时触发 |
(event: Event) |
focus |
在 Input 获得焦点时触发 |
(event: Event) |
change |
在 Input 值改变时触发 |
(value: string | number) |
宽度为1的白色分隔线
分为纯文字无序列列表、图文混排列表、有序列表、节点列表。属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
hasseq |
是否有序列 |
boolean |
— |
false |
hasnode |
是否有节点 |
boolean |
— |
false |
imgSrc |
图片路径 |
string |
— |
— |
itemTitle |
列表名称 |
string |
- |
- |
itemContent |
列表内容 |
string |
- |
- |
inline |
名称时间状态是否在一行上 |
boolean |
- |
- |
itemName |
名字 |
string |
- |
- |
nameColor |
名字颜色 |
string |
- |
- |
itemSize |
名字字体大小 |
number |
- |
- |
itemTime |
时间 |
string |
- |
- |
timeColor |
时间颜色 |
string |
- |
- |
timeSize |
时间字体大小 |
number |
- |
- |
itemStatus |
状态 |
string |
- |
- |
starusColor |
状态颜色 |
string |
- |
- |
starusSize |
状态字体大小 |
number |
- |
- |
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
picker 的类型 |
string |
date,time |
date |
placeholder |
占位文本 |
string |
— |
请选择 |
value |
绑定值 |
string |
date 类型时格式为 yyyy-mm-dd ; time 类型时格式为 hh:mm
|
— |
事件名称 |
说明 |
回调参数 |
select |
点击data选择器触发的事件 |
选中的data值 |
参数 |
说明 |
类型 |
可选值 |
默认值 |
gutter |
栅格间隔 |
number |
— |
0 |
justify |
flex 布局下的水平排列方式 |
string |
start/end/center/space-around/space-between |
start |
align |
flex 布局下的垂直排列方式 |
string |
top/middle/bottom |
top |
搜索框组件
参数 |
说明 |
类型 |
可选值 |
默认值 |
selectStyle |
选中样式 |
string |
borderStyle/iconStyle |
- |
selectOne |
是否为单选 |
boolean |
— |
true |
radioList |
选项数组 |
array |
— |
— |
isRow |
选项是否排列在一行 |
boolean |
— |
true |
isRadio |
选项是否为圆形 |
boolean |
— |
true |
maxLimit |
最多选中个数 |
number |
- |
- |
radioList.index |
选项标志 |
string |
— |
— |
radioList.checked |
是否选中 |
boolean |
— |
false |
radioList.value |
选项对应的值 |
string |
— |
— |
radioList.label |
选项标签 |
string |
— |
— |
事件名称 |
说明 |
回调参数 |
select |
点击select触发的事件 |
index,value |
参数 |
说明 |
类型 |
可选值 |
默认值 |
interval |
切换时间(ms) |
number |
- |
- |
autoPlay |
是否自动播放 |
boolean |
— |
true |
imageList |
图片列表 |
array |
— |
— |
indicatorColor |
导航颜色 |
string |
— |
- |
indicatorLeft |
导航距左侧距离 |
number |
— |
- |
参数 |
说明 |
类型 |
可选值 |
默认值 |
checked |
是否选中 |
boolean |
— |
false |
disabled |
是否禁用 |
boolean |
— |
false |
事件名称 |
说明 |
回调参数 |
change |
switch 状态发生变化时的回调函数 |
新状态的值 |
由横向和垂直tab组成, 属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
inline |
是否在同一行 |
boolean |
— |
true |
tabWidth |
纵向tab的宽度设置 |
number |
— |
- |
selectedColor |
选中颜色 |
string |
- |
- |
tabList |
标签内容 |
array |
— |
- |
底部导航栏, 属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
tabitem |
tab参数 |
array |
— |
— |
tabitem[].title |
tab名称 |
string |
— |
— |
tabitem[].icon |
icon名称 |
string |
— |
— |
tabitem[].visibility |
tab是否被选择 |
boolean |
— |
— |
itemstyle |
样式参数 |
object |
— |
— |
itemstyle.titleColor |
名称颜色 |
string |
— |
— |
itemstyle.selectedTitleColor |
被选中后名称颜色 |
string |
— |
— |
itemstyle.iconColor |
图标颜色 |
string |
— |
— |
itemstyle.selectedIconColor |
被选中后图标颜色 |
string |
— |
— |
参数 |
说明 |
类型 |
可选值 |
默认值 |
value |
绑定值 |
string, number |
— |
— |
maxlength |
最大输入长度 |
number |
— |
— |
placeholder |
输入框占位文本 |
string |
— |
— |
disabled |
禁用 |
boolean |
— |
false |
rows |
输入框行数 |
number |
— |
2 |
autofocus |
原生属性,自动获取焦点 |
boolean |
true, false |
false |
事件名称 |
说明 |
回调参数 |
blur |
在 Textarea 失去焦点时触发 |
(event: Event) |
focus |
在 Textarea 获得焦点时触发 |
(event: Event) |
change |
在 Textarea 值改变时触发 |
(value: string | number) |
通过点击上传图片,属性说明如下:
参数 |
说明 |
类型 |
可选值 |
默认值 |
index |
图片标志 |
string |
— |
— |
title |
上传标题 |
string |
— |
— |
limit |
是否有数量上限 |
boolean |
— |
false |
uploadLimit |
上传数量上限 |
number |
— |
9 |
desc |
上传解释详情 |
string |
— |
9 |
uploadList |
照片路径列表 |
array |
— |
- |
enabled |
是否还能再上传 |
boolean |
— |
true |