1.0.6 • Published 2 years ago
soinmyui v1.0.6
my-ui
介绍
做一些简单的移动端的ui组件
软件架构
依赖于vue做的一一些移动组件
安装教程
- npm i soinmyui
使用说明
- 在main.js里引入css样式 import 'soinmyui/theme-chalk/index.css';
- 在main.js里引入组件库import myui from 'soinmyui';
- Vue.use(myui)
- 就可以随便在组件里使用了
组件列表
组件名：button--按钮
Props
| 属性名 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
type | 按钮样式 | string | default | primary/info/warn/danger/default |
组件名：drawer--抽屉
Props
| 属性名 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
open | 打开drawer参数 | boolean | false | true |
align | drawer出现的位置 | string | bottom | top/right/bottom/left |
size | drawer框大小 | string | 30% | - |
showClose | 关闭按钮的显隐 | boolean | true | false |
isDestroyDom | 是否卸载drawer内部的dom | boolean | false | true |
isMaskBg | 是否去掉drawer遮罩 | boolean | false | true |
Events
| 属性名 | 描述 | 回调参数 |
|---|---|---|
close | 关闭事件 | callback |
Slots
| 属性名 | 描述 |
|---|---|
- | 自定义drawer内容 |
组件名：search--搜索框
Props
| 属性名 | 描述 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
type | 和原生input类型保持一致 | string | - | - |
placeholder | 和原生placeholder一致 | string | - | - |
shape | 搜索框的圆角和直角 | string | square | square（直角）|round（圆角） |
value / v-model | 绑定值 | string / number | - | - |
showAction | 是否显示右侧按钮 | boolean | false | true |
actionText | 右侧按钮名称 | string | 取消 | - |
Events
| 属性名 | 描述 | 回调参数 |
|---|---|---|
blur | 失焦事件 | {event: Event} |
focus | 聚焦事件 | {event: Event} |
search | 搜索事件 | value:string/number |
cancel | 取消事件 | - |
Slots
| 属性名 | 描述 |
|---|---|
label | 左侧内容 （搜索框外部） |
left-icon | 左侧图标（搜索框内） |
right-icon | 右侧图标（搜索框内） |
action | 右侧内容（搜索框外部） |
组件名：icon--字体图标
Props—name
| 可选值 | 描述 |
|---|---|
arrow-up | |
arrow-right | |
arrow-down | |
arrow-left | |
double-arrow-left | |
double-arrow-right | |
cross | |
add | |
sub | |
navigate-w | |
orders-w | |
upload-w | |
dowload-w | |
around-exchange-w | |
star-w | |
search-w | |
fold-w | |
refresh-w | |
edit-w | |
map-w | |
home-w | |
close-w | |
success-w | |
info-w | |
warn-w | |
question-w | |
sub-w | |
add-w | |
statistical-w | |
setting-w | |
del-w | |
location-w | |
time-w | |
copy-w | |
boult-up-w | |
boult-down-w | |
zoom-in-w | |
zoom-out-w | |
loading-w | |
stop-w | |
img-circle-w | |
img-round-w | |
file-w |