Inicio>Relacionado con la programación>Otro código fuente
Descargar

panel-de-búsqueda-vue

Inglés | 简体中文

vue-search-panel es un componente de búsqueda con sugerencias

Contenido

  • Características
  • Ejemplo
  • Instalar
  • Uso
  • API
  • Referencia

Características

  • Filtrar sugerencias basadas en palabras de entrada, soporte para reglas personalizadas
  • Personaliza el elemento de la sugerencia por espacio.
  • Soporte para interfaz de usuario personalizada
  • Posición del panel de configuración de soporte (arriba/abajo/izquierda/derecha/estática)
  • Extendido a panel multifuncional, como VsCode

Ejemplo

Demostración en vivo

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

IU predeterminada

UI predeterminada

IU personalizada

Personalizar UI

Instalar 

 $   npm install vue-search-panel --save

Uso

Módulo de importación 

 import VueSearchPanel from 'vue-search-panel'

Registro

Registro global 

 Vue.use(VueSearchPanel)

Registro local 

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

Uso básico

  • Llamando al método show para abrir el panel.
  • Haga clic afuera o presione ESC para cerrar el panel.

Código de muestra: 

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

Sugerencias personalizadas

Personalice el elemento de sugerencia por scoped slot , acceda al objeto de sugerencia a través de la clave item .

Código de muestra: 

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

IU personalizada

Personaliza la interfaz de usuario mediante accesorios.
Se puede configurar el color/color del borde/color de fondo/ancho/alto.
Para obtener más detalles, consulte la API.

Código de muestra: 

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

posición del panel de configuración

  • El accesorio de fixed se utiliza para la posición del panel, el panel se coloca en relación con la ventana gráfica cuando el valor es true y el panel se coloca de acuerdo con el flujo normal del documento cuando el valor es false .
  • El accesorio de placement se utiliza para especificar la ubicación del panel en relación con la ventana gráfica, el valor opcional es top/bottom/left/right

La propiedad de ubicación se ignora cuando el valor de fiexd es falso

Código de muestra: 

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

Extensión

Podría extenderse a un panel multifuncional, como buscar/recientemente/comando, como VsCode
Cúpula en vivo: https://theoxiong.github.io/vue-search-panel/

Para desarrolladores: 

 npm install
npm run dev

API

Atributos

parámetro descripción tipo valor opcional valor predeterminado
valor / modelo v valor de enlace bidireccional Cadena — —
marcador de posición el marcador de posición de entrada Cadena — —
ancho el ancho del panel Cadena — 50%
altura la altura del panel Cadena — 300px
arriba el margenParte superior del panel Cadena — 0px
abajo el margenParte inferior del panel Cadena — 0px
izquierda el margen izquierdo del panel Cadena — 0px
bien el margen derecho del panel Cadena — 0px
fijado ya sea posicionado en relación con la ventana gráfica Booleano — verdadero
colocación especificando la ubicación del panel en relación con la ventana gráfica (ignorado cuando el valor del campo es falso) Cadena arriba/abajo/izquierda/derecha arriba
fetchSugerencias un método para recuperar sugerencias de entrada. cuando las sugerencias estén listas, invoque callback(data:[]) para devolverlas Función (cadena de consulta, cb) — —
cerrarAlPresionarEscape si cerrar el panel al presionar ESC Booleano — verdadero
cerrarAlSeleccionar si cerrar el panel al seleccionar Booleano — verdadero
borrar al cerrar si se borra el valor de entrada cuando el panel está cerrado Booleano — verdadero
seleccionar cuando no coincide si se debe emitir un evento de selección al ingresar cuando no hay coincidencia Booleano — FALSO
disparadorEnfoque si se muestran sugerencias cuando se ingresa el foco Booleano — verdadero
resaltarPrimerArtículo si resaltar el primer elemento Booleano — verdadero
valorColor el color del elemento de sugerencia (cuando no hay un espacio con alcance) Cadena — #606266
barra de desplazamientoColor el color de la barra de desplazamiento Cadena — #DFDFDF
barra de desplazamientoOpacidad la opacidad de la barra de desplazamiento Número — 0,8
panelFondo el color de fondo del panel Cadena — #FFFFFF
panelBordeRadio el radio del borde del panel Cadena — 0px
panelCajaSombra la cajaColor de sombra del panel Cadena — rgba(0, 0, 0, 0,3)
resaltadoColor el color del elemento de sugerencia cuando está resaltado Cadena — #F5F7FA
flotadoColor el color del elemento de sugerencia cuando se coloca sobre él Cadena — #C5C7CA
efecto marcador de posición el color del texto del marcador de posición Cadena claro/oscuro luz
Color de entrada el color del texto de entrada Cadena — #606266
entradaFondo el color de fondo del campo de entrada Cadena — #FFFFFF
entradaBordeColor el color del borde del campo de entrada Cadena — #DCDFE6
entradaBordeColorFlotando el color del borde del campo de entrada cuando se coloca el cursor sobre él Cadena — #B0B3BB
entradaBordeColorEnfocado el color del borde del campo de entrada cuando está enfocado Cadena — #575F96

Métodos

nombre del método descripción parámetros
espectáculo abre el panel —
cerca cerrar el panel —
enfoqueEntrada enfocar el elemento de entrada —
obtener elemento de entrada obtener el elemento de entrada —

Eventos

nombre del evento descripción parámetros
abierto Se activa cuando se abre el panel. —
abierto Se activa cuando finaliza la animación de apertura del panel. —
cerca Se activa cuando el panel se cierra. —
cerrado Se activa cuando finaliza la animación de cierre del panel. —
enfocar Se activa cuando el elemento de entrada se enfoca. —
difuminar Se activa cuando el elemento de entrada está borroso. —
seleccionar Se activa cuando se hace clic en una sugerencia. sugerencia en la que se hace clic

Tragamonedas

Ranura con alcance

Contenido personalizado para sugerencias de entrada, el parámetro de alcance es { item }

Ranura con nombre

nombre descripción
sobre el artículo contenido en la parte superior de las sugerencias

Referencia

  • Código VS
  • Interfaz de usuario del elemento
Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo