标签:day function 使用 active 处理 orcale com round 友好度
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就是获取分页的数据
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);
}
标签:day function 使用 active 处理 orcale com round 友好度
原文地址:https://www.cnblogs.com/MiKuCoder/p/9071947.html