vue3.0动态循环icon点击变色，再次点击取消选中

先看效果图

点击后发生改变

开始上代码
html部分

        <div class="left-circle"><div class="whole-circle" ref="wholeCircle"></div><div class="whole-list"><ul><li v-for="(item, index) in newArr" :key="index"><divclass="icon":class="{ iconactived: spanIndex.indexOf(index) > -1 }":style="{ background: item.text }"@click="changeCicle(item, index)"></div><span class="name">{{ item.name }}</span><span class="value">{{ item.value }}</span><span class="unit">单 <span>|</span></span><span class="type">{{ item.type }}</span></li></ul></div></div>

css部分代码

      .left-circle {display: flex;padding-left: 92px;.whole-circle {width: 60%;height: 100%;}.whole-list {width: 40%;height: 100%;ul {li {display: flex;align-items: center;padding: 20px 10px;span {margin: 0 10px;}.icon {width: 12px;height: 12px;border-radius: 50%;cursor: pointer;}.iconactived {background: #cccccc !important;}.name {font-size: 22px;font-weight: 500;color: #3aaeff;}.value {font-size: 38px;font-weight: bold;color: #ffffff;}.type {color: #00d9ff;font-size: 30px;font-weight: bold;}.unit {display: flex;margin: 0;font-size: 22px;font-weight: 300;color: #ffffff;span {opacity: 0.3;margin: 0 2px;}}}}}}

vue3.0JS部分关键代码
关于ref这个响应式引用可以看官网带 ref 的响应式变量

import { ref } from "vue";  //需要引入ref相应变量setup() {const wholeCircle = ref(null);const isactive = ref(0); //选中切换的名字const spanIndex = ref([]); //选中icon的数组const dataList = [{ value: 758, name: "付款", type: "30%" },{ value: 425, name: "接单", type: "20%" },{ value: 565, name: "发货", type: "10%" },{ value: 6452, name: "揽收", type: "15%" },{ value: 4905, name: "签收", type: "6%" },{ value: 547, name: "撤单", type: "4%" }];const color = [{ text: "#52ca8d" },{ text: "#06bdf6" },{ text: "#116fee" },{ text: "#6e68fd" },{ text: "#9229fd" },{ text: "#fdac50" }];const newArr = dataList.map((item, index) => {return { ...item, ...color[index] };});let arr = [...newArr];const changeCicle = (item, index) => {let arrIndex = spanIndex.value.indexOf(index);if (arrIndex > -1) {spanIndex.value.splice(arrIndex, 1);arr.splice(index, 0, item);} else {spanIndex.value.push(index);arr = arr.filter(res => {return res.name != item.name;});}//let myChart = echarts.init(wholeCircle.value);//let bar = orderEcharts.wholeCircle(arr);//myChart.setOption(bar);};return {wholeCircle,dataList,isactive,newArr,changeCicle,spanIndex};}

vue3.0动态循环icon点击变色，再次点击取消选中相关推荐

vue实现点击变色再次点击变回来
前言前端开发中有这么一种常见的操作,点击按钮让按钮改变样式,再次点击该按钮让其恢复成默认样式:今天教大家用最简单的方法实现这一操作. 单个div实现效果: 单个div实现思路首先利用 onClic ...
纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单
纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...
Android recyclerView/listview的点击变色、点击换背景颜色
一言不合就上图点击变色: 这里没有用到什么高大上的技术点,只是静下心好好想想"面向对象",利用一点小逻辑. 我这里用的是recyclerView控件,在recyclerView的 ...
vue3.0 + JsBarcode 循环生成多个条形码(setup语法糖)
1.安装jsbarcode npm install jsbarcode --save 2.html页面循环数据 //id动态绑定,使用类名加index <div class='js_barcod ...
vue router-view 匹配路由后，第一次可以点击，再次点击同一个路由无响应，如何处理？
原因可能是data函数没有return 如下: 修改后:问题得以解决
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时，图标组件刚好是Menu时报错，菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标.而我的图标是全局导入的,默认 ...
vue3.0 引入i18n 做国际化 - 做动态语言切换
说明适合 vue2.0版本的官方链接如下: Vue I18nVue I18n 是 Vue.js 的国际化插件https://kazupon.github.io/vue-i18n/zh/ ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）
有时候会遇到点击目标区域绑定事件 / 展示效果,然后点击目标区域之外的地方就关闭效果 / 触发另一事件,为了实现这样的功能,我们需要通过比对 node 节点来进行判断,在下面我会使用 Vue3.0 的 ...

vue3.0动态循环icon点击变色，再次点击取消选中

vue3.0动态循环icon点击变色，再次点击取消选中相关推荐

最新文章

热门文章