简介

纯属个人开发的小的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 | -- | 鼠标移入是否暂停轮播 |