精华内容
下载资源
问答
  • {{item}}import tab1 from '@/components/common/tab1.vue'import tab2 from '@/components/common/tab2.vue'import tab3 from '@/components/common/tab3.vue'export default {components: {tab1,tab2,tab3},data()...
    • {{item}}

    import tab1 from '@/components/common/tab1.vue'

    import tab2 from '@/components/common/tab2.vue'

    import tab3 from '@/components/common/tab3.vue'

    export default {

    components: {

    tab1,tab2,tab3

    },

    data(){

    return{

    tabList:['tab1','tab2','tab3'],

    nowIndex:0,

    isShow:false

    }

    },

    methods:{

    toggleTab(index){

    this.nowIndex = index

    }

    }

    }

    .all{

    width: 600px;

    margin: auto;

    }

    ul{

    height: 60px;

    width: 100%;

    padding: 0;

    margin: 0;

    list-style: none;

    border:1px solid #ccc;

    border-bottom:none;

    }

    li{

    width: 33.1%;

    height: 60px;

    float: left;

    border-right: 1px solid #ccc;

    }

    .content{

    width: 600px;

    height:300px;

    }

    .con{

    width: 600px;

    height:300px;

    border: 1px solid #ccc;

    }

    展开全文
  • 第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作){{tab.type}}import tab1from './components/tabs/tab1.vue'import tab2from './components/tabs/tab2.vue'exportdefault{name:'app',data(){...

    第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作)

    • {{tab.type}}

    name:'app',

    data(){return{

    active:0,

    currentView:'tab1',

    tabs:[

    {

    type:'tab1',

    view:'tab1'},

    {

    type:'tab2',

    view:'tab2'}

    ]

    }

    },

    methods:{

    toggle(i,v){this.active=i;this.currentView=v;

    }

    },

    components:{

    tab1,

    tab2

    }

    }

    font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/*text-align: center;

    color: #2c3e50;

    margin-top: 60px;*/}

    ul{

    width:200px;

    display:flex;

    }

    ul li{

    width:100px;

    height:40px;

    background: #ccc;

    display: inline-flex;

    border-right:1px solid #ddd;

    justify-content: center;

    align-items: center;

    cursor:pointer

    }

    ul li.active{

    background:#333;

    }

    第二种(比较死板,内容被固定住了)

    • {{tab}}
    {{tabCon}}

    /*import tab1 from './components/tabs/tab1.vue'

    import tab2 from './components/tabs/tab2.vue'*/

    export default {

    name: 'app',

    data(){

    return {

    tabs:['按钮1','按钮2'],

    tabsCon:['内容1','内容2'],

    num:0

    }

    },

    methods:{

    table(index) {

    this.num = index;

    }

    }

    /* components:{

    tab1,

    tab2

    }*/

    }

    #app {

    font-family: 'Avenir', Helvetica, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    /* text-align: center;

    color: #2c3e50;

    margin-top: 60px; */

    }

    ul{

    width:200px;

    display:flex;

    }

    ul li{

    width:100px;

    height:40px;

    background: #ccc;

    display: inline-flex;

    border-right:1px solid #ddd;

    justify-content: center;

    align-items: center;

    cursor:pointer;

    }

    ul li.active{

    background:#333;

    }

    第三种(比较死板,内容被固定住了,使用过jquery的人习惯用的方式)

    {{value.content}}

    /*import tab1 from './components/tabs/tab1.vue'

    import tab2 from './components/tabs/tab2.vue'*/

    export default {

    name: 'app',

    data(){

    return {

    tab: [{

    title: 'tab1',

    content: 'this is tab1',

    isactive: true

    }, {

    title: 'tab2',

    content: 'this is tab2',

    isactive: false

    }]

    }

    },

    methods: {

    change(index){

    this.tab.forEach(function(v){

    v.isactive=false

    })

    this.tab[index].isactive=true

    }

    }

    }

    *{

    padding:0;

    margin:0;

    box-sizing:border-box;

    }

    #app {

    font-family: 'Avenir', Helvetica, Arial, sans-serif;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    /* text-align: center;

    color: #2c3e50;

    margin-top: 60px; */

    width:100%;

    }

    .nav-tab{

    width:100%;

    height: 30px;

    line-height:30px;

    display:flex;

    justify-content: space-around;

    }

    .nav-tab a{

    flex:1;

    text-align: center;

    background:#ccc;

    border-right:1px solid #ddd;

    cursor:pointer;

    }

    .nav-tab a.active{

    border-bottom:1px solid red;

    }

    .tabs .tab{

    display: none;

    }

    .tabs .tab.active{

    display:block;

    }

    展开全文
  • 需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感Tabs.active{background: #eee;}.tabs{width: 200px;height: 20px;font:0;padding:0;}.li-tab{width: 50%;height: 100%;display:inline...

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感

    Tabs

    .active{

    background: #eee;

    }

    .tabs{

    width: 200px;

    height: 20px;

    font:0;

    padding:0;

    }

    .li-tab{

    width: 50%;

    height: 100%;

    display:inline-block;

    text-align: center;

    }

    .divTab{

    width: 200px;height: 300px;

    }

    • @click="toggleTabs(index)"

      :class="{active:index!=nowIndex}">{{item}}

    我是tab1
    我是tab2

    var app=new Vue({

    el:'#app',

    data:{

    tabsParam:['tab1','tab2'],//(这个也可以用对象key,value来实现)

    nowIndex:0,//默认第一个tab为激活状态

    },

    methods:{

    toggleTabs:function(index){

    this.nowIndex=index;

    },

    }

    })

    实现效果如下:

    感谢原作者

    展开全文
  • 错误提示: expected indentation of 2 spaces but found 1 tab但是 tab 和 space 提示真的很头疼,可以通过下面方式解决找到vue 项目中的 .eslintrc.js , 在rules 中 添加'no-tabs': 0,'no-mixed-spaces-and-tabs':...

    团队开发中经常遇到需要使用eslint 语法纠正的情况;

    错误提示: expected indentation of 2 spaces but found 1 tab

    但是 tab 和 space 提示真的很头疼,可以通过下面方式解决

    找到vue 项目中的 .eslintrc.js , 在rules 中 添加

    'no-tabs': 0,

    'no-mixed-spaces-and-tabs': 0,

    'indent': ["off", "tab"],

    'no-trailing-spaces': 0,

    1

    2

    3

    4

    // https://eslint.org/docs/user-guide/configuring

    module.exports = {

    root: true,

    parser: 'babel-eslint',

    parserOptions: {

    sourceType: 'module'

    },

    env: {

    browser: true,

    },

    // https://github.com/standard/standard/blob/master/docs/RULES-en.md

    extends: 'standard',

    // required to lint *.vue files

    plugins: [

    'html'

    ],

    // add your custom rules here

    'rules': {

    // allow paren-less arrow functions

    'arrow-parens': 0,

    // allow async-await

    'generator-star-spacing': 0,

    // allow debugger during development

    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,

    'no-tabs': 0,

    'no-mixed-spaces-and-tabs': 0,

    'indent': ["off", "tab"],

    'no-unused-vars': 0,

    'no-trailing-spaces': 0,

    "eqeqeq": 0

    }

    }

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    更多的eslint 规则可以参考官网 => http://eslint.cn/docs/rules/

    ---------------------

    作者:Aimee芊

    来源:CSDN

    原文:https://blog.csdn.net/aimee1608/article/details/81045362

    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • {{{item}}}@import"tab.sass"var VueTouch = require ('vue-touch');Vue.use (VueTouch);import requestAnimFrame from"utils/requestAnimFrame"const sign= (num)=>{return num >= 0 ? 1 : -1}exportdefault....
  • 页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新,减少页面重新渲染以及减少请求实现方法:使用包裹组件 列表页面跳转详情 ,列表页面保持上一次...
  • 在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉:$('.tab .title').find('.item').removeClass('current').eq(index)....
  • tabhtml,body {height: 100%;margin: 0;padding: 0;background-color: #58596b;}.active {color: #fff;background: #e74c3c;}#app {width: 800px;height: 400px;margin: 100px auto;background-color: #fff;box-shad...
  • tabhtml,body {height: 100%;margin: 0;padding: 0;background-color: #58596b;}.active {color: #fff;background: #e74c3c;}#app {width: 800px;height: 400px;margin: 100px auto;background-color: #fff;box-shad...
  • 在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要{path: 'fundProListG',... require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve),title: '基金首页',redirect: 'fundProListG/...
  • 背景最近几个项目都有流程式的表单输入。产品提出,在上一步的表单提交完毕之后,不能够修改但是依然要展示给用户(用户在填写下一步的表单时可能需要参照上一步...使用Tab键索引到元素之后,还是可以触发表单行为;...
  • event.preventDefault() } } 然后记得离开页面要销毁监听 destroyed () { window.removeEventListener('keydown', event => { console.log(event.value) event.preventDefault() }) 这样的话按下tab键就不会在浏览器...
  • Document*{padding: 0;margin: 0}#tabemplyee{width: 800px;height: 300px;margin: 0 auto; background-color: #ddd;}.e_tab{height: 100%;line-height: 50px;background-color: #999;...}.e_tab ul li{ dis...
  • 用户列表tab标签不可删除,默认显示,用户列表页是一个table,每一行显示一个用户的基本信息。点击该行,新建一个tab标签页,显示用户详情。新增的tab均可删除。可以由具体标签页点击切换至用户列表tab标签页。问题...
  • 效果:点击横向的选项tab,在纵向显示tab的子选项tabchild,在右边显示子选项卡对应的内容准备HTML*{padding: 0;margin: 0;}.box{width: 100%;height: 100%;position: relative;}.tabul{width: 100%;margin: 0 auto;...
  • tab切换vue

    2021-04-02 16:42:16
    tab切换vue 实现联动效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
  • vue-tabvue.js的轻触标签。 安装 npm install --save vue-swipe-tab@2.0.2 使用模块导入 在app.js(entry js)中使用以下代码: import Tab from 'vue-swipe-tab'; Vue.use(Tab); 用法 [removed] export default...
  • 在工作中我们常常要用到tab组件,如果有用第三方组件库的话一般都会有这个组件,但如果没有使用第三方组件库,或者想要自定义tab,那么或许这个无依赖的tab组件将会极大地节约你的开发时间。如何使用?首先先安装: ...
  • vuetab

    2019-03-29 17:21:48
    <body> <div class="app"> <ul> <li v-for="(item,index) in list" @click="tab(index)">{{item.tab}} <div v-show="item.show"> ...
  • 今天要想做一个类似于app切换效果的demo,既点击这个时,获取相应数据动画已经加上了,但是不知道怎么才能进行切换像进入详情页那个,已经有办法解决了,但是tab切换这个却发现无从下手,哪位大神能给提供一下思路吗...
  • vue tab切换

    2020-07-24 11:35:43
    vue tab切换 1.创建 Text1 Text2 Text3 三个vue文件 2.在router.js中添加 5. 默认显示Text1 6.完成 显示出来就代表完成了
  • 介绍cnode社区是一个中文的nodeJs社区:CNode:Node.js专业中文社区实现思路页面基本结构头部、中间的列表、侧边栏、文章详情页、用户个人信息、分页然后每个部分用组件渲染组件模块Header 头部模块PostList...vue2 ...
  • vue tab实例

    2019-01-08 21:56:11
    vue tab实例 vue tab选择是我们很常用的一个小功能,这里只是做一个记录,方便查阅,就举一个简单的例子了。效果如图所示:  一、vue代码 (1)html部分 &lt;div class="dataSelect"&gt; ...
  • tab切换vue版本

    2021-03-25 20:16:49
    <h1 @click="num = item.id">{{item.title}}</h1> <div v-show="num == item.id"> {{item.content}} </div> </li> </ul> </div>...
  • 现在很多的后台管理系统都采用tab选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再进行切换,而vue要做tab选项卡,推荐使用实现a标签的效果,然后使用实现插槽的...
  • 上代码://点击按钮//tab被点击的几个按钮需要被循环出来,方便获取其index//点击事件,通过被选择的按钮(index)给自定义属性赋值@click="clickTab(index)"//让被选择的选项卡按钮与众不同,改变样式:class="{...
  • 在做混合开发的项目时,通常需要实现跟原生一样的转场动画,之前有个vue项目使用了vue路由钩子结合animate.css实现的,但没研究透所以在App里效果并不是很理想。后来发现了一款特别方便的插件vueg让转场实现起来特别...
  • Vue Router Tab

    2020-09-25 13:11:07
    Vue Router Tab 是基于 Vue.js 和 Vue Router 的路由页签组件,用来实现多页签页面的管理。 官网 演示 包含的功能 ✅ 响应路由变化来打开或切换页签 ✅ 页签过多鼠标滚轮滚动 ✅ 页签拖拽排序 ✅ 支持页签打开、切换...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,333
精华内容 1,733
关键字:

tabvue

vue 订阅