เว็บแอปที่ตอบสนองด้วย Vuetify

VuetifyJs เป็นเฟรมเวิร์ก Material Design ที่ยอดเยี่ยมสำหรับ VueJs มันมาพร้อมกับส่วนประกอบที่พร้อมใช้งานมากมาย “แชมป์เปี้ยนที่ซ่อนอยู่” คือการสร้างระบบตอบสนอง นี่ไม่ใช่ส่วนประกอบ แต่เป็นคุณลักษณะที่ประกาศในส่วนประกอบบางส่วน ฉันจะแสดงให้คุณเห็นในบทความนี้ถึงวิธีสร้างข้อความ แบบฟอร์ม รูปภาพ และเกือบทุกอย่างที่ตอบสนองได้ ในภายหลังโดยใช้ออบเจ็กต์เบรกพอยต์ ดังนั้นหากคุณต้องการสร้างเว็บแอปพลิเคชันที่เหมาะกับวิวพอร์ตทุกขนาด VuetifyJs และแน่นอนว่าบทความนี้เหมาะสำหรับคุณ ;)

ฉันคิดว่าคุณใช้งานโปรเจ็กต์ VueJs กับ VuetifyJs อยู่ ดังนั้นฉันจึงข้ามขั้นตอนการสร้างโปรเจ็กต์นั้นไป หากคุณต้องการลองใช้บทช่วยสอนนี้ในการตั้งค่าใหม่ โปรดอ่าน บทช่วยสอน Vuetify Quick Start อีกประเด็นหนึ่ง: ฉันใช้ typescript (และฉันสามารถแนะนำสิ่งนี้ได้) หากคุณใช้ Javascript ส่วนประกอบของคุณอาจแตกต่างออกไปเล็กน้อย แต่บทความนี้เราแทบไม่มีการเขียนโค้ดเลย ดังนั้นจึงไม่มีปัญหา

เบรกพอยท์

เบรกพอยต์ในแอปพลิเคชันเว็บแบบตอบสนองแสดงถึงขนาดมุมมองที่แตกต่างกัน แน่นอนว่ามีสมาร์ทโฟนที่มีขนาดอื่นนอกเหนือจากแท็บเล็ต โน้ตบุ๊ก หรือจอพีซีทั่วไปหรือหน้าจอกว้างพิเศษ เราในฐานะนักพัฒนาเว็บควรสร้างแอปพลิเคชันที่ทำงานบนทุกขนาดหน้าจอเป็นอย่างน้อย ฉันคิดว่ามันควรจะใช้งานได้และดูดีกับทุกขนาดหน้าจอ เพื่อให้บรรลุเป้าหมายนี้ ข้อมูลจำเพาะการออกแบบวัสดุจึงให้จุดพักแก่เรา หนึ่งรายการสำหรับอุปกรณ์แต่ละประเภท

ภาพหน้าจอด้านบนแสดงเบรกพอยท์วิวพอร์ตของดีไซน์ Material ระบบเบรกพอยต์นี้ถูกใช้อย่างหนักโดย VuetifyJs คุณสามารถตรวจสอบ "เอกสาร" เพื่อดูข้อมูลเพิ่มเติมได้

ข้อความตอบสนอง

คุณสมบัติข้อความตอบสนองบางอย่างมาพร้อมกับ Vuetify 2.3.0 ดังนั้นนกที่ตื่นเช้าอย่างน้อยหนึ่งตัวจะต้องใช้เวอร์ชันเบต้า

แล้วข้อความโต้ตอบคืออะไร? ขนาดข้อความขึ้นอยู่กับขนาดหน้าจอ หากคุณมีพาดหัวบนจอแสดงผลแบบกว้างพิเศษ ขนาดแบบอักษร 80px อาจดูดีกว่า 20px ในอีกด้านหนึ่ง — พาดหัวขนาด 80px สามารถทำลายการออกแบบทั้งหมดบนโทรศัพท์มือถือขนาดเล็กได้ ข้อความที่ตอบสนองจึงสมเหตุสมผลอย่างยิ่ง แน่นอนคุณสามารถทำได้ด้วยคำสั่ง css และสื่อ แต่ใน VuetifyJs นี่เป็นคุณสมบัติการประกาศที่พร้อมใช้งาน

รูปภาพด้านบนแสดงให้เห็นว่าส่วนหัวและแม้แต่ข้อความสามารถเปลี่ยนขนาดมุมมองได้อย่างไร ใน Vuetify คุณสามารถรับพฤติกรรมนี้ได้ง่ายๆ โดยการประกาศคลาสที่แตกต่างกันในองค์ประกอบข้อความของคุณ:

