search-bar

import { defineComponent, reactive } from 'vue'
import { SearchBar, Toast } from 'onebay-ui'
import DocsHeader from '../../../components/DocHeader/DocsHeader'

export default defineComponent({
  name: 'SearchBarPage',
  setup() {
    const state = reactive({
      value1: '',
      value2: '',
      value3: '',
      value4: ''
    })
    type State = keyof typeof state
    const onChange = (stateName: State, value: string) => {
      state[stateName] = value
    }
    const onActionClick = () => {
      Toast({
        text: 'start search',
        status: 'success'
      })
    }
    return () => {
      const { value1, value2, value3, value4 } = state
      return (
        <div class="page">
          {/* <!-- S Header --> */}
          <DocsHeader title="SearchBar"></DocsHeader>
          {/* <!-- E Header --> */}
          {/* <!-- S Body --> */}
          <div class="doc-body">
            {/* <!-- Basic usage --> */}
            <div class="panel">
              <div class="panel__title">Basic usage</div>
              <div class="panel__content no-padding">
                <div class="component-item">
                  <SearchBar
                    value={value1}
                    onChange={(val: string) => onChange('value1', val)}
                    onActionClick={onActionClick}
                  />
                </div>
              </div>
            </div>

            {/* <!-- Custom button text and click event --> */}
            <div class="panel">
              <div class="panel__title">Custom button text and click event</div>
              <div class="panel__content no-padding">
                <div class="component-item">
                  <SearchBar
                    actionName="Check"
                    value={value2}
                    onChange={(val: string) => onChange('value2', val)}
                    onActionClick={onActionClick}
                  />
                </div>
              </div>
            </div>

            {/* <!-- Always show button --> */}
            <div class="panel">
              <div class="panel__title">Always show button</div>
              <div class="panel__content no-padding">
                <div class="component-item">
                  <SearchBar
                    placeholder="Please enter the ISBN number"
                    showActionButton
                    value={value3}
                    onChange={(val: string) => onChange('value3', val)}
                    onActionClick={onActionClick}
                  />
                </div>
              </div>
            </div>

            {/* <!-- Custom input box type --> */}
            <div class="panel">
              <div class="panel__title">Custom input box type</div>
              <div class="panel__content no-padding">
                <div class="component-item">
                  <SearchBar
                    placeholder="input number"
                    inputType="number"
                    value={value4}
                    onChange={(val: string) => onChange('value4', val)}
                    onActionClick={onActionClick}
                  />
                </div>
              </div>
            </div>
          </div>
          {/* <!-- E Body --> */}
        </div>
      )
    }

  }
})
<template>
  <div class="page">
    <!-- S Header -->
    <DocsHeader title="SearchBar"></DocsHeader>
    <!-- E Header -->
    <!-- S Body -->
    <div class="doc-body">
      <!-- Basic usage -->
      <div class="panel">
        <div class="panel__title">Basic usage</div>
        <div class="panel__content no-padding">
          <div class="component-item">
            <SearchBar
              :value="value1"
              :onChange="onChange.bind(this, 'value1')"
              :onActionClick="onActionClick"
            />
          </div>
        </div>
      </div>

      <!-- Custom button text and click event -->
      <div class="panel">
        <div class="panel__title">Custom button text and click event</div>
        <div class="panel__content no-padding">
          <div class="component-item">
            <SearchBar
              actionName="Check"
              :value="value2"
              :onChange="onChange.bind(this, 'value2')"
              :onActionClick="onActionClick"
            />
          </div>
        </div>
      </div>

      <!-- Always show button -->
      <div class="panel">
        <div class="panel__title">Always show button</div>
        <div class="panel__content no-padding">
          <div class="component-item">
            <SearchBar
              placeholder="Please enter the ISBN number"
              showActionButton
              :value="value3"
              :onChange="onChange.bind(this, 'value3')"
              :onActionClick="onActionClick"
            />
          </div>
        </div>
      </div>

      <!-- Custom input box type -->
      <div class="panel">
        <div class="panel__title">Custom input box type</div>
        <div class="panel__content no-padding">
          <div class="component-item">
            <SearchBar
              placeholder="input number"
              inputType="number"
              :value="value4"
              :onChange="onChange.bind(this, 'value4')"
              :onActionClick="onActionClick"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- E Body -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { SearchBar, Toast } from 'onebay-ui'
export default defineComponent({
  name: 'SearchBarPage',
  components: {
    SearchBar
  },
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: ''
    }
  },
  methods: {
    onChange(stateName, value) {
      this[stateName] = value
    },
    onActionClick() {
      Toast({
        text: 'start search',
        status: 'success'
      })
    }
  }
})
</script>

API

PropertiesDescritionTypeDefault
valueRequired, the current value of the input box, you need to update the value value through the onChange eventnumber0
classNameclass namestring-
stylecustom styleCSSProperties-
placeholderplaceholder textstringSearch
actionNameRight button textstringSearch
maxLengthmax lengthnumber140
fixedWhether to fix the topbooleanfalse
focuswhether is focusbooleanfalse
disabledwhether is disabledbooleanfalse
showActionButtonwhether to always show the right buttonbooleanfalse
inputTypeinput typestringtext
onActionClickClick the button on the right to trigger the event(event) => void-
onChangeRequired, the event triggered when the value of the input box changes. Developers need to update the value change through the onChange event.(value, event) => void-
onClearThe event is triggered when the clear button is clicked, if it is not provide, the onChange function is called by default by passing an empty string() => void-
onFocusTriggered when the input is focused(event) => void-
onBlurEvent triggered when the input loses focus(event) => void-