vv-view
目前有swiper轮播组件、月份选择、loading加载动画、toast提示信息组件、messageBox确认取消弹窗、switch开关、slide滑块等,将会持续更新各种常用组件
安装
npm install vv-vue --save
cnpm install vv-vue --save //淘宝镜像
使用
- 1.引用
main.js
import vvView from 'vv-vue'
import '../node_modules/vv-vue/dist/style.css'
Vue.use(vvView);
- 2.使用
html
//swiper用法
<swiper :options="options">
<slide v-for="(item,index) in list" :key="item.id"
v-bind:style="{background:'url('+ item.img +') no-repeat center / cover'}">
</slide>
</swiper> //注:我个人习惯使用背景图片,也可以在slide之间写你自己的代码
//月份选择组件
<date @selectDate="picked">
</date>
//loading动画组件,spinnerColor:loading颜色
<spinner :spinner-color="spinnerColor"></spinner>
- 3.添加options
JavaScript
//swiper用法
data () {
return {
list:[
{
img:'/static/list1.jpg',
id:1
},
{
img:'/static/list2.jpg',
id:2
},
{
img:'/static/list3.jpg',
id:3
}
],
options:{
autoplay:true,//是否自动播放,默认true
duration:500,//过度时长,单位ms,默认500
interval:2000,//自动播放间隔时长,单位ms,默认2500
showPagenation:true,//是否显示index dots,默认true
notActiveClass:'',//index dots 的类名,默认使用的是yq_pagenation_item,可添加自己的类名,记得使用!important覆盖我的样式,但请注意style如果使用了scope,那么css样式不会生效,但class依然会添加
activeClass:'yq_swiper_active',//index dots 当前的类名,默认yq_swiper_active
index:1,//加载默认显示的第一张slide,默认1
},
}
}
//loading动画方法
this.$loading()//开启动画
this.$loading['close']()//关闭动画
//toast提示框
你可以直接调用下面的方法
this.$toast('message') //默认显示位置为center
或者
this.$toast[type]('message',duration)
其中type为string,控制toast提示显示位置,默认为'center',有三个可选值
type->'top'显示在顶部
type->'center'显示在中央
type->'bottom'显示在底部
duration为number,提示信息消失时间,默认为2500
//spinner用法(相当于直接在页面中任何位置使用的loading)
html
<spinner :spinnerColor="spinnerColor" :spinnerSize="spinnerSize">
</spinner>
配置项
spinnerColor -> loading颜色
spinnerSize -> loading大小(单位:px,默认20px)
//switch用法
html
<vv-switch
switchWidth=60
switchHeight=30
OnColor="#0fc37c"
OffColor="#ff4949"
switchDuration=400
active-text="开"
inactive-text="关"
v-model="status"
>
</vv-switch>
//actionSheet用法
html
<vv-action-sheet
:actions="action" //操作列表,每条列表包含value:显示内容,method:点击执行的回调
:cancel-text="'关闭'" // 取消按钮文字,如为'',则不显示取消按钮 默认:取消
:text-color="'#FF4949'" // 文字颜色 默认:#333333
:text-font="'16'" // 文字大小 默认:18
:mask-close="false" //是否启用点击遮罩关闭actionSheet 默认:true
v-model="sheetVisible" //actionSheet的显示控制
>
</vv-action-sheet>
js
action:[
{
value:'拍照',
method:function () {
console.log('拍照');
},
},
{
value:'选择照片',
method:function () {
console.log('选择照片')
},
},
]
//slider用法
html
<vv-slider
:width="200"
:height="6"
:trackColor="'#e4e7ed'"
:bar-color="'red'"
:dots-color="'red'"
:min="20"
:max="80"
v-model="res">
</vv-slider>
注意
1.绑定的res值,不要小于min,或者大于max
2.bar-color和dots-color如果只设置一个选项,则两者共用同一颜色,当然也可以分开传入不同颜色(如果你觉得好看的话,这样的需求应该不太可能,但我还是保留了可分开配置不同颜色的功能,万一呢...)
截图
当然你也可以直接clone本项目,在本地运行查看,工程中的example目录即是调用各个组件的示例
- 1.npm install //建议安装使用cnpm
- 2.npm run dev