Vue.js组件实现选项卡以及切换特效

前端  /  管理员 发布于 4年前   387

Vue.js组件实现选项卡以及切换动画特效，供大家参考，具体内容如下

最近在学习Vue，当看梁灏大神写的《Vue.js实战》时看到了关于用组件实现选项卡功能，我也根据课后的练习加上自己的理解重新编写了一下。

组件分为pane.js和tabs.js两个部分，话不多说，直接上代码。

      
     //transiton是Vue自带封装的，不懂的同学可以去找文档，主要是可以实现动画             标签一的内容                   标签二的内容                   标签三的内容              

//tabs.jsVue.component('tabs', { template: ` 
  
  
   {{item.label}}     关闭/打开     
         `, props: {  value: {   type: [String, Number],  }, }, data: function () {  return {   currentValue: this.value,   navList: [],  }; }, methods: {  tabCls: function (item) {   return [    'tabs-tab',    {     'tabs-tab-active': item.name === this.currentValue,    },   ];  },  getTabs() {   return this.$children.filter(function (item) {    return item.$options.name === 'pane';   });  },  updateNav() {   this.navList = [];   var _this = this;   this.getTabs().forEach(function (pane, index) {    _this.navList.push({     label: pane.label,     name: pane.name || index,     bool: pane.closable,    });    if (!pane.name) pane.name = index;    if (index === 0) {     if (!_this.currentValue) {      _this.currentValue = pane.name || index;     }    }   });   this.updateStatus();  },  updateStatus() {   var tabs = this.getTabs();   var _this = this;   tabs.forEach(function (tab) {    return (tab.show = tab.name === _this.currentValue);   });  },  handleChange: function (index) {   var nav = this.navList[index];   var name = nav.name;   this.currentValue = name;   this.$emit('input', name);   // this.$emit('on-click', name);  },  removePane: function () {   var bool = this.navList[1].bool;   console.log(bool);   if (bool) {    this.navList[1].bool = false;    this.currentValue = '0';   }   if (!bool) {    this.navList[1].bool = true;    this.currentValue = '1';    this.$emit('input', '1');   }  }, }, watch: {  value: function (val) {   this.currentValue = val;  },  currentValue: function () {   console.log('demo');   this.updateStatus();  }, },});

//pane.jsVue.component('pane', { name: 'pane', template: ` 
     `, props: {  name: {   type: String  },  label: {   type: String,   default: ''  },  closable: {   type: Boolean,   default: true  } }, data: function () {  return {   show: true  } }, methods: {  updateNav() {   this.$parent.updateNav();  } }, watch: {  label() {   this.updateNav();  } }, mounted() {  this.updateNav(); }})

//style.css.tabs { font-size: 14px; color: black;}.tabs-bar:after { content: ''; display: block; width: 100%; height: 1px; position: relative; background: rgba(78, 81, 128, 0.5);}.tabs-tab { display: inline-block; padding: 4px 16px; margin-right: 6px; color: rgba(0, 0, 0, 0.6); background: rgba(134, 134, 131, 0.137); border: 1px solid rgba(154, 214, 248, 0.856); cursor: pointer; position: relative;}.tabs-tab-active { background: rgb(252, 251, 251); color: rgba(0, 0, 0, 1); border-top: 1px solid rgba(154, 214, 248, 0.856); border-bottom: 1px solid white;}/* .tabs-tab-active:before { content: ''; display: block; height: 5px; background: grey; position: absolute; top: 0; left: 0; right: 0;} */.tabs-content { position: relative; left: 10px; top: 30px; padding: 8px 0;}/* 可以设置不同的进入和离开动画 *//* 设置持续时间和动画函数 */.slide-fade-enter-active { transition: all 1.3s ease;}.slide-fade-leave-active { transition: all 1.8s cubic-bezier(1, 0.5, 0.8, 1);}.slide-fade-enter,.slide-fade-leave-to/* .slide-fade-leave-active for below version 2.1.8 */ { transform: translateY(30px); opacity: 0;}

//text.jsvar app = new Vue({ el: '#app', data: {  activeKey: '1', },})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• Vue.js tab实现选项卡切换
• 使用vue.js写一个tab选项卡效果
• Vue.js组件tab实现选项卡切换
• Vue.js组件tabs实现选项卡切换效果