KUNGFU TECH

0
0
Lập trình
NM
Nguyen Minhtamdehmivor

Ngày 22 - Tạo Component Cảnh Báo trong Vue, Angular, Svelte

Đăng vào 1 tháng trước

• 6 phút đọc

Chủ đề:

#angular#svelte#web#vue

Ngày 22 - Tạo Component Cảnh Báo Phần 1: Danh Sách Cảnh Báo và Component Cảnh Báo

Mục Lục

Giới thiệu

Trong ngày 22, tôi đã bắt đầu làm bài tập tạo Component Cảnh Báo trong Vue 3, Angular 20 và Svelte 5. Component Cảnh Báo sử dụng component cảnh báo từ DaisyUI và các lớp utility của TailwindCSS để tạo kiểu. Tôi cũng đã học về cách liên kết hai chiều giữa các component bằng defineModel trong Vue 3.5+. Trong Svelte 5, nó sử dụng $bindable để truyền dữ liệu từ component con đến component cha. Còn trong Angular, mô hình model, một tín hiệu có thể ghi, cho phép dữ liệu đầu vào đi từ cha đến con và ngược lại.

Bài tập nhỏ này sẽ được chia thành bốn phần. Phần 3 và 4 là bổ sung vì tôi muốn có thể thay đổi kiểu cảnh báo và mở lại các cảnh báo đã đóng.

Cài đặt

Vue 3 và SvelteKit

Để cài đặt DaisyUI và TailwindCSS, hãy chạy lệnh sau trong terminal:

bash Copy 
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

Sau đó, thêm Tailwind CSS vào Vite:

javascript Copy 
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), ...other plugins...],
});

Kích hoạt plugin DaisyUI trong CSS:

css Copy 
@import "tailwindcss";
@plugin "daisyui";

Ứng dụng Angular 20

Để cài đặt cho Angular:

bash Copy 
npm install daisyui@latest tailwindcss@latest @tailwindcss/postcss@latest postcss@latest --force

Cấu hình tệp:

json Copy 
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Kích hoạt plugin DaisyUI trong CSS:

css Copy 
@import "tailwindcss";
@plugin "daisyui";

Component Cảnh Báo

Sao Chép HTML của các Cảnh Báo vào Component Danh Sách Cảnh Báo

Tôi đã sao chép HTML của các cảnh báo như thông tin, thành công, cảnh báo và lỗi từ DaisyUI vào Component Danh Sách Cảnh Báo.

html Copy 
<template>
  <div role="alert" class="alert alert-info">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <span>Có bản cập nhật phần mềm mới.</span>
  </div>
  <div role="alert" class="alert alert-success">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Đơn hàng của bạn đã được xác nhận!</span>
  </div>
  <div role="alert" class="alert alert-warning">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <span>Cảnh báo: Địa chỉ email không hợp lệ!</span>
  </div>
  <div role="alert" class="alert alert-error">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span>Lỗi! Nhiệm vụ đã thất bại một cách thành công.</span>
  </div>
</template>

Chúng ta cần làm cho Component Cảnh Báo có thể tái sử dụng cho các loại, biểu tượng và văn bản khác nhau. Do đó, loại, biểu tượng và văn bản phải được cấu hình.

Component Cảnh Báo

Tạo Props

javascript Copy 
<script setup lang="ts">
    type Prop = {
        type: string;
    }

    const { type } = defineProps<Prop>()
</script>

Tính Toán CSS Classes của Cảnh Báo

javascript Copy 
<script setup lang="ts">
    const alertColor = computed(() => ({
        info: 'alert-info',
        warning: 'alert-warning',
        error: 'alert-error',
        success: 'alert-success'
    }[type]))   

    const alertClasses = computed(() => `alert ${alertColor.value}`)
</script>

Hiển Thị Biểu Tượng Tùy Thuộc Vào Loại

Sử dụng chỉ thị v-if và v-else-if để hiển thị các biểu tượng SVG theo loại.

html Copy 
<div role="alert" :class="alertClasses">
    <svg v-if="type == 'info'" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="h-6 w-6 shrink-0 stroke-current">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
    </svg>
    <svg v-else-if="type == 'success'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <svg v-else-if="type == 'warning'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
    </svg>
    <svg v-else-if="type == 'error'"  xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
</div>

Sử Dụng Slot Để Hiển Thị Văn Bản

html Copy 
<div role="alert" :class="alertClasses">
    <span><slot /></span>
</div>

Thêm Nút Đóng vào Component Cảnh Báo

Ứng dụng Vue 3

Thêm một nút Đóng vào component Alert để đóng component và phát ra sự kiện cho component AlertList.

javascript Copy 
const emits = defineEmits<{
    (e: 'closed', type: string): void
}>()

Định nghĩa một sự kiện closed phát ra loại cảnh báo khi đóng:

javascript Copy 
const closed = ref(false)

function closeAlert() {
    closed.value = true
    emits('closed', type)
}
html Copy 
<template>
  <div role="alert" :class="alertClasses" v-if="!closed">
    <div>
        <!-- mã HTML trước đó -->
        <button class="btn btn-sm btn-primary" alt="Nút Đóng" @click="closeAlert">X</button>
    </div>
  </div>
</template>

Khi nút được nhấn, hàm closeAlert sẽ đặt biến closed thành true và phát ra sự kiện closed cho component cha.

Component Danh Sách Cảnh Báo

Ứng dụng Vue 3

Nhập component Alert và hiển thị các cảnh báo thông tin, thành công, cảnh báo và lỗi trong một vòng lặp:

javascript Copy 
<script setup lang="ts">
import Alert from './Alert.vue'

const props = defineProps<{
  alerts: { type: string; message: string }[]
}>()

function handleClosed(type: string) {
   console.log(type)
} 
</script>
html Copy 
<template>
  <h2>Component Cảnh Báo (Phiên bản Vue)</h2>

  <Alert v-for="{ type, message } in alerts"
    class="mb-[0.75rem]"
    :key="type"
    :type="type"
    @closed="handleClosed">
    {{  message }}
  </Alert>
</template>

Khi sự kiện closed xảy ra, hàm handleClosed sẽ ghi lại loại cảnh báo.

Kho Lưu Trữ Github

Trang Github

Tài Nguyên

Kết luận

Chúng ta đã thành công tạo danh sách cảnh báo trong các framework Vue, Svelte và Angular. Hãy tiếp tục theo dõi để cập nhật các phần tiếp theo của bài hướng dẫn này!

Nội dung bài viết

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào