vue组件开发之仿CSDN发布博客时面包屑标签和checkbox选中效果

一直在发博客，突然注意到在发布博客的时候选中对应的标签时的一个功能，最近一直在接触vue，于是想了一下要自己要怎么实现。

原图如下：

代码如下：

<template><div class="checkbox"><h1>选中的ID值：{{checkboxValue}}</h1><div class="brame"><span v-for="(item, index) in brameItem" :id="item.id">{{item.name}}<em @click="closebtn(item.id)">x</em></span></div><div class="label"><label v-for="(item, index) in checkboxItem" ><input type="checkbox" :value="item.id" :id="item.id" @click="addBrameItem(index)" v-model="checkboxValue">{{item.name}}</label></div></div>
</template>
<script>export default {name: 'checkbox',data (){return {checkboxValue: [],  //存储checkbox选中的值brameItem: [],  //存储面包屑的值checkboxItem: [{    //存储checkbox的值'id': 1,'name': 'CSS'},{'id': 2,'name': 'JSP'},{'id': 3,'name': 'JAVA'},{'id': 5,'name': 'ECMA6'},{'id': 6,'name': 'C#'},{'id': 7,'name': 'C++'},{'id': 8,'name': 'Oracle'},{'id': 9,'name': 'Ruby'}]}},methods: {//添加上面标签addBrameItem (){//console.log(this.checkboxItem[index]);var event = event || window.event;var target = event.target;var id = target.id;var _this = this;var flag = false;var obj = {};//循环遍历面包屑对象，如果面包屑对象中存在一个对象id和点击的id一致，那么就不要追加到里面去了_this.brameItem.forEach(function(item, index){if(item.id == id){flag = true;    //已经存在id相等的值//移出掉相等id的值_this.brameItem.splice(index, 1);}});//点击checkbox,面包屑中没有任何一个id与之对应if(!flag){obj.id = id;obj.name = target.parentNode.innerText;_this.brameItem.push(obj);}},//点击面包屑删除小按钮closebtn(id){var _this = this;console.log(id);//去调checkbox对应id的选中状态_this.checkboxValue.forEach(function(item, index){if(id == item){_this.checkboxValue.splice(index, 1);}});//删除面包屑对应的id的模块_this.brameItem.forEach(function(item, index){if(id == item.id){_this.brameItem.splice(index, 1);}});}}}
</script>
<style scoped>*{margin:0 auto;padding:0;font-family:"微软雅黑";}.checkbox{width:600px;height:auto;padding-bottom:10px;}.checkbox .brame{padding:10px 0;}.checkbox .brame span{display:inline-block;padding:5px 15px;margin:10px;background:#ccc;border:1px solid #ccc;border-radius:20px;}.checkbox .brame span em{display:inline-block;width:20px;height:20px;margin-left:5px;line-height:20px;text-align:center;font-style:normal;color:#fff;background:red;border-radius:10px;cursor:pointer;}.checkbox .label{width:600px;height:auto;padding:20px 0 10px 0;border:1px solid #ccc;}.checkbox .label label{display:inline-block;width:80px;margin:20px;}.checkbox .label label input{height:20px;width:20px;}
</style>

最终效果如下：

vue组件开发之仿CSDN发布博客时面包屑标签和checkbox选中效果相关推荐

csdn写博客时图片插入方法
好吧,本来这不是我的第一篇博客,只是在写第一篇时发现不会插入图片,所以这就成了第一篇... 本来还想着先把本地图片传到网上,然后用下面这个把图贴上,后来不知应该上传到哪儿,而且想想都麻烦,所以作罢. ...
如何在CSDN发布博客
1.首先打开CSDN官网:https://www.csdn.net/,打开后界面如下 2.然后点击发布,即可跳转到博客内容写作页面 3.进入写作页面后即可开始写内容了.文本编辑器有两种模式可供选择,一 ...
csdn发表博客时出现选择文章类型”
第一次发csdn博客,老是出现"请选择文章类型"这个提示,发布总是不成功,最后倒腾半天发现是选择文章标题下的那个文章类型.
CSDN写博客时的代码片格式设置
备注:这个设置现在应该已经不需要了,CSDN做了优化改版.一年前的CSDN格式设置很变态,对新手尤其不友好,找了很久才发现需要先修改默认编辑器,再插入代码片设置格式一.博客设置创作中心→博客设置→ ...
CSDN写博客时设置图片显示大小
<img src="图片链接" width="20%"> 使用图示:
Android开发之仿QQ表情实现（上）
大家晚上好,,小鹿又来了..最近小鹿特别忙,忙到没时间发表博客了(注:以下内容过于简单请大家不要喷,仅提供初学者学习) 今天发表两篇文章,分别是讲解模拟QQ表情的实现,先给大家看效果图,,,, 开始了 ...
如何使用live writer客户端来发布CSDN的博客文章？
如何使用live writer客户端来发布CSDN的博客文章? http://blog.csdn.net/soune/article/details/4439158 live writer是写博客的一 ...
如何在CSDN中发布博客
1.首先打开CSDN官网,进行注册然后登录,登录以后看到的界面如下: 2.进入会员中心右边有个创作中心点进去,看到界面如下: 3.在上界面中,可以单击"发布"直接写博客,如下所示: ...
在CSDN开通博客专栏后如何发布文章（图文）
今天打开电脑登上CSDN发现自己授予了专栏勋章,有必要了解如何在专栏发布文章. 很感谢已经有前辈给出了图文教程,此文章转载自博客:http://blog.csdn.net/upi2u/article/ ...
CSDN产品博客开博啦！
CSDN产品博客是CSDN的产品事业部开设的官方博客,是CSDN会员和我们产品事业部门进行沟通的官方渠道.在产品博客中,我们产品团队将和会员分享在CSDN网站的产品设计,研发和网站运营方面做出的工作, ...

vue组件开发之仿CSDN发布博客时面包屑标签和checkbox选中效果

vue组件开发之仿CSDN发布博客时面包屑标签和checkbox选中效果相关推荐

最新文章

热门文章