春節(jié)的時候在家閑著沒事干的時候?qū)懥藥讉€小功能的組件

h-refresh

github地址：https://github.com/hezhengjie/h-refresh

這是一個頁面刷新模塊,保證頁面刷新或者回退到頁面,頁面的滾動條仍在原來位置 .

引入方式

 $ npm install @h-refresh --save //安裝

 require('h-refresh')
 或者
 import 'h-refresh';

初始化

hRefresh();

demo

https://hezhengjie.github.io/h-refresh/demo/index.html

h-stick

這是一個滑動置頂,具體請看demo.
github地址：https://github.com/hezhengjie/h-stick

引入方式

 $ npm install @h-stick --save //安裝

 require('h-stick')
 或者
 import 'h-stick';

初始化

hStick.init();

滑動置頂?shù)脑靥砑觕lass:sticky-wrap

<div class="sticky-wrap">
        <ul class="nav">
            <li>推薦</li>
            <li>分類</li>
            <li>頭條</li>
        </ul>
</div>

demo

https://hezhengjie.github.io/h-stick/demo/index.html

vue-h-datepicker

基于Vue的移動端選擇組件
github地址https://github.com/hezhengjie/vue-h-datepicker

版本

1.2
修復(fù)滑動過渡
增加自定義回調(diào)函數(shù)
修復(fù)字體大小獲取
增加模式選擇（日期和時間雙模式）

2.0
vue 2.x 支持

Install

1.Vue 1.x 版本
npm install vue-h-datepicker@1.* --save

2.Vue 2.x版本
npm install vue-h-datepicker --save

Demo

https://hezhengjie.github.io/vue-h-datepicker/index.html

Usage

<template>
  <input v-model="dateOption.date" >
  <div @click="showDatePicker">選擇日期</div>
  <div class="wrap">
    <app-date-picker :status="dateOption.status" :option="dateOption.option" v-on:confirm="getDate" v-on:cancel="cancelDatePicker"></app-date-picker>
  </div>


  <input v-model="timeOption.time" >
  <div @click="showTimePicker">選擇時間</div>
  <div class="wrap">
    <app-date-picker :status="timeOption.status" :option="timeOption.option" v-on:confirm="getTime" v-on:cancel="cancelTimePicker"></app-date-picker>
  </div>
 </template>
<style>
  html{
    font-size: 10px;
  }
</style>
<script>
  import DatePicker from 'vue-h-datepicker';

export default {
  data(){
    return {
      dateOption:{
        status:false,
        option:{
          type:'date',//date or time,默認(rèn)為date
          startDate:{
            year:2001,
            month:11,
            day:12
          },
          yearScope:[1991,2018]//可選,默認(rèn)為今年前后20年,
        },
        date:'2012-12-12'
      },
      timeOption:{
        status:false,
        option:{
          type:'time',//date or time,默認(rèn)為date
          startTime:{
            meridiem:'上午',
            hour:3,
            minute:35
          },
          minuteSpan:5//分鐘間隔,默認(rèn)為5
        },
        time:'上午 3:35'
      }

    }
  },
  components: {
    'app-date-picker': DatePicker
  },
  methods:{
    showDatePicker:function(){
      this.dateOption.status = true;
    },
    showTimePicker:function(){
      this.timeOption.status = true;
    },
    getDate: function(date){
      this.dateOption.date = date.year+'-'+date.month+'-'+date.day;//選擇之后的回調(diào)函數(shù)
      this.dateOption.status = false
    },
    getTime: function(time){
      this.timeOption.time = time.meridiem+' '+time.hour+':'+time.minute;//選擇之后的回調(diào)函數(shù)
      this.timeOption.status = false
    },
    cancelDatePicker:function(){
      this.dateOption.status = false;//取消之后的回調(diào)函數(shù)
    },
    cancelTimePicker:function(){
      this.timeOption.status = false;//取消之后的回調(diào)函數(shù)
    }
  }
}
</script>