bootstrapベースvueページングコンポーネント
19132 ワード
申手党はここで例をダウンロードします
bootstrapベースのvueページングコンポーネントでは、NodeJSサービスを架設しないため、Vueを使用するときに単一ファイルコンポーネントを使用しない学生もいると思います.ではネット上に流れている*.vueの様々なページングコンポーネントは使用できない可能性があります.ここでは*を提供します.jsのページングコンポーネント、午後書いたばかりで、皆さんに手伝ってほしいです.ダウンロードを歓迎します.
次に、使用するコードの例を示します.
コンポーネントのコードは次のとおりです.
bootstrapベースのvueページングコンポーネントでは、NodeJSサービスを架設しないため、Vueを使用するときに単一ファイルコンポーネントを使用しない学生もいると思います.ではネット上に流れている*.vueの様々なページングコンポーネントは使用できない可能性があります.ここでは*を提供します.jsのページングコンポーネント、午後書いたばかりで、皆さんに手伝ってほしいです.ダウンロードを歓迎します.
次に、使用するコードの例を示します.
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8" />
<title> bootstrap vue - title>
<link href="Content/bootstrap.css" rel="stylesheet" />
head>
<body>
<div id="app" class="container">
<br />
<h4> bootstrap vue - h4>
<pager show-list-bar :show-index-bar="true"
:page-size="30" :bar-size="10" :page-size-list="[1, 15, 25, 30]"
:total="1024" v-model="xxx" @change="pagechange();">pager>
<hr />
: {{ xxx }}
div>
<script src="Scripts/vue-2.5.2.min.js">script>
<script src="Scripts/vue-pager-1.0.js">script>
<script>
new Vue({
el: "#app",
data: function () {
return {
xxx: 1,
}
},
methods: {
//
pagechange: function () {
console.log(" ：", this.xxx);
},
}
});
script>
body>
html>コンポーネントのコードは次のとおりです.
// bootstrap by
// vue-pager-1.0.js
Vue.component('pager', {
model: {
prop: 'pageIndex',
event: 'change'
},
props: {
"total": { required: true, type: Number }, //
"pageSize": Number, //
"barSize": { type: Number, default:10 }, // ，
"pageIndex": { required: true, type: Number}, // (v-model)
"pageSizeList": { type: Array, default: [10, 20, 30, 50, 100] }, //
"showListBar": { type: Boolean, default: false }, // “ X ”
"showIndexBar": { type: Boolean, default: true }, // “ / ”
},
data: function () {
return {
pindex: 1, //
psize: 10, //
}
},
computed: {
// （ ）
pcount: function () {
return parseInt((this.total - 1) / this.psize) + 1;
},
//
indexes: function () {
//
this.pindex = this.pageIndex || 1;
if (isNaN(this.pindex)) this.pindex = 1;
if (this.pindex < 1) this.pindex = 1;
if (this.pindex > this.pcount) this.pindex = this.pcount;
// indexes
var left = 1;
var right = this.pcount;
var bcenter = parseInt(this.barSize / 2);
var ar = [];
if (this.pcount > this.barSize) {
if (this.pindex > bcenter && this.pindex <= this.pcount - bcenter) {
left = this.pindex - bcenter
right = this.pindex + (bcenter - 1)
+ (this.barSize % 2); //
//console.log(" ", this.pindex);
} else {
if (this.pindex <= bcenter) {
left = 1
right = this.barSize;
//console.log(" ", this.pindex);
} else {
right = this.pcount;
left = this.pcount - (this.barSize - 1);
//console.log(" ", this.pindex);
}
}
}
while (left <= right) {
ar.push(left)
left++
}
return ar;
},
showLast: function () {
return this.pindex != this.pcount
},
showFirst: function () {
return this.pindex != 1
}
},
watch: {
// pindex ， change
pindex: function () {
this.pageIndex = this.pindex;
this.$emit('change', this.pageIndex);
},
},
methods: {
//
go: function (i) {
if (i < 1 || i > this.pcount) return;
this.pindex = i;
}
},
template: '',
created: function () {
this.psize = this.pageSize || this.psize;
// change
this.$emit('change', this.pageIndex);
}
});