Vue使用Componet自訂分頁-以MVC C#實做
請參考前文：Vue 自訂分頁 - 以 MVC C# 實做。
前一篇文章記錄了用Vue.js自刻分頁，後來因重複使用的需求故改寫為Component，就在這篇文章紀錄一下啦。
使用語言、資源及相關架構
請參考前文：Vue 自訂分頁 - 以 MVC C# 實做。
以下是正文
分頁樣式：
[|<][<][1][2][3][4][…][>][>|]
以下就上面所示撰寫範例。
程式碼請參考前文：Vue 自訂分頁 - 以 MVC C# 實做，本篇僅就調整/更新的部分提供說明。
後端
1.web.config初始化設定=>同前篇，不變
2.資料=>同前篇，不變
3.資料模型=>同前篇，不變
4.分頁資料模型=>同前篇，不變
5.分頁資料邏輯=>同前篇，不變
6.撰寫取資料、取得分頁相關設定值的Service=>同前篇，不變
7.HomeController.cs
設定值同前篇，不變。為了與前篇做區隔，這裡以另一個View顯示
public ActionResult IndexComp()
{
SetInitial();
return View();
}
前端
8.IndexComp.cshtml
除了加入的Partial、js檔案不同，其他不變
<div class="page-footer">
<div class="container-fluid text-center py-3">
<div class="row">
@{ Html.RenderPartial("Partial_PageComp");}
</div>
</div>
</div>
<script src="~/Scripts/indexcomp.js"></script>
9.分頁css=>同前篇，不變
10.Javascript(indexcomp.js)
定義component(必須要vue使用前先予定義)
Vue.component('paging-element', {
/* pagegroup:顯示之頁碼列表 / totpage:總頁數 / currentitem:目前頁碼
enableleft:左側功能鈕是否可使用 / enableright:右側功能鈕是否可使用 / leftellipses:左側'更多'鈕是否顯示 / rightellipses:右側'更多'鈕是否顯示
leftellipindex:左側'更多'鈕頁碼index / rightellipindex:右側'更多'鈕頁碼index */
props:
['pagegroup', 'totpage', 'currentitem',
'enableleft', 'enableright', 'leftellipses', 'rightellipses',
'leftellipindex', 'rightellipindex'],
template:
'<div class="pagination">' +
'<ul class="pagination pagination-sm">' +
'<li v-bind:class="[enableleft ? \'\' : \'btndisabled\']" @click="setMethod(1)">' +
'<a href="#" class="page-link" title="第一頁" ><i class="fa fa-angle-double-left"></i></a>' +
'</li>' +
'<li v-bind:class="[enableleft ? \'\' : \'btndisabled\']" @click="setMethod(parseInt(currentitem)-1)">' +
'<a href="#" class="page-link" title="上一頁"><i class="fa fa-angle-left" ></i></a>' +
'</li>' +
'<li @click="setMethod(leftellipindex)">' +
'<a href="#" class="page-link" v-show="leftellipses" title="更多...">...</a>' +
'</li>' +
'<li v-for="p in pagegroup" @click="setMethod(p)" v-bind:class="[(parseInt(p) === parseInt(currentitem)) ? \'active\' : \'\']">' +
'<a href="#" class="page-link">{{ p }}</a>' +
'</li>' +
'<li @click="setMethod(rightellipindex)">' +
'<a href="#" class="page-link" v-show="rightellipses" title="更多...">...</a>' +
'</li>' +
'<li v-bind:class="[enableright ? \'\' : \'btndisabled\']" @click="setMethod(parseInt(currentitem)+1)">' +
'<a href="#" class="page-link" title="下一頁"><i class="fa fa-angle-right"></i></a>' +
'</li>' +
'<li v-bind:class="[enableright ? \'\' : \'btndisabled\']" @click="setMethod(totpage)">' +
'<a href="#" class="page-link" title="最末頁"><i class="fa fa-angle-double-right" ></i></a>' +
'</li>' +
'</ul>' +
'</div>'
,
methods: {
setMethod: function (page) {
this.$emit('pagemethod', page);
}
}
})
首先定義的props，這部分是將Vue component內的屬性與你的資料模型屬性相連結(串接)的設定。
再來定義的template，官方提供可以使用鍵盤上的’飄’位置的另一個符號表達，
但號稱支援IE的Vue若這樣寫，在IE上會死掉而無法執行，僅能採用javascript能吃的字串的表達方式。
傻露就不提供’飄’位置的另一個符號表達方式啦，避免會與部落格上markdown語法打架。
最後的methods，component內部定義了一個setMethod函式，裡面使用$emit告訴vue，我要把資料(page)傳回給父組件，並由pagemethod此方式串接父子。
11.Partial_PageComp.cshtml
有了Vue Component就可以開始寫這隻code了
<paging-element
v-bind:pagegroup="dataPage.DisplayPageZone"
v-bind:totpage = "dataPage.TotalPage"
v-bind:currentitem="dataPage.CurrentPage"
v-bind:pagetype="dataPage.UseType"
v-bind:enableleft = "dataPage.EnableLeft"
v-bind:enableright = "dataPage.EnableRight"
v-bind:leftellipses = "dataPage.DisplayLeftEllipsesZone"
v-bind:rightellipses = "dataPage.DisplayRightEllipsesZone"
v-bind:leftellipindex = "dataPage.LeftEllipsIndex"
v-bind:rightellipindex = "dataPage.RightEllipsIndex"
v-on:pagemethod ="setPage"
>
</paging-element>
透過v-bind綁定資料模型屬性&component屬性。透過v-on綁定父組件的function& component的function。