Web Demo Mobile Demo Angular Demo Vue Demo React Demo

搜索框 SearchBox

源代码
<template>
  <div>
    <h2>Basic SearchBox</h2>
    <SearchBox style="width:300px"
        placeholder="Input something here" 
        v-model="value"
        @search="onSearch($event)">
      <Addon>
        <span v-if="value" class="textbox-icon icon-clear" title="Clear value" @click="value=null"></span>
      </Addon>
    </SearchBox>
    <p>You are searching: {{value}}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: null
    };
  },
  methods: {
    onSearch(event) {
      this.value = event.value;
    }
  }
};
</script>