寫仿豆瓣的時(shí)候經(jīng)常會(huì)遇到一個(gè)點(diǎn)贊的按鈕，點(diǎn)一下贊了 它的樣式也改變了，然后再點(diǎn)一下還可以取消。于是打算封裝一個(gè)點(diǎn)贊的組件
剛開始封裝的時(shí)候?qū)⒚看吸c(diǎn)贊和取消點(diǎn)贊的這個(gè)邏輯寫到了組件內(nèi)部，后來再看感覺很不合理，所以重新重構(gòu)了一下。
template：
<div id="like" :class="like?'active':''" @click="change">
<span class="img"></span><span>{{count}}</span>
</div>
img是顯示的小心心的點(diǎn)贊圖標(biāo)，后面是點(diǎn)贊數(shù)量，因?yàn)橄氲接行c(diǎn)贊按鈕可能沒有數(shù)量，所以count設(shè)置為非必填項(xiàng)。
style：
#like{
width: 100px;
height: 30px;
line-height: 30px;
display: flex;
align-items:center;
justify-content:center;
font-size: 15px;
margin: 30px auto;
color: #42bd56;
border: 1px solid #42bd56;
}
#like .img{
margin-right: 4px;
width: 20px;
height: 20px;
background:url(https://img3.doubanio.com/f/talion/c689ab2369da387f2cb0d4da4a22614d7f048bf9/pics/card/ic_heart_green.svg) no-repeat;
}
#like.active{
color: #333;
border: 1px solid #bfbfbf;
}
#like.active .img{
background-image: url(https://img3.doubanio.com/f/talion/0129352875382ff0544020161709c2ae9b00c737/pics/card/ic_heart_red.svg);
}
樣式當(dāng)時(shí)寫的是比較隨意的，點(diǎn)贊的小圖標(biāo)是直接用的豆瓣的圖片。。
script：
分開說吧
props?
props:{
count:{
type: Number,
required: false,
},
like:{
type:Boolean,
required:true,
default:false
}
}
因?yàn)閏ount可能沒有，所以非必填，like涉及到顯示效果，給他設(shè)置了個(gè)默認(rèn)值。
正常來說其實(shí)這個(gè)組件中是不需要寫邏輯的，但是這里有個(gè)問題就是vue2.0中給自定義組件設(shè)置原生事件一定要加native修飾符，那如果使用的時(shí)候父組件忘記了呢？所以這里給這個(gè)組件設(shè)定了個(gè)點(diǎn)擊事件
這個(gè)change方法里其實(shí)只做了一件事
change:function () {
this.$emit('click');
}
就是觸發(fā)父組件傳遞進(jìn)來的方法。
所以父組件如果這樣使用
<div class="like">
<Like-it @click="changeValue" count="15" :like="like"></Like-it>
</div>
也不會(huì)有任何問題了。
當(dāng)然如果確?？梢栽诟附M件中使用@click.native來觸發(fā)原生事件，則組件的上面的操作都可以省略了。
