Lily Design System™

មេរៀន Vue

សមាសភាគឯកសារតែមួយ Vue 3 ជាមួយលក្ខណៈសម្បត្តិមានប្រភេទ defineModel ការចងពីរទិស និង v-bind="$attrs" ការឆ្លងកាត់។

អ្វីដែលអ្នកនឹងសាងសង់

ទម្រង់ទំនាក់ទំនងតូចមួយ — វាលបញ្ចូលដែលមានស្លាក ប៊ូតុងដាក់ស្នើ v-model ការចង អាកប្បកិរិយាក្តារចុច និងកម្មវិធីអានអេក្រង់ពិតប្រាកដ — ដំបូងទទេស្អាត បន្ទាប់មកមានរចនាប័ទ្ម ក្នុងរយៈពេលប្រហែល ១០ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

អ្នកត្រូវការ git, Node 22 ឬថ្មីជាងនេះ និង pnpm 10 ឬថ្មីជាងនេះ។ គម្រោង Vue 3 ណាក៏បាន — Nuxt, Vite ឬ Vue ធម្មតា។

ជំហាន ១ — យកកូដ

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-headless
pnpm install
pnpm test        # vitest + @testing-library/vue
pnpm run storybook   # browse all 571 components

សមាសភាគជាឯកសារសំប៉ែតក្នុង components/ — Button.vue, TextInput.vue — នីមួយៗមានតេស្ត story និងឯកសាររបស់វានៅក្បែរ។ ចម្លងឯកសារដែលអ្នកត្រូវការ ឬ vendor ឃ្លាំង។

ជំហាន ២ — សមាសភាគដំបូងរបស់អ្នក

<script setup>
import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<template>
  <Button @click="save">Save</Button>
</template>

បង្ហាញ <button class="button" type="button">។ លក្ខណៈសម្បត្តិត្រូវគ្នានឹងក្របខណ្ឌផ្សេងទៀត៖ type, disabled, pressed, labelបូកការឆ្លងកាត់គុណលក្ខណៈសម្រាប់អ្វីៗផ្សេងទៀត។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

<script setup>
import { ref } from "vue";
import Form from ".../components/Form.vue";
import Field from ".../components/Field.vue";
import TextInput from ".../components/TextInput.vue";
import Button from ".../components/Button.vue";

const name = ref("");
</script>

<template>
  <Form @submit="handleSubmit">
    <Field label="Full name" required>
      <TextInput id="name" label="Full name" v-model="name" required />
    </Field>
    <Button type="submit">Save</Button>
  </Form>
</template>

Field យកការមើលឃើញ label ជាលក្ខណៈសម្បត្តិផ្ទាល់ខ្លួន ជាជាងសមាសភាគស្លាកដែលជាប់គ្នា — ឆ្លងវាម្តងនៅលើ Fieldនិង TextInputដែលត្រូវគ្នានៅលើ label ផ្តល់ឈ្មោះដែលអាចចូលប្រើបាន។

បានផ្ទៀងផ្ទាត់ 2026-08-29៖ សេចក្តីព្រាងដំបូងបានដាក់សមាសភាគដាច់ដោយឡែក Label ខាងក្នុង Fieldដែលបង្ហាញ ពីរ ស្លាក (មួយទទេ) ពីព្រោះ Field បានបង្ហាញរបស់ខ្លួនរួចហើយពី label លក្ខណៈសម្បត្តិ — បានរកឃើញដោយចងក្រងកំណាត់ពិតប្រាកដ។ ផ្លូវទម្រង់ទំនាក់ទំនងផ្សំ ជាលំនាំដូចគ្នា ដែលធ្វើតេស្តដោយ e2e និង axe ពិតប្រាកដ។

TextInput ប្រើ defineModelដូច្នេះធម្មតា v-model ដំណើរការចេញពីប្រអប់។

ពិនិត្យការងាររបស់អ្នក៖ ដំណើរការកម្មវិធី ហើយទម្រង់មើលទៅធម្មតា — ដូចដែលបានគ្រោងទុក៖ រចនាប័ទ្មនៅខាងមុខ។ ចុច Tab៖ ការផ្តោតផ្លាស់ទីតាមការគ្រប់គ្រងនីមួយៗ ស្លាកត្រូវបានប្រកាស ហើយការដាក់ស្នើដំណើរការ។ អាកប្បកិរិយាបានចប់; រូបរាងជារបស់អ្នក ហើយជាជំហានបន្ទាប់។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

ដាក់រចនាប័ទ្ម class hook — .button, .text-input, .label, .field — ក្នុងសន្លឹករចនាប័ទ្មរបស់អ្នក ឬភ្ជាប់ស្បែករួចជាស្រេចក្នុង index.html / nuxt.config: 

<link rel="stylesheet" href="/themes/nord.css" />

ជំហាន ៥ — មើលអ្វីៗទាំងអស់ដំណើរការ

កម្មវិធីគំរូ Nuxt ជាកាតាឡុកពេញលេញដែលមានរចនាប័ទ្ម និងបង្ហាញ ជាមួយ Playwright e2e និង axe-core baseline៖ 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev

ជំហានបន្ទាប់

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។