SearchBox

<template>
<article>
  <veui-search-box class="search-box"/>
  <veui-search-box
    class="search-box"
    ui="strong"
  />
</article>
</template>

<script>
import { SearchBox } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  }
}
</script>

<style lang="less" scoped>
.search-box {
  margin-right: 1em;
}
</style>

<template>
<article>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong xs"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong s"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="strong l"
    />
  </div>
  <div class="container">
    <veui-search-box
      class="search-box"
      ui="xs"
    />
    <veui-search-box
      class="search-box"
      ui="s"
    />
  </div>
  <div class="container">
    <veui-search-box class="search-box"/>
    <veui-search-box
      class="search-box"
      ui="l"
    />
  </div>
</article>
</template>

<script>
import { SearchBox } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  }
}
</script>

<style lang="less" scoped>
.container {
  margin-bottom: 1em;
  .search-box {
    margin-right: 1em;
  }
}
</style>

<template>
<article>
  <section>
    <veui-radio-group
      v-model="state"
      :items="states"
    />
  </section>
  <section>
    <veui-search-box
      class="search-box"
      :readonly="isReadonly"
      :disabled="isDisabled"
    />
    <veui-search-box
      class="search-box"
      :readonly="isReadonly"
      :disabled="isDisabled"
      ui="strong"
    />
  </section>
</article>
</template>

<script>
import { SearchBox, RadioGroup } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox,
    'veui-radio-group': RadioGroup
  },
  data () {
    return {
      state: null,
      states: [
        {
          label: 'Normal',
          value: null
        },
        {
          label: 'Read-only',
          value: 'readonly'
        },
        {
          label: 'Disabled',
          value: 'disabled'
        }
      ]
    }
  },
  computed: {
    isReadonly () {
      return this.state === 'readonly'
    },
    isDisabled () {
      return this.state === 'disabled'
    }
  }
}
</script>

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.search-box {
  margin-right: 1em;
}
</style>

<template>
<article>
  <veui-search-box
    v-model="value"
    class="search-box"
    clearable
    :suggestions="suggestions"
    replace-on-select
    @select="handleSelect"
  />
  <veui-search-box
    v-model="value1"
    class="search-box"
    ui="strong"
    clearable
    :suggestions="suggestions1"
    replace-on-select
    @select="handleSelect"
  />
</article>
</template>

<script>
import { SearchBox, toast } from 'veui'

export default {
  components: {
    'veui-search-box': SearchBox
  },
  data () {
    return {
      value: '',
      value1: '',
      browsers: [
        'Google Chrome',
        'Apple Safari',
        'Microsoft Edge',
        'Mozilla Firefox',
        'Opera',
        'Vivaldi',
        'Internet Explorer',
        'Maxthon',
        'Android Browser',
        'UC Browser',
        'Samsung Internet',
        'QQ Browser'
      ]
    }
  },
  computed: {
    suggestions () {
      if (!this.value) {
        return []
      }
      return this.browsers.filter(browser => {
        return browser.toLowerCase().indexOf(this.value.toLowerCase()) !== -1
      })
    },
    suggestions1 () {
      if (!this.value1) {
        return []
      }
      return this.browsers.filter(browser => {
        return browser.toLowerCase().indexOf(this.value1.toLowerCase()) !== -1
      })
    }
  },
  methods: {
    handleSelect ({ value }) {
      toast.info(value)
    }
  }
}
</script>

<style lang="less" scoped>
.search-box {
  margin-left: 1em;
}
</style>