正文
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);
}
