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

vue-ค้นหาอินพุต

องค์ประกอบอินพุตการค้นหา Vue.js 3 ซึ่งได้รับแรงบันดาลใจจากอินพุตการค้นหาทั่วโลกของ Storybook และ GitHub

ส่วนประกอบ SearchInput แสดงอินพุตการค้นหาพร้อมคุณสมบัติเพิ่มเติมบางอย่างในตัว

คุณสมบัติ:

  • มุ่งเน้น ไปที่อินพุตการค้นหาได้ตลอดเวลาโดยกดปุ่ม / บนแป้นพิมพ์
  • รวมสไตล์ CSS เริ่มต้น แต่ยังง่ายต่อการนำสไตล์ของคุณเองมาด้วย
  • ไอคอนปรับแต่งได้อย่างสมบูรณ์ผ่าน slots
  • แสดงไอคอน x ที่ด้านขวาของช่องค้นหา ซึ่งใช้สำหรับ ล้าง ข้อความเมื่อมีค่าที่พิมพ์อยู่ข้างใน
  • ข้อความค้นหาจะถูกล้างโดยการกดปุ่ม esc เมื่ออินพุตการค้นหามีโฟกัส (กำหนดค่าได้)

สิ่งสำคัญ: ขอแนะนำให้คุณรวมส่วนประกอบ SearchInput เพียงครั้งเดียว ในแต่ละหน้า
ในกรณีที่มีองค์ประกอบ SearchInput หลายองค์ประกอบ องค์ประกอบแรกที่แสดงจะมีความสำคัญเหนือกว่าการกดปุ่ม /

สาธิตพร้อมตัวอย่าง

https://vue-search-input.vercel.app

การติดตั้ง 

npm i vue-search-input

การใช้งาน 

 < template >
  < SearchInput v-model =" searchVal " />
</ template >

< script >
import { ref } from 'vue'
import SearchInput from 'vue-search-input'
// Optionally import default styling
import 'vue-search-input/dist/styles.css'

const searchVal = ref ( '' )

export default {
  components : {
    SearchInput
  } ,
  setup ( ) {
    return {
      searchVal
    }
  }
}
</ script >

จัดแต่งทรงผม

vue-search-input รวมถึงสไตล์เริ่มต้น ( dist/styles.css ) โดยที่คุณสามารถใช้เป็นฐานในการสร้าง CSS ของคุณเอง องค์ประกอบทั้งหมดของส่วนประกอบอยู่ภายใน div ซึ่งทำหน้าที่เป็น wrapper สำหรับไอคอนและอินพุต คลาสเริ่มต้นสำหรับ div wrapper คือ search-input-wrapper คุณสามารถแทนที่คลาสนั้นได้โดยการระบุคลาสให้กับองค์ประกอบ SearchInput

คลาสและสไตล์ที่เชื่อมโยงกับองค์ประกอบ SearchInput จะถูกเพิ่มลงใน wrapper div

กิจกรรม

เหตุการณ์ที่เชื่อมโยงกับองค์ประกอบ SearchInput จะถูกส่งผ่านไปยังองค์ประกอบ input

ชื่อ คำอธิบาย มูลค่าที่ส่งคืน
อัปเดต: modelValue โมเดลที่ถูกผูกไว้ที่อัปเดต string

อุปกรณ์ประกอบฉาก

ชื่อ พิมพ์ คำอธิบาย ค่าเริ่มต้น
พิมพ์ เชือก ประเภทของช่องป้อนข้อมูล ประเภทที่อนุญาตคือ search และ text search
modelValue (รุ่น v) เชือก ค่าของอินพุต ''
กระดาษห่อClass เชือก คลาส CSS เริ่มต้นของ div wrapper search-input-wrapper
ค้นหาไอคอน บูลีน แสดงไอคอน "ค้นหา" จริง
ไอคอนทางลัด บูลีน แสดงไอคอน "ทางลัด" จริง
ไอคอนที่ชัดเจน บูลีน แสดงไอคอน "ข้อความที่ชัดเจน" จริง
ซ่อนทางลัด IconOnBlur บูลีน ว่าจะซ่อนไอคอนทางลัดเมื่ออินพุตสูญเสียโฟกัสหรือไม่ จริง
clearOnEsc บูลีน ไม่ว่าจะล้างช่องป้อนข้อมูลเมื่อกดปุ่ม esc หรือไม่ จริง
เบลอOnEsc บูลีน ว่าจะดึงโฟกัสออกจากช่องป้อนข้อมูลหรือไม่เมื่อกดปุ่ม esc จริง
เลือกOnFocus บูลีน เลือกข้อความอินพุตเมื่อ / กดปุ่ม จริง
ทางลัดListenerEnabled บูลีน เปิดใช้งานฟังก์ชันสำหรับการ / กดปุ่ม จริง
ปุ่มลัด เชือก key สำหรับฟังก์ชันทางลัด /

สล็อต

vue-search-input มีไอคอนเริ่มต้นบางส่วน แต่คุณยังสามารถปรับแต่งให้เหมาะกับความต้องการของคุณโดยใช้ slots ที่มีอยู่

ชื่อ คำอธิบาย เนื้อหาเริ่มต้น
ค้นหาไอคอน ช่องสำหรับไอคอนค้นหา <i class="search-icon search"></i>
ไอคอนทางลัด ช่องสำหรับไอคอนทางลัด <i class="search-icon shortcut" title='Press "/" to search'></i>
ไอคอนที่ชัดเจน ช่องสำหรับไอคอนที่ชัดเจน
{ clear: () => void } ฟังก์ชันที่ล้างอินพุต		 <button class="search-icon clear" aria-label="Clear" @mousedown="clear" @keydown.space.enter="clear"></button>
ผนวก เพิ่มรายการภายใน wrapper อินพุต ก่อนไอคอนค้นหา -
ผนวก-ภายใน เพิ่มรายการภายใน wrapper อินพุต หลังไอคอนค้นหา -
เติมหน้า เพิ่มรายการภายใน wrapper อินพุตโดยตรงหลังจากองค์ประกอบอินพุต -
เติมหน้าด้านนอก เพิ่มรายการภายใน wrapper อินพุตหลังไอคอนล้างโดยตรง -
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด