Search 搜索框

基础用法

Search 搜索框 - 图1

  1. <se-search
  2. placeholder="搜索相关内容"
  3. @change="onResultChange"
  4. @keyup="onKeyUp"
  5. @clean="afterClean"
  6. ></se-search>
  7. <p>搜索词:{{result}}</p>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. result: ''
  13. }
  14. },
  15. methods: {
  16. onResultChange(val) {
  17. this.result = val
  18. },
  19. onKeyUp(e) {
  20. console.log(e.which)
  21. },
  22. afterClean() {
  23. console.log('清除搜索内容时触发')
  24. }
  25. }
  26. }
  27. </script>

自定义默认值

Search 搜索框 - 图2

  1. <se-search placeholder="搜索相关内容" :value.sync="defaultValue"></se-search>
  2. <br />
  3. <br />
  4. <se-button type="primary" @click="changeDefaultValue">改变默认值</se-button>
  5. <script>
  6. export default {
  7. data() {
  8. return {
  9. defaultValue: '设置的默认值'
  10. }
  11. },
  12. methods: {
  13. changeDefaultValue() {
  14. this.defaultValue = '改变后的默认值'
  15. }
  16. }
  17. }
  18. </script>

自定义宽度

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

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

Search 搜索框 - 图3

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

对齐

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

Search 搜索框 - 图4

<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

属性类型默认值必填说明
placeholderstring搜索相关内容搜索框默认文字提示
valuestring默认搜索值

Events

事件名称描述回调函数参数
change搜索词发生变化时触发搜索词
clean清除搜索内容时触发