Vue点击选中（多选）选中右上角有三角形

参考1：https://blog.csdn.net/Just_Maybe/article/details/103597060
参考2：画三角形：https://blog.csdn.net/ka_xingl/article/details/117251528

获取最后一个元素：&:last-child {}

div{margin-right: 10px;&:last-child{margin-right: 0px;}
}

原理：

 <div class="select-box"><div class="box"><div>全部</div><div class="box-con"><span>×</span></div></div><div class="box"><div>水污染</div><div class="box-con"><span>×</span></div></div><div class="box"><div>大气污染</div><div class="box-con"><span>×</span></div></div><div class="box"><div>土壤污染</div><div class="box-con"><span>×</span></div></div></div>

.select-box {display: flex;.box {width: 86px;height: 36px;line-height: 36px;background: rgba(30, 37, 48, 0.6);border: 1px solid #67e5ff;border-radius: 4px;font-size: 14px;color: #67e5ff;text-align: center;position: relative;overflow: hidden;}.box:nth-child(-n + 3) {margin-right: 16px;}.box .box-con {width: 30px;height: 30px;position: absolute;background: #67e5ff;top: -15px;right: -15px;transform: rotate(45deg);}.box .box-con span {position: absolute;bottom: 0;display: block;width: 24px;height: 24px;text-align: center;transform: rotate(-45deg);color: #000;}
}

实现点击切换：

方法一：
实现原理：利用三元表达式来添加不同类名、控制显示隐藏、display:none

<template><div class="select-box"><div :class="item.selected === true ? 'box active' : 'box'" v-for="(item, index) in tabList" :key="index" @click="changePollutionType(item, $event)"><div>{{ item.label }}</div><div :class="item.selected === true ? 'box-con' : 'con-none'"><span>×</span></div></div></div>
</template><script>
export default {name: '',data() {return {tabList: [{ label: '全部', value: '全部', selected: false },{ label: '水污染', value: '水污染', selected: false },{ label: '大气污染', value: '大气污染', selected: false },{ label: '土壤污染', value: '土壤污染', selected: false },],}},methods: {changePollutionType(item, e) {if (item.selected === true) {item.selected = false} else {item.selected = true}},},
}
</script><style lang="scss" scoped>
.select-box {display: flex;.box {width: 86px;height: 36px;line-height: 36px;background: rgba(30, 37, 48, 0.6);border: 1px solid #67e5ff;border-radius: 4px;font-size: 14px;color: #67e5ff;text-align: center;position: relative;overflow: hidden;cursor: pointer;&.active {background: rgba(6, 44, 103, 0.6);}}.box:nth-child(-n + 3) {margin-right: 16px;}.con-none {display: none;}.box .box-con {width: 30px;height: 30px;position: absolute;background: #67e5ff;top: -15px;right: -15px;transform: rotate(45deg);}.box .box-con span {position: absolute;bottom: 0;display: block;width: 24px;height: 24px;text-align: center;transform: rotate(-45deg);color: #000;}
}.icon-duigou:before {content: '\E606';font-size: 4px;
}
</style>

实现方法二：
实现原理：利用伪类、js中动态添加类名

<template><div class="tab-list-box"><div class="tab-list" v-for="(item, index) in tabList" :key="index" @click="changePollutionType(item, $event)"><div class="tab-item">{{ item.label }}</div></div></div>
</template><script>
export default {name: '',data() {return {tabList: [{ label: '全部', value: '全部', selected: false },{ label: '水污染', value: '水污染', selected: false },{ label: '大气污染', value: '大气污染', selected: false },{ label: '土壤污染', value: '土壤污染', selected: false },],}},methods: {changePollutionType(item, e) {if (item.selected === true) {item.selected = false} else {item.selected = true}if (e.target.className === 'tab-item') {e.target.className = 'tab-item active' //切换按钮} else {e.target.className = 'tab-item' //切换按钮}},},
}
</script><style lang="scss" scoped>
.tab-list-box {margin-top: 20px;.tab-list {display: inline-block;.tab-item {width: 86px;height: 36px;background: rgba(30, 37, 48, 0.6);border: 1px solid #67e5ff;opacity: 1;border-radius: 4px;text-align: center;line-height: 36px;cursor: pointer;position: relative;&.active {background: rgba(6, 44, 103, 0.6);}&.active::before {content: '';width: 0;height: 0;border: 15px solid transparent;border-right: 15px solid #67e5ff;transform: rotate(135deg);position: absolute;right: -15px;top: -16px;cursor: pointer;}&.active::after {content: 'x';width: 16px;height: 16px;color: #fff;position: absolute;right: 0px;top: -11px;cursor: pointer;}}}.tab-list:nth-child(-n + 3) {margin-right: 16px;}
}
</style>

Vue点击选中（多选）选中右上角有三角形相关推荐

vue复选框选中一个全选中了
vue复选框选中一个全选中了在业务开发中,使用了checkbox-group组件,发现点击其中的一个选项后,所有数据都被选中了,取消也是全部取消了. 原因:绑定数据的时候,定义的是字符串,修改为数组 ...
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...
60.实现elementUI表格点击某一行选中勾选框
前言: 项目中需要做到除了勾选表格第一列勾选框去选中数据外,还要通过点击某一行任何地方,都可以勾选到这条数据,并且要做到选中的数据不能重复,记录一下: (全选和选中勾选框的方法就不写了这里只写通过点 ...
点击编辑框全选内容java,js实现鼠标点击文本框自动选中内容的方法
本文实例讲述了js实现鼠标点击文本框自动选中内容的方法.分享给大家供大家参考.具体如下: 这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候, ...
状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...
用 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选 ...
元素的选中问题元素选中的问题切换复选框选中全选和全不选
元素的选中问题 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
原生js做购物车全选选中商品显示价格和小计的计算
html代码 <div class="contain"><table class="table table-bordered">< ...
html 点击文本框则选中,JS事件内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。...
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...
点击input，区域选中后外面会出现其他颜色边框去除方式和更改input字体颜色
点击input,区域选中后外面会出现其他颜色边框去除方式和更改input字体颜色 {border:0;outline:none;} //去除边框定义和用法 outline (轮廓)是绘制于元素周围的 ...
使用JavaScript（jQuery或Vanilla）选中/取消选中复选框？
本文翻译自:Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)? 如何使用JavaScript,jQuery或vanilla选中/取消 ...

Vue点击选中（多选）选中右上角有三角形

Vue点击选中（多选）选中右上角有三角形相关推荐

最新文章

热门文章