码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-06-15 13:12:19      阅读:903      评论:0      收藏:0      [点我收藏+]

标签:day   function   使用   active   处理   orcale   com   round   友好度   

最近正在试试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);
}

 

 



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

标签:day   function   使用   active   处理   orcale   com   round   友好度   

原文地址:https://www.cnblogs.com/MiKuCoder/p/9071947.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!