<template>
  <v-row class="pa-3">
    <h1 
      class="
        text-h4            [1]
        text-md-h2         [2]
        text-lg-h1         [2]
        text-xl-h1         [2] 
        text-truncate"     [3]
    >This is my heading</h1>
    <p 
      class="
        text--secondary 
        text-caption 
        text-sm-body-2 
        text-md-body-1 
        text-lg-body-1 
        text-xl-body-1 
        text-justify"> 
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut...
    </p>
  </v-row>
</template>
/// @/components/ResponsiveText.vue

คุณจะมีคลาสขนาดข้อความเริ่มต้น [1] ซึ่งครอบคลุมเบรกพอยต์ที่เล็กที่สุด (xs) เสมอ ค่าเริ่มต้นสามารถเขียนทับได้โดยใช้คลาสเบรกพอยต์สำหรับแต่ละเบรกพอยต์ [2] - หากคุณต้องการขนาดข้อความที่แตกต่างกันตามค่าเริ่มต้น รูปแบบจะเป็น text-[breakpoint]-[fontsize] เสมอ โดยเฉพาะอย่างยิ่งในส่วนหัว เครื่องมือที่ยอดเยี่ยมคือ text-truncate ซึ่งจะตัดข้อความออกหากไม่พอดีกับองค์ประกอบภายนอก

แบบฟอร์มตอบรับ

ปัญหาใหญ่อีกประการหนึ่งในการสร้างเว็บแอปพลิเคชันแบบตอบสนองคือแบบฟอร์ม ควรจัดเรียงตามขนาดมุมมอง ที่นี่ระบบกริดที่ยอดเยี่ยมสามารถแสดงจุดแข็งของมันได้ แน่นอนว่าระบบกริดไม่เพียงแต่มีประโยชน์ในการใช้แบบฟอร์มเท่านั้น แต่ยังเป็นกรณีทั่วไปสำหรับเว็บแอปพลิเคชันแบบตอบสนองอีกด้วย ดังนั้นฉันจึงใช้ตัวอย่างแบบฟอร์ม — มันจะทำงานเหมือนเดิมเสมอ ไม่ว่าคุณจะต้องการใส่อะไรลงบนหน้าจอก็ตาม

ระบบกริดประกอบด้วยแถวและคอลัมน์ ทุกแถว "เสมือน" มีคอลัมน์ "เสมือน" 12 คอลัมน์ ซึ่งให้ตารางจำนวนแถวตามต้องการ โดยแต่ละแถวมี 12 คอลัมน์ vuetify มีสององค์ประกอบ — v-row และ v-column สิ่งสำคัญคือต้องเข้าใจว่าคุณสามารถวาง v-row และ v-column ลงในระบบกริดได้ แต่ไม่จำเป็นต้องเท่ากับตารางคงที่ n ถึง 12

ฟิลด์ในภาพด้านบนล้วนตั้งชื่อด้วย R(ow)[number]C(olumn)[number] ดังนั้นคุณจะเห็นได้ว่าฟิลด์ต่างๆ เคลื่อนที่อย่างไรในระบบกริดในการเปลี่ยนขนาดมุมมอง เราสามารถดูแถวแบบฟอร์มแรก (R1C1, R1C2, R1C3) เพื่อให้สิ่งต่าง ๆ ชัดเจนยิ่งขึ้น บนหน้าจอขนาดใหญ่ แถวแรก (ซึ่งเท่ากับองค์ประกอบ v-row) จะมีสามฟิลด์ในสามองค์ประกอบ v-col v-col แรกกระจายมากกว่า 6 คอลัมน์เสมือน ส่วนอีก 2 คอลัมน์มากกว่า 3 คอลัมน์แต่ละคอลัมน์ ดังนั้นพวกเขาจึงกระจายคอลัมน์เสมือนทั้งหมด 12 คอลัมน์

มาดูที่ภาพหน้าจอด้านล่างซ้ายกัน รูปร่างเดียวกัน ขนาดมุมมองที่ต่ำกว่า องค์ประกอบ v-col แรกกระจายมากกว่า 12 คอลัมน์เสมือน ส่วนอีก 2 คอลัมน์มีมากกว่า 6 คอลัมน์แต่ละคอลัมน์ ดังนั้นองค์ประกอบ v-row จึงต้องมีสองแถวถึง 12 คอลัมน์เสมือน ภาพหน้าจอด้านล่างขวาแสดงแบบฟอร์มเดียวกันในมุมมองที่เล็กมาก v-row ต้องการแถวเสมือนสามแถวที่นี่ และแต่ละ v-col กระจายไปทั่ว 12 คอลัมน์

