Téléchargement vue search panel - vue search panel Téléchargement du code source

panneau de recherche vue

Anglais | 简体中文

vue-search-panel est un composant de recherche avec des suggestions

Contenu

Caractéristiques
Exemple
Installer
Usage
API
Référence

Caractéristiques

Filtrer les suggestions en fonction du mot saisi, prise en charge des règles personnalisées
Personnaliser l'élément de la suggestion par emplacement
Prise en charge de l'interface utilisateur personnalisée
Position du panneau de configuration de prise en charge (haut/bas/gauche/droite/statique)
Étendu au panneau multifonctionnel, comme VsCode

Exemple

Démo en direct

Lien : https://theoxiong.github.io/vue-search-panel/

Interface utilisateur par défaut

Interface utilisateur personnalisée

Personnaliser l'interface utilisateur

Installer

 $   npm install vue-search-panel --save

Usage

Module d'importation

 import VueSearchPanel from 'vue-search-panel'

Inscription

Inscription globale

 Vue.use(VueSearchPanel)

Inscription locale

 <script>
export default {
  components: { VueSearchPanel }
}
</script>

Utilisation de base

Appel de la méthode show pour ouvrir le panneau.
Cliquez à l'extérieur ou appuyez sur ESC pour fermer le panneau.

Exemple de code :

 <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>

Suggestions personnalisées

Personnalisez l'élément de suggestion par scoped slot , accédez à l'objet de suggestion via la clé item .

Exemple de code :

 <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>

Interface utilisateur personnalisée

Personnalisez l'interface utilisateur par des accessoires.
La couleur/borderColor/backgroundColor/width/height peut être configurée.
Pour plus de détails, consultez l'API.

Exemple de code :

 <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>

position du panneau de configuration

L'accessoire fixed utilisé pour la position du panneau, le panneau est positionné par rapport à la fenêtre lorsque la valeur est true et le panneau est positionné selon le flux normal du document lorsque la valeur est false .
L'accessoire de placement est utilisé pour spécifier le placement du panneau par rapport à la fenêtre, la valeur facultative est top/bottom/left/right

L'accessoire de placement est ignoré lorsque la valeur fiexd est fausse

Exemple de code :

 <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>

Extension

Il pourrait être étendu à un panneau multifonctionnel, tel que recherche/récemment/commande, comme VsCode
Dôme en direct：https://theoxiong.github.io/vue-search-panel/

Pour les développeurs :

 npm install
npm run dev

API

Attributs

paramètre	description	taper	valeur facultative	valeur par défaut
valeur / modèle v	valeur de liaison bidirectionnelle	Chaîne	—	—
espace réservé	l'espace réservé de l'entrée	Chaîne	—	—
largeur	la largeur du panneau	Chaîne	—	50%
hauteur	la hauteur du panneau	Chaîne	—	300px
haut	la margeHaut du panneau	Chaîne	—	0px
bas	la margeBas du panneau	Chaîne	—	0px
gauche	la marge à gauche du panneau	Chaîne	—	0px
droite	la margeDroite du panneau	Chaîne	—	0px
fixé	qu'il soit positionné par rapport à la fenêtre	Booléen	—	vrai
placement	spécifiant l'emplacement du panneau par rapport à la fenêtre (ignoré lorsque la valeur fiexd est fausse)	Chaîne	haut/bas/gauche/droite	haut
récupérerSuggestions	une méthode pour récupérer des suggestions d’entrée. lorsque les suggestions sont prêtes, invoquez callback(data:[]) pour les renvoyer	Fonction (queryString, cb)	—	—
fermerOnPressEscape	si vous fermez le panneau en appuyant sur ESC	Booléen	—	vrai
fermerSurSélectionner	si fermer le panneau lors de la sélection	Booléen	—	vrai
effacerOnFermer	si la valeur d'entrée est claire lorsque le panneau est fermé	Booléen	—	vrai
selectWhenUnmatched	s'il faut émettre un événement de sélection lors de l'entrée lorsqu'il n'y a pas de correspondance	Booléen	—	FAUX
déclencheurOnFocus	afficher ou non des suggestions lors de la saisie	Booléen	—	vrai
mettre en surbrillancePremierÉlément	s'il faut mettre en surbrillance le premier élément	Booléen	—	vrai
valeurCouleur	la couleur de l'élément de suggestion (quand il n'y a pas d'emplacement limité)	Chaîne	—	#606266
scrollBarColor	la couleur de la barre de défilement	Chaîne	—	#DFDFDF
scrollBarOpacité	l'opacité de la barre de défilement	Nombre	—	0,8
panneauContexte	la couleur de fond du panneau	Chaîne	—	#FFFFFF
panelBorderRadius	le rayon de bordure du panneau	Chaîne	—	0px
panelBoxShadow	la couleur de l'ombre de la boîte du panneau	Chaîne	—	rgba(0, 0, 0, 0.3)
Couleur en surbrillance	la couleur de l'élément de suggestion lorsqu'il est mis en surbrillance	Chaîne	—	#F5F7FA
survoléCouleur	la couleur de l'élément de suggestion lors du survol	Chaîne	—	#C5C7CA
placeholderEffet	la couleur du texte de l'espace réservé	Chaîne	clair/foncé	lumière
Couleur d'entrée	la couleur du texte saisi	Chaîne	—	#606266
entréeContexte	la couleur d'arrière-plan du champ de saisie	Chaîne	—	#FFFFFF
inputBorderColor	la couleur de la bordure du champ de saisie	Chaîne	—	#DCDFE6
inputBorderColorHovering	la couleur de la bordure du champ de saisie lors du survol	Chaîne	—	#B0B3BB
inputBorderColorFocused	la couleur de la bordure du champ de saisie une fois mis au point	Chaîne	—	#575F96

Méthodes

nom de la méthode	description	paramètres
montrer	ouvrir le panneau	—
fermer	fermer le panneau	—
focusEntrée	concentrer l'élément d'entrée	—
getInputElement	obtenir l'élément d'entrée	—

Événements

nom de l'événement	description	paramètres
ouvrir	se déclenche lorsque le panneau s'ouvre	—
ouvert	se déclenche lorsque l'animation d'ouverture du panneau se termine	—
fermer	se déclenche à la fermeture du panneau	—
fermé	se déclenche lorsque l'animation de fermeture du panneau se termine	—
se concentrer	se déclenche lorsque l'élément d'entrée s'est concentré	—
se brouiller	se déclenche lorsque l'élément d'entrée est flou	—
sélectionner	se déclenche lorsqu'un clic sur une suggestion est effectué	suggestion sur laquelle on a cliqué

Machines à sous

Emplacement limité

Contenu personnalisé pour les suggestions d'entrée, le paramètre scope est { item }

Emplacement nommé

nom	description
sur l'article	contenu en haut des suggestions

Référence

Code VS
Interface utilisateur de l'élément

Développer