開始進入PrimeVue 元件撰寫,這次的目標是建立基本的表單元件。
Form 表單是應用程式中最常見的互動介面之一,特別是在用戶輸入資料的情況下,
例如註冊頁面、登入畫面或是資料提交等功能。
我們先看看元件使用~
The best preparation for tomorrow is doing your best today.
對明天做好的準備就是今天做到最好!
nuxt.config.ts設定
今日探索了 Form 元件的基本寫法,從 InputText 到 Switch Button ,
先引入相關元件。
export default defineNuxtConfig({
primevue: {
components: {
prefix: "p-",
include: [
"InputText",
"InputSwitch",
]
},
},
plugins: [{ src: '~/plugins/primevue.js', ssr: false }],
});
InputText input欄位
<template>
<div class="card flex justify-center">
<InputText type="text" v-model="value" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const value = ref(null);
</script>
2.驗證
當使用者輸入資料時,加入驗證邏輯來檢查輸入是否符合要求。
-透過 v-show 來動態顯示錯誤訊息。
-使用 watch 監聽輸入框的值變化。
<template>
<div class="card flex justify-center">
<InputText type="text" v-model="input.value" />
<div v-show="input.valid">Error Messafe</div>
</div>
</template>
<script setup>
import { ref,watch } from 'vue';
interfase InputType{
value: String,
valid: Boolean
}
const input = ref<InputType>({
value: '',
valid: true
})
watch(
()=>nput.value.value,
(newValue)=>{
nput.value.value =newValue === ""
}
)
</script>
有了基本 input 元件寫法,
官網還有其他 input 搭配寫法,請詳看官網。
SwitchButton 切換按鈕
接下來介紹的切換按鈕。通常用於在兩種狀態之間切換,例如開關通知、啟用或停用功能。
通過 v-model 綁定狀態,可以實現簡單的開關功能。
<template>
<div class="card flex justify-content-center">
<InputSwitch v-model="checked" />
</div>
</template>
<script setup>
import { ref } from 'vue';
const checked = ref(false);
</script>
每個元件都能讓你的表單更加靈活且功能豐富。希望這些元件對你接下來的專案有所幫助!明天將進入選單系列,敬請期待!
繼續加油,明天見!