demo

• Default rander

• Popup open

• Default select

• Default select all

• Default only

Config Nuxt version

install

npm i igg-vue-input-select

nuxt.config.js file

import path from 'path'
export default {
  ...
  alias: {
    vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
  },
  ...
}

plugins file

import Vue from 'vue'
import IggVueInputSelect from 'igg-vue-input-select'
Vue.use(IggVueInputSelect)

css file

// assets/main.scss import to nuxt.config.js
import '~/node_modules/@syncfusion/ej2-base/styles/material.css'
import '~/node_modules/@syncfusion/ej2-inputs/styles/material.css'
import '~/node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css'
import '~/node_modules/@syncfusion/ej2-buttons/styles/material.css'
import '~/node_modules/igg-vue-input-select/dist/igg-vue-input-select.css'

How to use

<template>
  <igg-vue-input-select
    v-model="value"
    input-box
    :options="options"
    :style="style"
    only-text="only"
    placeholder="select text"
    select-all-text="select all"
    filter-bar-placeholder="search text"
    more-text="more"
  />
</template>

<script>
export default {
  data () {
    return {
      select: null,
      style: {
        '--color': 'rgb(192, 108, 255)',
        '--font-family': '"Kanit", sans-serif'
      },
      options: [
        { text: 'Cabbage', value: 'item1' },
        { text: 'Spinach', value: 'item2' },
        { text: 'Wheat grass', value: 'item3' },
        { text: 'Yarrow', value: 'item4' },
        { text: 'Pumpkins', value: 'item5' },
        { text: 'Chickpea', value: 'item6' },
        { text: 'Green bean', value: 'item7' },
        { text: 'Horse gram', value: 'item8' },
        { text: 'Garlic', value: 'item9' },
        { text: 'Nopal', value: 'item10' },
        { text: 'Onion', value: 'item11' }
      ]
    }
  }
}
</script>

props

| Prop | Type | Default | Description | | ----------------------| ---------------------------| ---------------------------------|-------------------------| | v-model | string number | null | value return [value] | | input-box | boolen | false | use box style | | options | array:{text,value,append}| [] | items select | | style | object {varkey:value} | null | pass variable css | | only-text | string | only | text select only | | select-all-text | string | Select all | text select all | | filter-bar-placeholder| string | Search texts | text search options | | more-text | string | more | text more when truncate | | placeholder | string | Select text | text placeholder input | | select-all-value-text | string | Select all | text select all options | | id | string | el-1 | element id |

example options

options: [
  { text: 'Cabbage', value: 'item1', append: 10 },
  { text: 'Spinach', value: 'item2', append: 9 },
  { text: 'Wheat grass', value: 'item3' },
  { text: 'Yarrow', value: 'item4' },
  { text: 'Pumpkins', value: 'item5' },
  { text: 'Chickpea', value: 'item6' },
  { text: 'Green bean', value: 'item7' },
  { text: 'Horse gram', value: 'item8' },
  { text: 'Garlic', value: 'item9' },
  { text: 'Nopal', value: 'item10' },
  { text: 'Onion', value: 'item11' }
]

example style

{
  "--color": "rgb(192, 108, 255)",
  "--font-family": "'Kanit', sans-serif"
}

example v-model

["item1", "item2", ...]

example trick resize popup

...
<igg-vue-input-select
  ref="input-select"
  id="el-1"
  input-box
  v-model="select"
  :style="style"
  :options="options"
/>
...
// trick resize component after mount
this.$refs['input-select'].setResizePopup()