ฉันไม่ได้อัปเดตบทความมาระยะหนึ่งแล้วเพราะฉันยุ่งอยู่กับการเรียนรู้สิ่งใหม่ ๆ และลืมแบ่งปัน ฉันรู้สึกละอายใจจริงๆ
ดูสิฉันโพสต์บทความในช่วงกลางดึกแบ่งปันวิดเจ็ต Vue ที่เรียกว่า bootpage ที่ฉันเขียนด้วยตัวเอง
หากคุณไม่เข้าใจ vue.js คุณสามารถย้ายไปที่บทความก่อนหน้าของฉัน“ การพูดคุยสั้น ๆ เกี่ยวกับ vue.js” เพื่อเรียนรู้เกี่ยวกับเรื่องนี้
บทนำเกี่ยวกับส่วนประกอบ bootpage
ที่จริงแล้วมันไม่ใช่องค์ประกอบระดับสูง ในทางตรงกันข้ามมันเป็นเพียงส่วนประกอบของการเพจโต๊ะง่าย ๆ ส่วนใหญ่เป็นเพราะฉันต้องการองค์ประกอบการเพจตารางในโครงการล่าสุดของฉัน ส่วนประกอบการแบ่งหน้าห้องสมุดส่วนประกอบอย่างเป็นทางการของ Vue นั้นทรงพลังเกินไปหรือไม่เหมาะสำหรับฉันดังนั้นฉันจึงเขียนตัวเองให้ทำกับมัน บางทีบางคนอย่างฉันต้องการองค์ประกอบการเพจแบบง่าย ๆ เพื่อใช้ฟังก์ชั่นการเพจแบบง่าย ๆ ฉันจะแบ่งปันที่นี่และทุกคนจะเติมในหลุม
หากคุณต้องการส่วนประกอบระดับสูงคุณสามารถย้ายไปที่ห้องสมุด Vue Component อย่างเป็นทางการ: https://github.com/vuejs/awesome-vue#libraries-Plugins
Bootpage เป็นส่วนประกอบของตารางเพจที่รองรับข้อมูลคงที่และข้อมูลเซิร์ฟเวอร์ รองรับการปรับจำนวนแถวที่แสดงในแต่ละหน้าและจำนวนหน้าที่แสดง สไตล์ขึ้นอยู่กับ bootstrap เช่นนี้:
การสาธิตออนไลน์: https: //luozhihao.github.io/b ...
วิธีใช้
ในไฟล์. vue องค์ประกอบเราเขียนเทมเพลตเช่นนี้นั่นคือรหัส HTML:
<table> <thead> <tr> <th> id </th> <th> ชื่อ </th> <th> เนื้อหา </th> <th> หมายเหตุ </th> </tr> </thead> <tbody> <ttr v-for = "ข้อมูลใน tablelist"> <td v-text = "data.num"> </td> <td v-text. v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <tr> <td colspan = "4"> <div> <button v-on: click = "Refresh"> refresh </button> </div> : page-len = "pagelen": param = "param"> </boot-page> </div> </td> </td> </tfoot>
ในแท็ก <boot-page> async หมายถึงว่าจะได้รับข้อมูลจากฝั่งเซิร์ฟเวอร์หรือไม่ FALSE คือ NO; ข้อมูลเป็นอาร์เรย์ข้อมูลแบบตารางคงที่ เลนส์เป็นอาร์เรย์ของแถวที่แสดงต่อหน้า Page-Len คือจำนวนหน้าเว็บที่สามารถแสดงได้
รหัส JavaScript ที่ใช้ข้อมูลคงที่นั่นคือเนื้อหาในแท็กสคริปต์มีดังนี้:
<script> นำเข้า bootpage จาก './components/bootpage.vue' การส่งออกเริ่มต้น {data () {return {lenarr: [10, 50, 100], // แสดงความยาวต่อ pagelen: 5, // จำนวนหน้าจอที่สามารถแสดงได้: 'dsds'}, {num: 2, ผู้แต่ง: 'luozh', สารบัญ: 'สนับสนุนเพื่อปรับจำนวนแถวที่แสดงต่อหน้าและจำนวนหน้าที่แสดง สไตล์ขึ้นอยู่กับ bootstrap ', หมายเหตุ:' dsds '}, {num: 3, ผู้แต่ง:' luozh ', เนื้อหา:' <boot-page> แท็ก async หมายถึงว่าจะดึงข้อมูลจากฝั่งเซิร์ฟเวอร์หรือไม่ 'dsds'}, {num: 5, ผู้แต่ง: 'luozh', สารบัญ: 'เลนส์เป็นอาร์เรย์ของแถวที่แสดงต่อหน้า', หมายเหตุ: 'dsds'}, {num: 6, ผู้แต่ง: 'luozh', เนื้อหา: พารามิเตอร์การส่งคืนของเซิร์ฟเวอร์คือ {data: [], page_num: 6}, โดยที่ข้อมูลคือข้อมูลแบบตารางและ page_num คือจำนวนหน้าทั้งหมด ', หมายเหตุ:' dsds '}, {num: 8, ผู้แต่ง:' luozh ', เนื้อหา' dats ' ใช้ tablelist เมื่อใช้ข้อมูลเซิร์ฟเวอร์: [] // ข้อมูลหลังการถ่ายภาพที่ส่งคืนโดยส่วนประกอบการแบ่งหน้า}}, ส่วนประกอบ: {bootpage}, เหตุการณ์: {// ข้อมูลตารางที่ส่งคืนโดยส่วนประกอบ pagination '(ข้อมูล) {this.tableList = data}}}โดยทั่วไปเราไม่ค่อยใช้ข้อมูลตารางแบบคงที่และข้อมูลของแอปพลิเคชันส่วนใหญ่ได้มาจากฝั่งเซิร์ฟเวอร์ดังนั้นนี่คือวิธีการรับข้อมูลการปนเปื้อนเซิร์ฟเวอร์:
ส่วนประกอบ HTML ที่ใช้ข้อมูลเซิร์ฟเวอร์มีดังนี้:
<boot-page v-ref: หน้า: async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
โดยที่ URL คือที่อยู่คำขอของเซิร์ฟเวอร์ Param เป็นวัตถุพารามิเตอร์ที่ต้องส่งไปยังเซิร์ฟเวอร์
รหัสที่ใช้ JavaScript ข้อมูลเซิร์ฟเวอร์มีดังนี้:
<script> นำเข้า bootpage จาก './components/bootpage.vue' การส่งออกค่าเริ่มต้น {data () {return {lenarr: [10, 50, 100], // แสดงความยาวต่อหน้าชุด Pagelen: 5, // จำนวนหน้าเว็บ โดยส่วนประกอบ pagination}}, วิธีการ: {refresh () {this. $ refs.page.refresh () // ฟังก์ชั่นการรีเฟรชตารางมีให้ที่นี่}}, ส่วนประกอบ: {bootpage}, เหตุการณ์: {// ข้อมูลตารางที่ส่งคืนโดยส่วนประกอบ pagination 'Refresh' () {this.refresh ()}}}}} </script>หมายเหตุ: นอกเหนือจากเนื้อหาอาร์เรย์ที่ส่งผ่านไปยังตารางส่วนประกอบเซิร์ฟเวอร์ยังต้องการชื่อคีย์ของจำนวนหน้าทั้งหมดชื่อ page_num
พารามิเตอร์ที่ส่วนประกอบมาพร้อมกับเซิร์ฟเวอร์คือ:
-
ใช้งานอยู่: 1, // หมายเลขหน้าปัจจุบัน
ความยาว: 5 // จำนวนที่แสดงต่อหน้า
-
พารามิเตอร์สำหรับการส่งคืนเซิร์ฟเวอร์ต้องเป็น:
-
ข้อมูล: [], // ข้อมูลตาราง
page_num: 5 // จำนวนหน้าทั้งหมด
-
ซอร์สโค้ดส่วนประกอบ
สำหรับการใช้การปนเปื้อนฉันจะไม่แสดงซอร์สโค้ดที่นี่ ฉันอัปโหลดซอร์สโค้ดทั้งหมดไปยัง gitHub ของฉันและที่อยู่คือ: https://github.com/luozhihao/bootpage
ให้ฉันเตือนคุณล่วงหน้า: เพราะฉันใช้เวลาหลายชั่วโมงในการขับออกส่วนประกอบนี้ฉันต้องไม่เพียงพอในรูปแบบการเขียนและข้อมูลจำเพาะของส่วนประกอบ Vue และยังไม่ได้เป็นอิสระอย่างสมบูรณ์ดังนั้นฉันจึงเติมเต็มในหลุม ฉันจะแบ่งปันที่นี่เท่านั้น
แน่นอนคุณสามารถแก้ไขรหัสของส่วนประกอบได้ตามความต้องการของโครงการของคุณ ท้ายที่สุดมันค่อนข้างซับซ้อนที่จะใช้ส่วนประกอบการเพจขนาดใหญ่และสมบูรณ์
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น