คำถามคือ — ฉันจะรับพฤติกรรมนี้จาก VuetifyJs ได้อย่างไร โชคดีที่นี่เป็นส่วนที่ง่าย เช่นเดียวกับการเขียนจำนวนคอลัมน์เสมือนลงในแอตทริบิวต์เบรกพอยต์:

...
<v-row>
  <v-col cols="12" md="6" lg="6" xl="6">
     <v-text-field
        label="Field R1C1"
     ></v-text-field>
   </v-col>
   <v-col cols="12" sm="6" md="3" lg="3" xl="3">
     <v-text-field
         label="Field R1C2"
      ></v-text-field>
   </v-col>
   <v-col cols="12" sm="6" md="3" lg="3" xl="3">
      <v-text-field
         label="Field R1C3"
      ></v-text-field>
   </v-col>
 </v-row>
...
/// @/components/ResponsiveForm.vue

มีแอตทริบิวต์เบรกพอยต์สำหรับเบรกพอยต์ดีไซน์ Material ทุกรายการ ยกเว้น xs อันนี้ครอบคลุมโดยแอตทริบิวต์เริ่มต้น cols ด้วยระบบกริด VuetifyJs คุณสามารถสร้างเลย์เอาต์ที่ตอบสนองได้ทรงพลังมากโดยไม่ต้องใช้โค้ด JavaScript เลย

ขนาดภาพที่ตอบสนอง

การตอบสนองของภาพมาจากความสามารถในการโหลดภาพขนาดและคุณภาพที่ดีที่สุดสำหรับอุปกรณ์ สำหรับสิ่งนี้ องค์ประกอบ img นำเสนอแอตทริบิวต์ scrset และ sizes มีบทความดีๆ มากมายบนเว็บ ดังนั้นฉันจะไม่เขียนบทความอื่นอีก ข้อความสำหรับผู้ใช้ VuetifyJs คือ: คุณลักษณะทั้งสองนี้มีอยู่ในองค์ประกอบ v-img เช่นกัน คุณจึงใช้สิ่งที่ตอบสนองแบบมาตรฐานพร้อมฟีเจอร์ที่ยอดเยี่ยม เช่น รูปภาพที่โหลดล่วงหน้าแบบขี้เกียจหรือแอตทริบิวต์ contain ได้

...
<v-img 
 src="http://catify.de/.../village_1264.jpg"
 lazy-src="http://catify.de/.../village_blur.jpg"
 srcset="http://catify.de/.../village_600.jpg 600w,
   http://catify.de/.../village_960.jpg 960w,
   http://catify.de/.../village_1264.jpg 1264w,
   http://catify.de/.../village_1904.jpg 1904w,
   http://catify.de/.../village_2400.jpg 2400w"
 width="100%"
></v-img>
...
/// @/components/ResponsiveImage.vue

ประเภทตอบสนอง - หรือ JavaScript

สำหรับความปรารถนาทุกประการในการตอบสนอง ที่ VuetifyJs ไม่ได้เติมเต็มในลักษณะที่ประกาศ พวกเขาให้ออบเจ็กต์เบรกพอยต์ที่ตอบสนองแก่คุณ สิ่งนี้สามารถใช้ในคุณสมบัติการคำนวณ วิธีการ หรือเกือบทุกที่ภายในบริบท VueJs:

this.$vuetify.breakpoint 

โดยจะสนับสนุนคุณด้วยข้อมูลเกี่ยวกับเบรกพอยต์ปัจจุบัน เงื่อนไข มิติ ฯลฯ คุณสามารถดู "เอกสารประกอบ" เพื่อดูข้อมูลเพิ่มเติม ในตัวอย่างนี้ ฉันใช้ออบเจ็กต์นี้ เพื่อสลับจากไอคอนต่างๆ ในแถบแอปไปเป็นไอคอนเบอร์เกอร์ เพื่อเปิดเมนูที่ซ่อนอยู่ ทำได้ง่ายๆ ด้วยโค้ดบรรทัดเดียว [1]:

<script lang="ts">
import Vue from 'vue'
import { Component } from "vue-property-decorator"
@Component
export default class ResponsiveActionIcons extends Vue {
get shrink() {
    return this.$vuetify.breakpoint.smAndDown  [1]
  }
show() {
    console.log("show menu...")
  }
}
</script>
/// @/components/ResponsiveActionIcons.vue

ตอนจบ

คุณสามารถค้นหาแหล่งที่มาของตัวอย่าง VuetifyJs ที่ตอบสนองของฉันได้ใน พื้นที่เก็บข้อมูล github ฉันหวังว่าคุณจะสนุกกับบทความนี้ กรุณาแสดงความคิดเห็นหากคุณมีคำถามใด ๆ หรือต้องการที่จะให้ข้อเสนอแนะ