搜索框 SearchBar

基本

<za-search-bar :showCancel="false" @change="handleChange" @submit="handleSubmit" @blur="handleBlur" @focus="handleFocus" @clear="handleClear" @cancel="handleCancel"></za-search-bar>

始终展示取消按钮

<za-search-bar shape="round" :showCancel="true" value="默认搜索关键字"></za-search-bar>

点击获取焦点

<za-search-bar shape="round" :showCancel="true" ref="searchRef"></za-search-bar>
<za-cell>
  <za-button theme="primary" size="xs" shape="radius" @click="handleClick">点击获取焦点</za-button>
</za-cell>

Vue Script

<script name="vue">
export default {
  data() {
    return {
      value: "",
    }
  },
  methods: {
    handleClick(){
      this.$refs.searchRef.focus();
    },
    handleChange(val){
      this.value = val
    },
    handleSubmit(val){
      console.log(`搜索内容为${val}`);
    },
    handleChange(val){
      console.log(`搜索内容为${val}`);
    },
    handleFocus(){
      console.log('获取焦点');
    },
    handleBlur(){
      console.log('失去焦点');
    },
    handleClear(){
      console.log('点击了清除');
    },
    handleCancel(){
      console.log('点击了取消');
    }
  },
};
</script>

API

SearchBar Attributes

SearchBar Events