简介
纯属个人开发的小的vue组件，比不上各种大UI库，当做一种学习。
使用
npm install wade-tools --S
Toast组件
import {Toast} from 'wade-ui'
Toast("想要弹窗的内容", 3000(时间，默认2000毫秒));
wScrollUp上拉加载更多
import {wScrollUp} from 'wade-ui'
<w-scroll-up @load-more="loadMore" :bottom-distance="10">
//内容
</w-scroll-up>
| Attribute | Type | Default | Description |
|---|---|---|---|
| load-more | function | -- | 上拉到底部触发的方法 |
| bottom-distance | number | -- | 距离底部多少就触发 |
此组件，没有提供加载时动画，所以可以根据自身设计在loadMore对应方法去控制加载时动画。
wScrollDown下拉刷新
import {wScrollDown} from 'wade-ui'
<w-scroll-down @refresh="refresh" @move-distance="moveDistance">
<div>
//内容
</div>
</w-scroll-down>
| Attribute | Type | Default | Description |
|---|---|---|---|
| refresh | function | -- | 刷新方法 |
| move-distance | function | -- | 返回移动的距离 |
wScroll上拉加载、下拉刷新
import {wScroll} from 'wade-ui'
<w-scroll
@refresh="refresh"
@load-more="loadMore"
@move-distance="moveDistance"
bottomDistance="20">
<div>
//内容
</div>
</w-scroll>
| Attribute | Type | Default | Description |
|---|---|---|---|
| load-more | function | -- | 上拉到底部触发的方法 |
| refresh | function | -- | 刷新触发方法 |
| move-distance | function | -- | 返回移动的距离 |
| bottom-distance | number | -- | 距离底部多少触发loadMore |
遮罩下禁止滚动
import {disableScroll} from 'wade-ui'
disableScroll(boolean)
使用了定位fixed，遮罩下的会回到顶部，为了隐藏遮罩的时候回到原来位置，使用了cookie，但是隐藏遮罩的时候清除了。
| Attribute | Type | Default | Description |
|---|---|---|---|
| boolean | boolean | false | true就是禁止滚动，false开启滚动 |
移动端左滑右滑
import {wMoveJudge} from 'wade-ui'
<move-judge @moveJudge="moveJudge"
@moveDistance="moveDistance"
margin="50">
//内容
</move-judge>
| Attribute | Type | Default | Description |
|---|---|---|---|
| moveJudge | function | -- | 返回left、right判断左右 |
| moveDistance | function | -- | 返回移动过程X移动的距离 |
| margin | number | 100 | 滑动最小距离触发moveJudge |
移动端picker组件
import {wPicker} from 'wade-ui'
<w-pick :dataList="list" @confirm="confirm"
@cancel="cancel" title="标题"></w-pick>
| Attribute | Type | Default | Description |
|---|---|---|---|
| dataList | Array | -- | 展示的数据数组 |
| cancel | function | -- | 取消回调 |
| confirm | function | -- | 返回选中index数组 |
| title | String | -- | 标题 |
dataList数据格式
example:
list:[['福建省', '浙江省'],['厦门市','杭州市']]
移动端pickerLink联动组件
import {wPickerLink, area} from 'wade-ui'
area是我们提供的省市区数据源，可以自行修改
<w-picker-link
:data="list"
@confirm="confirm"
@cancel="cancel"
title="标题"
column="3"
:defaultValue="defaultSelect">
</w-picker-link>
| Attribute | Type | Default | Description |
|---|---|---|---|
| data | Array | -- | 展示的数据数组 |
| cancel | function | -- | 取消回调 |
| confirm | function | -- | 返回选中数据的数组 |
| title | String | -- | 标题 |
| column | String | -- | 选择器列数,最多5列 |
| defaultValue | Array | -- | 默认选中的值 |
data和defaultValue数据格式
example:
defaultValue: ['福建', '厦门市', '湖里区']
list: [
{
value: '福建省',
data: [
{value: '福州市', data: [{value: '台江区'},{value: '鼓楼区'}]},
{value: '厦门市', data: [{value: '思明区'},{value: '湖里区'}]}
]
},
{
value: '浙江省',
data: [
{value: '杭州市', data: [{value: '上城区'},{value: '下城区'}]}}
]
}
]
注意：若不需要下一列的数据，则不需要填写data属性，如：
报错：
{value: '宁波市', data: [{value: '海曙区', data: []}]}
正确：
{value: '宁波市', data: [{value: '海曙区'}]}
轮播组件wSwiper
import {wSwiper} from 'wade-ui'
<swiper :wSwiperOptions="wOptions">
<div id="wSwiperWrap">
<div class="w-slide" style="background: #ffa142">11111111</div>
<div class="w-slide" style="background: #31d2fa">22222222222</div>
<div class="w-slide" style="background: yellow">333333333333</div>
<div class="w-slide" style="background: saddlebrown">444444444</div>
</div>
<div class="w-prev-slide-btn"><</div>
<div class="w-next-slide-btn">></div>
</swiper>
data(){
return {
wOptions: {
pageShow: true,
speed: .1,
time: 3000,
autoPlay: true,
hoverPause: true
}
}
}
id="wSwiperWrap"是必须的。
<div class="w-prev-slide-btn"><</div>
<div class="w-next-slide-btn">></div>
左右按钮切换，可自行填充图标，没有默认图标，如不需要可不写。
wOptions参数：
| Attribute | Type | Default | Description |
|---|---|---|---|
| pageShow | Boolean | -- | 是否显示远点 |
| speed | Number | -- | 切换动画速度 |
| time | Number | -- | 轮播切换时间间隔 |
| autoPlay | Boolean | -- | 是否自动轮播 |
| hoverPause | Boolean | -- | 鼠标移入是否暂停轮播 |