Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

wade-ui

1.3.22 • Public • Published

简介

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

Install

npm i wade-ui

DownloadsWeekly Downloads

4

Version

1.3.22

License

ISC

Unpacked Size

215 kB

Total Files

14

Last publish

Collaborators

  • avatar