Vue foryou

Some Plugin for Vue

Usage

foryou pagination

install by npm

npm install foryou@latest

<div id="app">
      <for-you-pagination 
        prev-text="&laquo;"  
        next-text="&raquo;" 
        first-text="&laquo;&laquo;" 
        last-text="&raquo;&raquo;" 
        :rotate="rotate"
        :item-totals="totals" 
        :force-ellipses="true"  
        :page.sync ="current" 
        :max-size="5" 
        :hide-if-empty="false" 
        active-class="active-green" 
        @page-change="pageChange" 
        :page-size="psize">
        <!--define  template ,you can delete it-->
        <!--begin-->
        <a slot-scope="{index}" >
          {{index+1+'~'}}
        </a>
        <a slot="boundary-last-numbers" slot-scope="{index}">
          {{index+1+'~'}}
        </a>
        <a href="#" slot="boundary-first-numbers" slot-scope="{index}">
          {{index + 1 + ' fixed'}}
        </a>
        <!--end-->
      </for-you-pagination>
      <hr />
    <button @click="moveTo">move to {{current}}</button>
  
    <button @click="chsize">pageSize : {{psize}}</button>
    <button @click="chtotal">item totals : {{totals}}</button>
    <button @click="switchrotate">switch rotate : {{rotate}}</button>
   <span>{{'page totals:' + pagetotal }}</span>
  </div>  

import forYou from 'foryou'

Vue.use(forYou);


 methods: {
    pageChange(from,to){
        console.log(from +":" + to);
    }
},
data () {
    return {
      current:2,
      msg: 'Welcome to vue-am-pagination',
      psize:2
    }
  }

Properties

Property	Type	Default
prev-text	String	«
next-text	String	»
first-text	String	««
last-text	String	»»
rotate	Boolean	true
item-totals	Number	1
force-ellipses	Boolean	true
page.sync	Number	1
max-size	Number	5
hide-if-empty	Boolean	true
page-change	Function&Event	\
page-size	Number	10
boundary-links	Boolean	true
direction-links	Boolean	true
boundary-pages	Number( condition< max-size)	0
container-class	String	am-p
disabled-class	String	disabled
active-class	String	active
next-class	String	next
last-class	String	last
first-class	String	first

foryou datepicker

<for-you-date-picker  format="yyyy/mm/dd" />

Adding multilingual support.

import forYou from 'foryou'
import en from 'foryou/lib/umd/locale/en'
import zh from 'foryou/lib/umd/locale/zh'
import zh1 from 'foryou/lib/umd/locale/zh1'
import fr from 'foryou/lib/umd/locale/fr'
import ja from 'foryou/lib/umd/locale/ja'

//You can define a global language environment for plug-ins.
Vue.use(forYou,{lang:en});
//Or rewrite the language environment of a component

<ul>  
      <li>
          <for-you-date-picker  format="yyyy/mm/dd" :date.sync="dd" :lang="langzh" :has-aside="aside" />
      </li>
      <li>
          <for-you-date-picker  format="yyyy/mm/dd" :date.sync="dd" :lang="langeng" :has-aside="aside" />
      </li>
       <li>
          <for-you-date-picker  format="yyyy/mm/dd" :date.sync="dd" :lang="langfr" :has-aside="aside" />
      </li>
       <li>
          <for-you-date-picker  format="yyyy/mm/dd" :date.sync="dd" :lang="langja" :has-aside="aside" />
      </li>
      <li>
          <for-you-date-picker  format="yyyy/mm/dd" :date.sync="dd" :lang="langself" :has-aside="aside" />
      </li>
</ul>

 data () {
    return {
      dd:new Date(),
      //Custom  Configuration
      langself:{
        el: {
            datepicker: {
                //support $$year
                panel_date_btn_year: "'custom.' +$$year",
                panel_year_btn_year: "$$year",
                today: "tday",
                yesterday: "yday",
                tomorrow: "twm",
                years: "$$year",
                //support
                // months:{
                //   all:"$$month"
                // },
                months: {
                    jan: 'Jan',
                    feb: 'Feb',
                    mar: 'Mar',
                    apr: 'Apr',
                    may: 'May',
                    jun: 'Jun',
                    jul: 'Jul',
                    aug: 'Aug',
                    sep: 'Sep',
                    oct: 'Oct',
                    nov: 'Nov',
                    dec: 'Dec'
                },
                weeks: {
                    sun: 'Su',
                    mon: 'Mo',
                    tue: 'Tu',
                    wed: 'We',
                    thu: 'Th',
                    fri: 'Fr',
                    sat: 'Sa'
                }
            }
        }
      }
      langzh:zh,
      langja:ja,
      langeng:eng,
      langfr:fr,
      langzh1:zh1,
      //Whether to display the label page or not ，default:false
      aside:true
    }
  }