Vue 封装input 搜索组件
新建一个souso组件
1 <template> 2 <div :class="{'inline':inline}"> 3 <span v-if="this.label">{{this.label}}</span> 4 <input 5 type="text" 6 :value="value" 7 @input="$emit('input',$event.target.value)" 8 :placeholder="placeholder" 9 /> 10 </div> 11 </template> 12 <script> 13 export default { 14 props: { 15 label: String, 16 value: String, 17 placeholder: String, 18 inline: { //使input变为行内元素,默认false 19 type: Boolean, 20 default: false 21 } 22 } 23 }; 24 </script> 25 <style scoped> 26 .inline { 27 display: inline; 28 } 29 span { 30 margin-right: 10px; 31 } 32 </style>
在页面上调用
1 <template> 2 <div> 3 <souso inline v-model="user" placeholder="请输入内容" @input="input"></souso> 4 <button @click="submit">提交</button> 5 </div> 6 </template> 7 8 <script> 9 import souso from './components/souso' 10 export default { 11 name: "App", 12 components: { 13 souso 14 }, 15 data() { 16 return { 17 user:'', 18 }; 19 }, 20 methods:{ 21 input(value){ 22 console.log(value) 23 }, 24 submit(){ 25 console.log(this.user) 26 } 27 } 28 }; 29 </script> 30 31 <style lang="less"> 32 33 </style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步