<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.searcher input {
flex: 1;
border: none;
text-indent: 10px;
outline: none;
}
.searcher{
display: flex;
border: 1px solid #ccc;
width: 200px;
height: 30px;
margin: 0 auto;
position: relative;
}
.btn{
width: 30px;
height: 30px;
/* border: 1px solid firebrick; */
background: url("https://img3.doubanio.com/f/sns/f71f15922ebd7c0ff0ea0e7a25577529efd8981a/pics/icon/bn_srh_1.png") no-repeat center;
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<div id="app">
<zz-seacher tip="zzz" style=" width: 500px;" @zz="zz"></zz-seacher>
<zz-seacher tip="XXXXX"></zz-seacher>
<zz-seacher></zz-seacher>
</div>
<script>
// 小程序中的组件
Vue.component('zz-seacher', {
props:['tip'],
data() {
return {
keywords:""
}
},
methods: {
search(){
this.$emit("search",this.keywords)
}
},
template: `
<div class="searcher">
<input type="text" v-model="keywords" :placeholder="tip">
<div class="btn" @click="search"></div>
</div>
`
})
let vm=new Vue({
el:'#app',
data() {
return {
}
},
methods: {
zz(e){
console.log("外面"+e)
}
},
})
</script>
</body>
</html>
