หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

vue-เลือก

ทุกสิ่งที่คุณต้องการให้องค์ประกอบ HTML <select> สามารถทำได้ ถูกรวมไว้ในคอมโพเนนต์ Vue ที่มีน้ำหนักเบา ไม่มีการพึ่งพา และขยายได้

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

  • การแท็ก
  • การกรอง/การค้นหา
  • การสนับสนุน Vuex
  • การสนับสนุนอาแจ็กซ์
  • การสนับสนุน SSR
  • สามารถเข้าถึงได้
  • ~20kb รวม / ~5kb CSS / ~15kb JS
  • เลือกตัวเลือกเดียว/หลายตัว
  • ปรับแต่งได้ด้วยสล็อตและตัวแปร SCSS
  • การพึ่งพาเป็นศูนย์

เอกสารประกอบ

เอกสารและตัวอย่างฉบับสมบูรณ์มีอยู่ที่ https://vue-select.org

  • เอกสาร API
  • เทมเพลต Vue 2 CodePen
  • เทมเพลต Vue 3 CodePen

สปอนเซอร์ ?

ต้องใช้ความพยายามอย่างมากในการรักษาโครงการนี้ หากช่วยให้คุณประหยัดเวลาในการพัฒนาได้ โปรดพิจารณาสนับสนุนโครงการกับผู้สนับสนุน GitHub!

ขอขอบคุณผู้สนับสนุนและผู้มีส่วนร่วมที่ทำให้ Vue Select เป็นไปได้!

เริ่มต้นเลย

Vue 3 / Vue เลือก 4.x-beta

การสนับสนุน Vue 3 อยู่ในช่อง beta : vue-select@beta และจะกลายเป็นค่าเริ่มต้นใหม่เมื่อ v4 เปิดตัว ดู #1579 สำหรับรายละเอียดเพิ่มเติม!

ติดตั้ง: 

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

จากนั้น นำเข้าและลงทะเบียนส่วนประกอบ: 

# main . ts or main . js

import { createApp } from "vue" ;
import App from "./App.vue" ;

import { VueSelect } from "vue-select" ;

createApp ( App )
    . component ( "v-select" , VueSelect )
    . mount ( "#app" ) ;

ส่วนประกอบนั้นไม่มี CSS ใด ๆ คุณจะต้องรวมมันแยกต่างหากใน Component.vue ของคุณ: 

 < style >
@import " vue-select/dist/vue-select.css " ;
</ style >

วิว 2 / วิวเลือก 3.x

ติดตั้ง: 

yarn add vue-select

# or use npm

npm install vue-select

จากนั้น นำเข้าและลงทะเบียนส่วนประกอบ: 

 import Vue from "vue" ;
import vSelect from "vue-select" ;

Vue . component ( "v-select" , vSelect ) ;

ส่วนประกอบนั้นไม่มี CSS ใด ๆ คุณจะต้องรวมไว้แยกต่างหาก: 

 import "vue-select/dist/vue-select.css" ;

คุณยังสามารถรวม vue-select ในเบราว์เซอร์ได้โดยตรง ตรวจสอบเอกสารสำหรับการโหลดจาก CDN..

ใบอนุญาต

เอ็มไอที

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด