源代碼?

<template><div style="display: inline-flex"><el-inputv-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>

運行結果

總結

以上是生活随笔為你收集整理的Vue + Element UI——搜索框DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。