vue search panel
1.0.0
Englisch | 简体中文
vue-search-panel ist eine Suchkomponente mit Vorschlägen
Link: https://theoxiong.github.io/vue-search-panel/
$ npm install vue-search-panel --save
import VueSearchPanel from 'vue-search-panel'
Vue.use(VueSearchPanel)
<script>
export default {
components: { VueSearchPanel }
}
</script>
show -Methode auf, um das Panel zu öffnen.Beispielcode:
<template>
<div class="demo-comp">
<button @click="onOpen">Open Panel</button>
<div>Selected: {{ selected }}</div>
<vue-search-panel
v-model="value"
:fetch-suggestions="getSuggestions"
@select="onSelect"
ref="searchPanel"
>
</vue-search-panel>
</div>
</template>
<script>
import VueSearchPanel from 'vue-search-panel'
const testData = [
{ key: 'test-data-1', value: 'test data 1' },
{ key: 'test-data-2', value: 'test data 2' },
{ key: 'test-data-3', value: 'test data 3' }
]
export default {
name: 'DemoComp',
data () {
return {
value: '',
selected: ''
}
},
methods: {
onOpen () {
this.$refs.searchPanel.show()
},
onSelect (item) {
this.selected = item.value
},
getSuggestions (query, cb) {
cb(query ? testData.filter(item => { return item.value.includes(query) }) : testData)
}
},
components: { VueSearchPanel }
}
</script>
Passen Sie das Element des Vorschlags anhand scoped slot an und greifen Sie über den item auf das Vorschlagsobjekt zu.
Beispielcode:
<template>
<div class="demo-comp">
<button @click="onOpen">Open Panel</button>
<div>Selected: {{ selected }}</div>
<vue-search-panel
v-model="value"
:fetch-suggestions="getSuggestions"
@select="onSelect"
ref="searchPanel"
>
<div class="demo-search-item" slot-scope="{ item }">
<span class="search-item-value">{{ item.value }}</span>
<span class="search-item-time">{{ item.time }}</span>
</div>
</vue-search-panel>
</div>
</template>
<script>
import VueSearchPanel from 'vue-search-panel'
export default {
name: 'DemoComp',
data () {
return {
value: '',
selected: '',
testData: []
}
},
mounted () {
for (let i = 0; i < 20; i++) {
this.testData.push({
key: `data-${i}`,
value: `Test data ${i + 1}`,
time: new Date(Math.random() * 1000000000000).toLocaleDateString()
})
}
},
methods: {
onOpen () {
this.$refs.searchPanel.show()
},
onSelect (item) {
this.selected = item.value
},
getSuggestions (query, cb) {
cb(query ? this.testData.filter(item => { return item.value.includes(query) }) : this.testData)
}
},
components: { VueSearchPanel }
}
</script>
<style scoped>
.demo-search-item{
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
padding: 0 20px;
}
.search-item-value{
font-size: 14px;
color: #555;
}
.search-item-time{
font-size: 12px;
color: #aaa;
width: 80px;
}
</style>
Passen Sie die Benutzeroberfläche mithilfe von Requisiten an.
Die Farbe/BorderColor/BackgroundColor/Breite/Höhe kann konfiguriert werden.
Weitere Einzelheiten finden Sie in der API.
Beispielcode:
<template>
<div class="demo-comp">
<button @click="onOpen">Open Panel</button>
<div>Selected: {{ selected }}</div>
<vue-search-panel
v-model="value"
width="640px"
height="400px"
scrollBarColor="#aaaaaa"
inputColor="#cccccc"
inputBackground="#555555"
inputBorderColor="#666666"
inputBorderColorHovering="#999999"
inputBorderColorFocused="#bbbbbb"
placeholderEffect="dark"
panelBackground="#333333"
panelBoxShadow="rgba(0, 0, 0, 0.6)"
highlightedColor="#444444"
hoveredColor="#666666"
:fetch-suggestions="getSuggestions"
@select="onSelect"
ref="searchPanel"
>
<div class="demo-search-item" slot-scope="{ item }">
<span class="search-item-value">{{ item.value }}</span>
<span class="search-item-time">{{ item.time }}</span>
</div>
</vue-search-panel>
</div>
</template>
<script>
import VueSearchPanel from 'vue-search-panel'
export default {
name: 'DemoComp',
data () {
return {
value: '',
selected: '',
testData: []
}
},
mounted () {
for (let i = 0; i < 20; i++) {
this.testData.push({
key: `data-${i}`,
value: `Test data ${i + 1}`,
time: new Date(Math.random() * 1000000000000).toLocaleDateString()
})
}
},
methods: {
onOpen () {
this.$refs.searchPanel.show()
},
onSelect (item) {
this.selected = item.value
},
getSuggestions (query, cb) {
cb(query ? this.testData.filter(item => { return item.value.includes(query) }) : this.testData)
}
},
components: { VueSearchPanel }
}
</script>
<style scoped>
.demo-search-item{
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
padding: 0 20px;
}
.search-item-value{
font-size: 14px;
color: #999;
}
.search-item-time{
font-size: 12px;
color: #777;
width: 80px;
}
</style>
fixed wird für die Position des Panels verwendet. Das Panel wird relativ zum Ansichtsfenster positioniert, wenn der Wert true ist, und das Panel wird entsprechend dem normalen Fluss des Dokuments positioniert, wenn der Wert false ist.placement wird verwendet, um die Platzierung des Panels relativ zum Ansichtsfenster anzugeben. Der optionale Wert ist top/bottom/left/rightDie Platzierungsstütze wird ignoriert, wenn der fiexd-Wert falsch ist
Beispielcode:
<template>
<div class="demo-comp">
<button @click="onOpen('top')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at top</button>
<button @click="onOpen('bottom')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at bottom</button>
<button @click="onOpen('left')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at left</button>
<button @click="onOpen('right')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at right</button>
<button @click="onOpen('inner')" :disabled="disabled" :class="{'is-disabled': disabled}">Open at inner</button>
<div>Selected: {{ selected }}</div>
<vue-search-panel
v-model="value"
:placement="placement"
:fixed="fixed"
:fetch-suggestions="getSuggestions"
@open="onPanelOpen"
@closed="onPanelClosed"
@select="onSelect"
ref="searchPanel"
>
</vue-search-panel>
</div>
</template>
<script>
import VueSearchPanel from 'vue-search-panel'
const testData = [
{ key: 'test-data-1', value: 'test data 1' },
{ key: 'test-data-2', value: 'test data 2' },
{ key: 'test-data-3', value: 'test data 3' }
]
export default {
name: 'DemoComp',
data () {
return {
value: '',
selected: '',
placement: 'top',
fixed: true,
disabled: false
}
},
methods: {
onOpen (position) {
if (position === 'inner') {
this.fixed = false
} else {
this.fixed = true
this.placement = position
}
this.$refs.searchPanel.show()
},
onPanelOpen () {
this.disabled = true
},
onPanelClosed () {
this.disabled = false
},
onSelect (item) {
this.selected = item.value
},
getSuggestions (query, cb) {
cb(query ? testData.filter(item => { return item.value.includes(query) }) : testData)
}
},
components: { VueSearchPanel }
}
</script>
<style scoped>
.demo-comp{
margin: 20px;
width: 600px;
}
.is-disabled,
.is-disabled:active,
.is-disabled:focus,
.is-disabled:hover{
cursor:not-allowed;
background-color:#e4e4ee;
}
</style>
Es könnte auf ein multifunktionales Panel erweitert werden, z. B. Suche/Zuletzt/Befehl, wie VsCode
Live-Kuppel:https://theoxiong.github.io/vue-search-panel/
Für Entwickler:
npm install
npm run dev
| Parameter | Beschreibung | Typ | optionaler Wert | Standardwert |
|---|---|---|---|---|
| Wert / V-Modell | Zwei-Wege-Bindungswert | Zeichenfolge | — | — |
| Platzhalter | der Platzhalter der Eingabe | Zeichenfolge | — | — |
| Breite | die Breite des Panels | Zeichenfolge | — | 50 % |
| Höhe | die Höhe des Panels | Zeichenfolge | — | 300px |
| Spitze | der Rand oben im Panel | Zeichenfolge | — | 0px |
| unten | der marginBottom des Panels | Zeichenfolge | — | 0px |
| links | der Rand links vom Panel | Zeichenfolge | — | 0px |
| Rechts | der marginRight des Panels | Zeichenfolge | — | 0px |
| behoben | ob relativ zum Ansichtsfenster positioniert | Boolescher Wert | — | WAHR |
| Platzierung | Angabe der Platzierung des Panels relativ zum Ansichtsfenster (wird ignoriert, wenn der fiexd-Wert falsch ist) | Zeichenfolge | oben/unten/links/rechts | Spitze |
| fetchSuggestions | eine Methode zum Abrufen von Eingabevorschlägen. Wenn Vorschläge fertig sind, rufen Sie callback(data:[]) auf, um sie zurückzugeben | Funktion(queryString, cb) | — | — |
| closeOnPressEscape | Ob Sie das Bedienfeld schließen möchten, drücken Sie ESC | Boolescher Wert | — | WAHR |
| closeOnSelect | ob Panel bei Auswahl schließen | Boolescher Wert | — | WAHR |
| clearOnClose | ob der Eingabewert beim Schließen des Panels gelöscht wird | Boolescher Wert | — | WAHR |
| selectWhenUnmatched | ob bei der Eingabe ein Select-Ereignis ausgegeben werden soll, wenn keine Übereinstimmung vorliegt | Boolescher Wert | — | FALSCH |
| triggerOnFocus | ob beim Eingabefokus Vorschläge angezeigt werden | Boolescher Wert | — | WAHR |
| HighlightFirstItem | ob das erste Element hervorgehoben werden soll | Boolescher Wert | — | WAHR |
| valueColor | die Farbe des Vorschlagselements (wenn kein Bereichsslot vorhanden ist) | Zeichenfolge | — | #606266 |
| scrollBarColor | die Farbe der Bildlaufleiste | Zeichenfolge | — | #DFDFDF |
| scrollBarOpacity | die Deckkraft der Bildlaufleiste | Nummer | — | 0,8 |
| PanelHintergrund | die Hintergrundfarbe des Panels | Zeichenfolge | — | #FFFFFF |
| panelBorderRadius | der Randradius des Panels | Zeichenfolge | — | 0px |
| panelBoxShadow | die BoxShadow-Farbe des Panels | Zeichenfolge | — | rgba(0, 0, 0, 0,3) |
| hervorgehobene Farbe | Die Farbe des Vorschlagselements, wenn es hervorgehoben ist | Zeichenfolge | — | #F5F7FA |
| hoveredColor | Die Farbe des Vorschlagselements, wenn der Mauszeiger darüber bewegt wird | Zeichenfolge | — | #C5C7CA |
| Platzhaltereffekt | die Farbe des Platzhaltertextes | Zeichenfolge | hell/dunkel | Licht |
| Eingabefarbe | die Farbe des Eingabetextes | Zeichenfolge | — | #606266 |
| EingabeHintergrund | die Hintergrundfarbe des Eingabefeldes | Zeichenfolge | — | #FFFFFF |
| inputBorderColor | die Rahmenfarbe des Eingabefeldes | Zeichenfolge | — | #DCDFE6 |
| inputBorderColorHovering | Die Rahmenfarbe des Eingabefelds, wenn der Mauszeiger darüber bewegt wird | Zeichenfolge | — | #B0B3BB |
| inputBorderColorFocused | die Rahmenfarbe des Eingabefelds, wenn es fokussiert ist | Zeichenfolge | — | #575F96 |
| Methodenname | Beschreibung | Parameter |
|---|---|---|
| zeigen | Öffne das Panel | — |
| schließen | Schließen Sie das Panel | — |
| focusInput | Fokussieren Sie das Eingabeelement | — |
| getInputElement | Holen Sie sich das Eingabeelement | — |
| Veranstaltungsname | Beschreibung | Parameter |
|---|---|---|
| offen | Wird ausgelöst, wenn das Bedienfeld geöffnet wird | — |
| geöffnet | Wird ausgelöst, wenn die Animation zum Öffnen des Panels endet | — |
| schließen | Wird ausgelöst, wenn das Panel geschlossen wird | — |
| geschlossen | Wird ausgelöst, wenn die Animation zum Schließen des Panels endet | — |
| Fokus | Wird ausgelöst, wenn das Eingabeelement fokussiert ist | — |
| verwischen | Wird ausgelöst, wenn das Eingabeelement unscharf ist | — |
| wählen | Wird ausgelöst, wenn auf einen Vorschlag geklickt wird | Vorschlag angeklickt wird |
Benutzerdefinierter Inhalt für Eingabevorschläge, der Scope-Parameter ist { item }
| Name | Beschreibung |
|---|---|
| auf-Artikel | Inhalte oben auf den Vorschlägen |
