vue实现选项卡切换--不用ui库
vue的ui库中基本都有选项卡切换的组件,但是在项目开发过程中却不一定能很好的为我们所用,因为里面的样式和 一些状态并不能很好的根据我们的项目需求进行定制.最近项目中使用的是vant-ui
中的标签页,也就是选项卡,项目需要选项卡中的内容overFLow:auto
,但是无论怎么设置,上面的选项都会跟着一起滚动,实在是头疼的很,所以决定,自行解决吧.
效果图:
需求分析
- 选项卡点击切换时选项的背景颜色或字体需要变化
- 选项卡中每个选项的产品数量要根据后端返回数据进行变化
- 点击选项时下面内容要对应发生改变
- 滚动时选项不动,只内容发生滚动
下面就直接上成品代码
<template>
<div class="box">
<div class="menu-list">
<div class="total" :class="{active:item.id === sel}" v-for="item in tabs" :key="item.id" @click="select(item)">
{{ item.label }}
<span>
({{item.id==1?num=yxf +ywg +wxz :item.id === 2?num = yxf:item.id === 3?num = ywg:num = wxz}})
</span>
</div>
</div>
<div class="text">
<div class="all" v-show="sel === 1">1111</div>
<div class="all" v-show="sel === 2">222</div>
<div class="all" v-show="sel === 3">333</div>
<div class="all" v-show="sel === 4">444</div>
</div>
</div>
</template>
初始化的数据:
<script>
export default {
data () {
return {
yxf:4,
wxz:5,
ywg:1,
sel:1,
tabs: [
{label: '全部',num:0, id: 1},
{label: '已下发',num: 0, id: 2},
{label: '维修中',num: 0, id: 3},
{label: '已完工',num:0, id: 4},
]
}
},
}
</script>
点击事件:
methods: {
select(item){
this.sel = item.id;
},
},
定义样式:
<style scoped>
.equi_container {
display: flex;
flex-direction: column;
}
.menu-list {
height: 0.44rem;
display: flex;
}
.total{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/*height: 100%;*/
/*line-height: 0.44rem;*/
background:#F4FAFF;
color:#4c8fff;
text-align:center;
float:left
}
.total.active {
background: #4c8fff;
color: #FFFFFF;
}
.text{
flex: 1;
overflow: auto;
}
</style>
可直接复制代码看效果,如有任何疑问,欢迎屏幕下方留言...
vue实现选项卡切换--不用ui库的更多相关文章
- vue实现选项卡切换效果
效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...
- Vue实现选项卡切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 通过UI库深入了解Vue的插槽的使用技巧
Vue官网对于插槽的介绍比较简略,插槽本身也比较"烧脑",很容易看晕,我就一直没看懂,直到 使用了element-plus的组件的插槽. 其实我们可以换一个角度来理解插槽,就会豁然 ...
- vue常见前端UI库
vue常见前端UI库 VUE资源汇总:https://github.com/RuMengkai/awesome-vue VUX 项目主页:https://vux.li/#/ github地址:http ...
- ElementUI(vue UI库)、iView(vue UI库)、ant design(react UI库)中组件的区别
ElementUI(vue UI库).iView(vue UI库).ant design(react UI库)中组件的区别: 事项 ElementUI iView ant design 全局加载进度条 ...
- 用C++写UI库最本质的思想就是不用C++写UI(如何用 C++ 从零编写 GUI?内含多个开源UI作者的回复,非常精彩)
作者:Bingo链接:https://www.zhihu.com/question/24462113/answer/83371803来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...
- vue中使用第三方UI库的移动端rem适配方案
需求:使用vue-cli脚手架搭建项目,并且使用第三方的UI库(比如vant,mint ui)的时候,因为第三方库用的都是用px单位,无法使用rem适配不同设备的屏幕. 解决办法:使用px2rem-l ...
- vue实现tab选项卡切换效果
tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...
- 移动Web UI库(H5框架)
1.Framework7 Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile a ...
随机推荐
- HTML5 Canvas(基础知识)
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- 利用pandas选取某个属性符合指定条件的所有行
最近遇到利用pandas选取指定行的需求,经常忘记,在此做下记录 选取某个属性等于特定值的所有行记录 df[(df[‘column_name’] == target_value)] 注:等于用 '== ...
- 第八次——非确定的自动机NFA确定化为DFA
NFA 确定化为 DFA 子集法: f(q,a)={q1,q2,…,qn},状态集的子集 将{q1,q2,…,qn}看做一个状态A,去记录NFA读入输入符号之后可能达到的所有状态的集合. 步骤: 1. ...
- sf-git机制
为什么要专门写一篇关于sf科技公司的GIT管理机制呢?因为本周经历了两天的学习和考试,刚开始没在意,因为之前公司也用的GIT,所以没怎么看视频,就看了文档,练习考试时候才发现并非以前的那种git流程, ...
- 爬虫之BeautifulSoup类
安装:pip install BeautifulSoup4 下表列出了主要的解析器,以及它们的优缺点:看个人习惯选取自己喜欢的解析方式 # 获取html代码 import requests r = r ...
- Oracle 11.2 RAC on Redhat 6.5 安装最佳实践
本文讲述了在Redhat 6.5 上安装Oracle 11.2 RAC的详细步骤,是一篇step by step指南,全文没有什么技术难度,只要一步步跟着做就一定能安装成功. 环境介绍 分类 项目 说 ...
- golang.org/x/sys/unix: unrecognized
安装的过程中报错 : package golang.org/x/sys/unix: unrecognized import path "golang.org/x/sys/unix" ...
- watch 同步表单 记得$nextTick,否则不会同步更新到组件内
watch 同步表单 记得$nextTick,否则不会同步更新到组件内 watch: { 'formData.aaa' (val) { this.$nextTick(() => { this.f ...
- Python3学习之路~9.3 GIL、线程锁之Lock\Rlock\信号量、Event
一 Python GIL(Global Interpreter Lock) 全局解释器锁 如果一个主机是单核,此时同时启动10个线程,由于CPU执行了上下文的切换,让我们宏观上看上去它们是并行的,但实 ...
- Java 入门学习知识点整理
[JAVA一个文件写多个类 ( 同级类 ) 规则和注意点] 在一个.java文件中可以有多个同级类, 其修饰符只可以public/abstract/final/和无修饰符 public修饰的只能有一 ...