Tính năng
Bằng việc sử dụng gói này, bạn có thể hiển thị một mảng đối tượng trên danh sách tùy chọn chọn, chọn một đối tượng cụ thể và hiển thị tên hiển thị của nó.
Props —– v-model , data và displayName là BẮT BUỘC
_ placeHolder_ – Tiêu đề mặc định là Chọn Mục , Chuyển một chuỗi bạn thích để hiển thị ban đầu, chẳng hạn như ‘Chọn công ty’, ‘Chọn người dùng’, vv, sau đó sau khi bạn chọn một mục, tên hiển thị của mục đã chọn sẽ được hiển thị.
_ width – Theo mặc định, chiều rộng được thừa kế nhưng nếu bạn muốn cung cấp một giá trị cụ thể, hãy chuyển một số bạn thích. Chú ý_ – đơn vị đo sẽ là PX – pixel.
_ maxHeight – Theo mặc định, chiều cao tối đa sẽ là 250px , nhưng nếu bạn muốn cung cấp một giá trị cụ thể, hãy chuyển một số bạn thích. Chú ý_ – đơn vị đo sẽ là PX – pixel.
_ inputOutlineColor – Theo mặc định, màu viền nhập khi tập trung sẽ là các sắc thái của màu xanh lá cây, nhưng nếu bạn muốn nó trông khác biệt hãy chuyển _tên màu , mã hex hoặc giá trị rgba bạn chọn vào dạng chuỗi như inputOutlineColor=”‘red'”.
_ inputBorderColor – Theo mặc định, màu viền nhập sẽ là xám, nhưng nếu bạn muốn nó trông khác biệt hãy chuyển _tên màu , mã hex hoặc giá trị rgba bạn chọn vào dạng chuỗi như inputBorderColor=”‘yellow'”.
_ selected – Nếu bạn muốn chuyển một giá trị mặc định để hiển thị ban đầu, bạn có thể chuyển một đối tượng vào thuộc tính _selected như
_ data – Để hiển thị các mục của bạn trên danh sách, chỉ cần chuyển mảng các đối tượng, Chú ý : chỉ chuyển mảng các đối tượng.
Cảm ơn bạn!
_ v-model – Chuyển một biến để lưu trữ đối tượng đã chọn. Ví dụ, nếu bạn muốn lưu trữ đối tượng hoặc mục đã chọn vào một biến như này const selectedItem = ref({}) hoặc const selectedItem = reactive({}) , chỉ cần chuyển selectedItem vào v-model như v-model=”selectedItem”
_ displayName – Chuyển một prop dưới dạng chuỗi vào displayName ví dụ displayName=”‘name'” , trong trường hợp này tên nên là một trường bên trong đối tượng bạn đã chuyển vào mảng dữ liệu, ví dụ như data = [{id: 1, name: abc, age: 50}, {id: 2, name: def, age: 25}] , Vì vậy, trên đối tượng này, ngoại trừ _id , name và age , nếu bạn viết sai chính tả hoặc chuyển một chuỗi không phải là khóa(trường) của đối tượng trong mảng, gói sẽ không hiển thị gì trong danh sách tùy chọn.
Sử dụng
Bạn nên nhập gói này và kiểu dáng của nó toàn cầu trong main.js, cũng như bạn nên sử dụng nó trong App, như sau
import SelectOption from 'vue3-select-option-search'
import "vue3-select-option-search/dist/style.css"
createApp(App).use(SelectOption).mount('#app')
Hoặc
import SelectOption from 'vue3-select-option-search'
import "vue3-select-option-search/dist/style.css"
const app = createApp(App);
app.use(SelectOption);
app.mount('#app')
<script setup>
import { ref } from 'vue';
const data = [
{id: 1, name: 'Ram'},
{id: 2, name: 'Shyam'},
{id: 3, name: 'Hari'},
{id: 4, name: 'Krishna'},
{id: 5, name: 'Balram'},
{id: 6, name: 'Arjun'},
]
const selectedItem = ref({})
</script>
<template>
<main>
<select-option
:placeHolder="'select item'"
:width="500"
v-model="selectedItem"
:maxHeight="400"
:inputOutlineColor="'#86efac'"
:data="data"
:inputBorderColor="'gray'"
:displayName="'name'"
:selected="data[0]"
/>
<p v-if="!!selectedItem.name">{{ selectedItem.name }}</p>
</main>
</template>
<style scoped>
</style>
Thông tin tải xuống:
Tác giả: manish-nepal
Nguồn: https://github.com/manish-nepal/vue3-select-option-searchable