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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
placeholder | string | 搜索相关内容 | 否 | 搜索框默认文字提示 |
value | string | 否 | 默认搜索值 |
Events
事件名称 | 描述 | 回调函数参数 |
---|---|---|
change | 搜索词发生变化时触发 | 搜索词 |
clean | 清除搜索内容时触发 |