vue-like（点赞）组件的封装

写仿豆瓣的时候经常会遇到一个点赞的按钮，点一下赞了 它的样式也改变了，然后再点一下还可以取消。于是打算封装一个点赞的组件

刚开始封装的时候将每次点赞和取消点赞的这个逻辑写到了组件内部，后来再看感觉很不合理，所以重新重构了一下。

template：

<div id="like" :class="like?'active':''" @click="change">

<span class="img"></span><span>{{count}}</span>

</div>

img是显示的小心心的点赞图标，后面是点赞数量，因为想到有些点赞按钮可能没有数量，所以count设置为非必填项。

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);

}

样式当时写的是比较随意的，点赞的小图标是直接用的豆瓣的图片。。

script：

分开说吧

props 

props:{

count:{

type: Number,

required: false,

},

like:{

type:Boolean,

required:true,

default:false

}

}

因为count可能没有，所以非必填，like涉及到显示效果，给他设置了个默认值。

正常来说其实这个组件中是不需要写逻辑的，但是这里有个问题就是vue2.0中给自定义组件设置原生事件一定要加native修饰符，那如果使用的时候父组件忘记了呢？所以这里给这个组件设定了个点击事件

这个change方法里其实只做了一件事

change:function () {

this.$emit('click');

}

就是触发父组件传递进来的方法。

所以父组件如果这样使用

<div class="like">

<Like-it @click="changeValue" count="15" :like="like"></Like-it>

</div>

也不会有任何问题了。

当然如果确保可以在父组件中使用@click.native来触发原生事件，则组件的上面的操作都可以省略了。