Vue + Element UI——搜索框DEMO
源代码<template><div style="display: inline-flex"><el-inputv-model="keyword":disabled="disabled":placeholder="placeholder"prefix-icon="el-icon-searc...
·
源代码
<template>
<div style="display: inline-flex">
<el-input
v-model="keyword"
:disabled="disabled"
:placeholder="placeholder"
prefix-icon="el-icon-search"
style="width: 350px;margin-right: 10px"
clearable
@clear="search"
@keydown.enter.native="search"></el-input>
<el-button
:disabled="disabled"
icon="el-icon-search"
type="primary"
@click="search">
搜索
</el-button>
</div>
</template>
<script>
export default {
name: "Search",
props:{
disabled:{
type:Boolean,
default:true
},
placeholder:{
type:String,
default: '请输入昵称进行搜索,可以直接回车搜索...'
}
},
data(){
return {
keyword:''
}
},
methods:{
search(){
this.$emit("search",['search',this.keyword])
}
}
}
</script>
<style scoped>
</style>
运行结果
更多推荐
已为社区贡献22条内容
所有评论(0)