Search 搜索框

基础用法

<se-search
  placeholder="搜索相关内容"
  @change="onResultChange"
  @keyup="onKeyUp"
  @clean="afterClean"
></se-search>
<p>搜索词：{{result}}</p>
<script>
  export default {
    data() {
      return {
        result: ''
      }
    },
    methods: {
      onResultChange(val) {
        this.result = val
      },
      onKeyUp(e) {
        console.log(e.which)
      },
      afterClean() {
        console.log('清除搜索内容时触发')
      }
    }
  }
</script>

自定义默认值

<se-search placeholder="搜索相关内容" :value.sync="defaultValue"></se-search>
<br />
<br />
<se-button type="primary" @click="changeDefaultValue">改变默认值</se-button>
<script>
  export default {
    data() {
      return {
        defaultValue: '设置的默认值'
      }
    },
    methods: {
      changeDefaultValue() {
        this.defaultValue = '改变后的默认值'
      }
    }
  }
</script>

自定义宽度

• 最小值是 90px，小于这个值时 css 会使用这个最小值来显示

• 设置为 100% 时，可自适应父级元素的宽度

<div class="demo-container">
  <se-search width="100%" placeholder="请输入搜索词"></se-search>
</div>

对齐

只需要设置父元素的 text-align 值即可控制。

<div class="demo-container">
  <se-search width="216px" placeholder="搜索内容"></se-search>
</div>

<style>
  .demo-container {
    padding: 20px;
    text-align: right;
    border: 1px solid #d0d0d0;
  }
</style>

Props

Events