semantic、vue 使用分页组件和日历插件

最近正在试试semantic-ui，结合了vue，这里忍不住吐槽semantic和vue的友好度简直不忍直视，不过既然用了，这里就分享几个用到的插件了

1.分页组件(基于vue)

var pageComponent = Vue.extend({
    template: `<div class="ui floated pagination menu">
                    <a class="icon item" :class="{\'disabled\':curPage==1}" v-on:click="goPage(curPage==1?curPage:curPage-1)">
                        <i class="left chevron icon"></i>
                    </a>
                    <a class="item" style="background-color:#fff;" v-for="(page,index) in selectPage" :class="{'p-active':page==curPage}" v-on:click="goPage(page)">
                        <template v-if="page">{{page}}</template> 
                        <template v-else="page" >···</template>
                    </a>
                    <a class="icon item" :class="{\'disabled\':curPage==pages}" v-on:click="goPage(curPage==pages?curPage:curPage+1)">
                        <i class="right chevron icon"></i>
                    </a>
                </div>`,
    props: {
        pages: {
            type: Number,
            default: 1
        },
        current: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            curPage: 1
        }
    },
    computed: {
        selectPage() {
            let pageNum = this.pages;
            let index = this.curPage;
            let arr = [];
            if (pageNum <= 5) {
                for (var i = 1; i <= pageNum; i++) {
                    arr.push(i);
                }
                return arr;
            }
            if (index <= 2) return [1, 2, 3, 0, pageNum];
            if (index >= pageNum - 1) return [1, 0, pageNum - 2, pageNum - 1, pageNum];
            if (index === 3) return [1, 2, 3, 4, 0, pageNum];
            if (index === pageNum - 2) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum];
            return [1, 0, index - 1, index, index + 1, 0, pageNum];
        }
    },
    methods: {
        init: function () {
            this.curPage = 1;
        },
        goPage: function (page) {
            $('.pagination>.item').removeClass('active');
            if (page == 0)
                return;
            if (page != this.curPage) {
                this.curPage = page;
                this.$emit('navpage', this.curPage);
            } else {
                console.log('Already in the current page');
            }
        }
    },
    watch: {
        'curPage': function () {
            $('.pagination>.item').removeClass('active');
        }
    }
});
Vue.component('pagination', pageComponent);

使用时：

<pagination class="right" ref="pageUser" v-bind:pages="pageNum" v-bind:current.sync="pageIndex" v-on:navpage="getList"></pagination>

其中getList就是获取分页的数据

由于semantic自己渲染按钮组有一套js触发，使用vue触发的就会出现问题，这里已处理。

2. https://github.com/mdehoog/Semantic-UI-Calendar.git这个插件很好用了，也查过@公孙二狗 的文章，结合github上的说明进行组装了这个,所有操作均是按照github上提供的说明来加的

let timeSetting = {
            type: 'datetime',//这里可自定义，参照github上的说明
            formatter: { // 自定义日期的格式
                date: function (date, settings) {
                    if (!date) return '';
                    var year = date.getFullYear();
                    var month = date.getMonth() + 1;
                    var day = date.getDate();

                    month = month < 10 ? '0' + month : month;
                    day = day < 10 ? '0' + day : day;

                    return year + '-' + month + '-' + day;
                },
                time: function (date, settings, forCalendar) {
                    if (!date) return '';
                    var hour = date.getHours();
                    var minute = date.getMinutes();
                    hour = hour < 10 ? '0' + hour : hour;
                    minute = minute < 10 ? '0' + minute : minute;
                    return hour + ':' + minute;
                },
            },
            ampm: false,
            disableMinute:true,
            text: {
                days: ['日', '一', '二', '三', '四', '五', '六'],
                months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                today: '今天',
                now: '当前',
                am: ' am',
                pm: ' pm'
            },
            minDate: new Date("2018-5-20 09:00"),
            maxDate: new Date("2018-5-25 18:00")
        };
　　　　　//由于这里我需要一个时间段，所以就写了一个区域形式(参考github上的说明)
        let leftTimeSetting = $.extend({ endCalendar: "#rightTime" }, timeSetting);
        let rightTimeSetting = $.extend({ startCalendar : "#leftTime" }, timeSetting);
        $('#leftTime').calendar(leftTimeSetting);
        $('#rightTime').calendar(rightTimeSetting);
}