vue 中点击切换图标，切换选中状态

很多新手小白做这个切换下拉列表，选中列表记录当前选中状态，图标也变成当前选中状态的时候都会比较绕，其实其核心就是把（icon图标、样式加载变成变量话，按需加入想要的变量即可）

例如下面这个例子：

<template><div><div class="header-icon-border"><el-popover placement="bottom" trigger="click"><divclass="modeGroup":class="[SelectType === 0 ? 'activeStyle' : '']"@click="buttonEditWireFrame(matModel, 0)"><div class="modeBox"><i class="iconfont iconcaiZhiMoShi"></i><span>前视图</span></div></div><divclass="modeGroup":class="[SelectType === 1 ? 'activeStyle' : '']"@click="buttonEditWireFrame(lineModel, 1)"><div class="modeBox"><i class="iconfont iconxianKuang1"></i><span>左视图</span></div></div><divclass="modeGroup":class="[SelectType === 2 ? 'activeStyle' : '']"@click="buttonEditWireFrame(mat_lineModel, 2)"><div class="modeBox"><i class="iconfont iconcaiZhiXian"></i><span>右视图</span></div></div><divclass="modeGroup":class="[SelectType === 3 ? 'activeStyle' : '']"@click="buttonEditWireFrame(line_transpModel, 3)"><div class="modeBox"><i class="iconfont icontouMing"></i><span>俯视图</span></div></div><islot="reference":class="['icon', 'iconfont', wireframe]":title="'切换预览模式'"></i></el-popover></div></div>
</template>
<script>
export default {data() {return {SelectType: 0, //下拉框中当前的选中状态wireframe: 'iconcaiZhiMoShi', //页面上默认的图标};},methods: {// 切换预览模式buttonEditWireFrame(val, index) {this.SelectType = index;switch (val) {case Tz3dModelModeType.MAT:this.wireframe = "iconcaiZhiMoShi";break;case Tz3dModelModeType.LINE:this.wireframe = "iconxianKuang1";break;case Tz3dModelModeType.MAT_LINE:this.wireframe = "iconcaiZhiXian";break;case Tz3dModelModeType.LINE_TRANSP:this.wireframe = "icontouMing";break;}}}
};
</script>
<style scoped>
.activeStyle {background: #f1f7ff;color: #fdb906;
}
</style>

vue 中点击切换图标，切换选中状态相关推荐

vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
状态输出导航栏html,Vue实现导航栏效果（选中状态刷新不消失）_百厌_前端开发者...
用 1.首先把这些小图片放到src/assets路径下面(自动base64编码) 2.在data()里边定义一个选中对应的变量isSelect,和循环遍历的数组,数组下面放图标对应的文字,和选中,未选 ...
Vue 点击眼睛图标不影响input焦点不关闭软键盘
参考文章:https://blog.csdn.net/ligang2585116/article/details/51764828 密码输入框通常会有切换明文/密文的功能,开发时遇到了问题:点击眼睛图 ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
vue中点击第一次没有触发按钮怎么操作_vue如何触发某个元素的单击事件?
我来回答一波吧,,,因为没复习,,导致知识点结合不紧密... 原生的中..我们的写法是这样的 ` 王蒿大爷 function myFunction(){ document.getElementById ...
vue中展示列表，类似formatter方法及在vue中点击页面信息事件
后台返回文件路径及文件名,前端展示只需要展示文件名,在Easyui中使用formatter方法很轻松就实现了,在vue中,需要使用过滤方式: formatterfj方法为截取字符串返回文件名该方法应 ...
vue中点击添加class，双击去掉class
VUE中 html 中 <ul id="shoppingList" v-on:click="addClass($event)" class="i ...
html中点击文字变色,html选中文字背景/字变色
iconfont使用,亲测 iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种 ...
js实现复制并能保留原格式粘贴；vue中点击复制粘贴功能；vue复制功能（不需要插件）；
使用场景:vue项目中遇到点击按钮,复制文本的功能.复制成功后可以黏贴. <div @click="copyDesc">复制</div>methods:{c ...

vue 中点击切换图标，切换选中状态

vue 中点击切换图标，切换选中状态相关推荐

最新文章

热门文章