vue里的tab标签
<template>
<div class="Test2">
<div class="tabs_wrap" v-model="mytabActive">
<div class="tabs_line"></div>
<div class="tab" name="0" @click="changeTab(0)">目录</div>
<div class="tab" name="1" @click="changeTab(1)">简介</div>
<div class="tab" name="2" @click="changeTab(2)">评论</div>
<div class="tab" name="3" @click="changeTab(3)">相关课程</div>
</div>
<div class="tabContent">
<div class="tab_pane">11111111</div>
<div class="tab_pane">222222</div>
<div class="tab_pane">3333333333</div>
<div class="tab_pane">4444444444</div>
</div>
</div>
</template>
<script>
import { conf } from "../assets/js/main"
export default {
name: 'Test2',
components: {
},
data() {
return {
mytabActive: 0
}
},
created() {
},
mounted() {
conf.setTitle('登录');
this.tabStyle();
},
beforeDestroy() {},
methods: {
tabStyle() {
var tabWidth = $('.tab').eq(0).width();
$('.tab').eq(this.mytabActive).css('color','#323232')
$('.tabs_line').css('width', tabWidth * 0.6 + 'px');
$('.tabs_line').css("transform", "translateX(" + tabWidth * 0.2 + "px)");
$('.tabs_pane').eq(this.mytabActive).show();
},
changeTab(index) {
var tabWidth = $('.tab').eq(index).width();
$('.tabs_line').css('width', tabWidth * 0.6 + 'px');
var num = tabWidth * index + tabWidth * 0.2;
$('.tabs_line').css({ "transform": "translateX(" + num + "px)"});
$('.tab_pane').hide().eq(index).show();
},
//提示
tips(text) {
conf.toast(text)
}
} //end enthods
}
</script>
<style lang="less" scoped>
.tabs_wrap {
.width100();
display: flex;
user-select: none;
position: relative;
background-color: #fff;
position: relative;
height: 44px;
.tab {
flex: 1;
text-align: center;
color:#7d7e80;
font-size: 28/75rem;
}
}
.tab_pane {
display: none;
}
.tabs_line {
z-index: 1;
left: 0;
bottom: 15px;
height: 2px;
position: absolute;
border-radius: 2px;
background-color: #f44;
transition-duration: 0.3s;
}
</style>
vue里的tab标签的更多相关文章
- vue里的tab控件
如下图,v-model绑定的值,这个值在js里一旦改变,视图就会切换到相应的tab页,这意味着一定要先给tab页内容数据赋值,再改变这个tabsIndex的值 如下图,先赋值data列表数据,在更改t ...
- 前端vue 里的tab切换 减少dom操作
<div class="vuedemo"> <div class="all"> <div class="tabone&q ...
- Vue指令:v-for的用法;v-bind绑定class的几种写法;tab标签切换
一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...
- 使用vue封装一个tab栏切换的左侧导航栏的公共组件
首先看最终效果图: 1.compent文件夹里添加tab文件夹,里面创建index.vue index.js index.css index.vue内的template部份代码如下:(最新更正:代码 ...
- ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题
今天工作遇到一个问题: 需求背景:页面中有几个tab,需要根据登录用户的权限控制tab标签的显示与隐藏 . <el-tabs @tab-click="handleClick" ...
- 如何一行jquery代码写出tab标签页(链式操作)
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- Bootstrap插件——(Tab)标签页
项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...
- Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
随机推荐
- DBGrid和DBGridEH
二.应用实例 Enlib3.0组件包安装成功后 A.定制标题行 1.制作复杂标题行 标题行可设为2行以上高度,并可以为多列创建一个共同的父标题行.为实现这个效果,需在各个列标题属性中以“|”分隔父标题 ...
- Eclipse_插件_01_tomcat插件的安装
1.Eclipse的tomcat插件下载地址: (1)https://sourceforge.net/projects/tomcatplugin/files/updatesite/plugins/ ( ...
- 关于python包,模块,.pyc文件和文件导入理解
参考文献 一.包 包是一个文件夹,用来存放模块和子包. 包里一般会有一个__init__.py的文件(也可以没有). 包里会有一个__pycache__文件夹,存放.py文件经解释器解释后的中间字节码 ...
- leetcode 201. Bitwise AND of Numbers Range(位运算,dp)
Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...
- Android中高效的显示图片之一 ——加载大图
在网上看了不少文章,发现还是官方文档介绍最详细,把重要的东西简单摘要出来.详细可看官方文档地址 ( http://www.bangchui.org/read.php?tid=9 ) . 在应用中显示图 ...
- luogu1353 Running
dp[i][j]表示走i分钟疲劳值为j时的最远距离 然后搞一下就好啦 #include <iostream> #include <cstdio> #include <al ...
- HDUj2612(两个起点找到最近的目的地)
Find a way Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 一 ThreadLocal
(1) Threadlocal定义: 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它 ...
- nginx的安装及基本配置
在CentOS7(mini)上安装: [root@~ localhost]#lftp 172.16.0.1 lftp 172.16.0.1:/pub/Sources/7.x86_64/nginx> ...
- css菜鸟之HTML 中块级元素设置 height:100% 的实现
HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...