Vv vue

A ui-component for vue

Version: 1.2.2 Updated: 03/05/2019

By: yqx License: MIT

Downloads Last 30 Days: 58

Install

npm i vv-vue
yarn add vv-vue

CDNs

bundle.run: https://bundle.run/vv-vue

jsDelivr: https://cdn.jsdelivr.net/npm/vv-vue

unpkg: https://unpkg.com/vv-vue

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)
     其中typestring,控制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
Categories: Vue js
Tags: