当前位置:首页 > 电脑知识 > 正文内容

这都可以?(使用vue.js)vue vue.js,Vue.js 实现的 3D Tab菜单,Vue.js 实现的 3D Tab菜单,

sauo3年前 (2022-12-15)电脑知识117

这是一款Vue.js实现的3D悬停Tab菜单,设计新颖创新,鼠标悬停展示3d卡片效果,三个Tab标签可切换,非常适合用于展示您的产品,作品等,喜欢不要犹豫。它的核心是基于vue和bootstrap实现,因此扩展起来非常方便,你可以任意添加或者减少tab页面数量,同时只要更新对应tab页面的CSS代码即可,无须修改js代码。

需要引入Vue.js库与bootstrap.js库

<scriptsrc=js/vue.min.js></script><scriptsrc=js/bootstrap.min.js></script>

HTML代码:

<divid="app-container"data-tilt><divid="app"><vue-tabsid="tabs"><v-tabtitle="First Tab"class="tab":selected="true"><divclass="tab-content"><divclass="tab-image first-image"></div><divclass="tab-content-text"><h1>First Header</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt nu aliqua. Sollicit udin purus faucibus ornare aliquam ultrices sagittis orci a scelerisque a consectetur atna purus.</p></div></div></v-tab><v-tabtitle="Second Tab"class="tab"><divclass="tab-content"><divclass="tab-image second-image"></div><divclass="tab-content-text"><h1>Second Header</h1><p>Ac tortor vitae purus faucibus ornare suspendisse uis tristique sed nisi. Consectetur libero id ax faucibus in ornare faucibus nislt udin purus fi faucibus ac ornare aliquam ultrices in purus faucibu.</p></div></div></v-tab><v-tabtitle="Third Tab"class="tab"><divclass="tab-content"><divclass="tab-image third-image"></div><divclass="tab-content-text"><h1>Third Header</h1><p>Scelerisque fermentum dui faucibus in ornare id. Amet consectetur adipiscing elit duis tristique sollicitudin purus faucibus ornare aliquam ultrices sagittis nibh elit duis nubro tristique itae purus faucibus.</p></div></div></v-tab></vue-tabs></div></div>

核心代码插件:

(function(global, factory){typeof exports ===object&&typeofmodule!==undefined? factory(exports):typeof define ===function&& define.amd ? define([exports], factory):(factory((global.vueTabs ={})));}(this,(function(exports){use strict;var nestRE =/^(attrs|props|on|nativeOn|class|style|hook)$/;var babelHelperVueJsxMergeProps =function mergeJSXProps(objs){return objs.reduce(function(a, b){var aa, bb, key, nestedKey, temp;for(key in b){ aa = a[key]; bb = b[key];if(aa && nestRE.test(key)){// normalize classif(key ===class){if(typeof aa ===string){ temp = aa; a[key]= aa ={}; aa[temp]=true;}if(typeof bb ===string){ temp = bb; b[key]= bb ={}; bb[temp]=true;}}if(key ===on|| key ===nativeOn|| key ===hook){// merge functionsfor(nestedKey in bb){ aa[nestedKey]= mergeFn(aa[nestedKey], bb[nestedKey]);}}elseif(Array.isArray(aa)){ a[key]= aa.concat(bb);}elseif(Array.isArray(bb)){ a[key]=[aa].concat(bb);}else{for(nestedKey in bb){ aa[nestedKey]= bb[nestedKey];}}}else{ a[key]= b[key];}}return a;},{});};function mergeFn(a, b){returnfunction(){ a.apply(this, arguments); b.apply(this, arguments);};}varVueTabs={ name:vue-tabs, props:{ activeTabColor:String, activeTextColor:String, disabledColor:String, disabledTextColor:String,/** * Tab title position: center | bottom | top */ textPosition:{ type:String,default:center},/** * Tab type: tabs | pills */ type:{ type:String,default:tabs}, direction:{ type:String,default:horizontal},/** * Centers the tabs and makes the container div full width */ centered:Boolean, value:[String,Number,Object]}, data:function data(){return{ activeTabIndex:0, tabs:[]};}, computed:{ isTabShape:function isTabShape(){returnthis.type ===tabs;}, isStacked:function isStacked(){returnthis.direction ===vertical;}, classList:function classList(){var navType =this.isTabShape ?nav-tabs:nav-pills;var centerClass =this.centered ?nav-justified:;var isStacked =this.isStacked ?nav-stacked:;returnnav + navType ++ centerClass ++ isStacked;}, stackedClass:function stackedClass(){returnthis.isStacked ?stacked:;}, activeTabStyle:function activeTabStyle(){return{ backgroundColor:this.activeTabColor, color:this.activeTextColor };}}, methods:{ navigateToTab:function navigateToTab(index, route){this.changeTab(this.activeTabIndex, index, route);}, activateTab:function activateTab(index){this.activeTabIndex = index;var tab =this.tabs[index]; tab.active =true;this.$emit(input, tab.title);}, changeTab:function changeTab(oldIndex, newIndex, route){var oldTab =this.tabs[oldIndex]||{};var newTab =this.tabs[newIndex];if(newTab.disabled)return;this.activeTabIndex = newIndex; oldTab.active =false; newTab.active =true;this.$emit(input,this.tabs[newIndex].title);this.$emit(tab-change, newIndex, newTab, oldTab);this.tryChangeRoute(route);}, tryChangeRoute:function tryChangeRoute(route){if(this.$router && route){this.$router.push(route);}}, addTab:function addTab(item){var index =this.$slots.default.indexOf(item.$vnode);this.tabs.splice(index,0, item);}, removeTab:function removeTab(item){var tabs =this.tabs;var index = tabs.indexOf(item);if(index >-1){ tabs.splice(index,1);}}, getTabs:function getTabs(){if(this.$slots.default){returnthis.$slots.default.filter(function(comp){return comp.componentOptions;});}return[];}, findTabAndActivate:function findTabAndActivate(tabNameOrIndex){var indexToActivate =this.tabs.findIndex(function(tab, index){return tab.title === tabNameOrIndex || index === tabNameOrIndex;});if(indexToActivate ===this.activeTabIndex)return;if(indexToActivate !==-1){this.changeTab(this.activeTabIndex, indexToActivate);}else{this.changeTab(this.activeTabIndex,0);}}, renderTabTitle:function renderTabTitle(index){var position = arguments.length >1&& arguments[1]!==undefined? arguments[1]:top;var h =this.$createElement;if(this.tabs.length ===0)return;var tab =this.tabs[index];var active = tab.active, title = tab.title;var titleStyles ={ color:this.activeTabColor };if(position ===center) titleStyles.color =this.activeTextColor;var simpleTitle = h(span,{class:title title_+ position, style: active ? titleStyles :{}},[position ===center&&this.renderIcon(index), title]);if(tab.$slots.title)return tab.$slots.title;if(tab.$scopedSlots.title)return tab.$scopedSlots.title({ active: active, title: title, position: position, icon: tab.icon, data: tab.tabData });return simpleTitle;}, renderIcon:function renderIcon(index){var h =this.$createElement;if(this.tabs.length ===0)return;var tab =this.tabs[index];var icon = tab.icon;var simpleIcon = h(i,{class: icon },[\xA0]);if(!tab.$slots.title && icon)return simpleIcon;}, tabStyles:function tabStyles(tab){if(tab.disabled){return{ backgroundColor:this.disabledColor, color:this.disabledTextColor };}return{};}, renderTabs:function renderTabs(){var _this =this;var h =this.$createElement;returnthis.tabs.map(function(tab, index){if(!tab)return;var route = tab.route, id = tab.id, title = tab.title, icon = tab.icon, tabId = tab.tabId;var active = _this.activeTabIndex === index;return h(li, babelHelperVueJsxMergeProps([{ attrs:{ name:tab, id:t-+ tabId,aria-selected: active,aria-controls:p-+ tabId, role:tab},class:[tab,{ active: active },{ disabled: tab.disabled }], key: title },{ on:{click:function click($event){for(var _len = arguments.length, attrs =Array(_len >1? _len -1:0), _key =1; _key < _len; _key++){ attrs[_key -1]= arguments[_key];}(function(){return!tab.disabled && _this.navigateToTab(index, route);}).apply(undefined,[$event].concat(attrs));}}}]),[_this.textPosition ===top&& _this.renderTabTitle(index, _this.textPosition), h(a, babelHelperVueJsxMergeProps([{ attrs:{ href:#, role:tab}, style: active ? _this.activeTabStyle : _this.tabStyles(tab),class:[{active_tab: active },tabs__link]},{ on:{click:function click($event){for(var _len2 = arguments.length, attrs =Array(_len2 >1? _len2 -1:0), _key2 =1; _key2 < _len2; _key2++){ attrs[_key2 -1]= arguments[_key2];}(function(e){ e.preventDefault();returnfalse;}).apply(undefined,[$event].concat(attrs));}}}]),[_this.textPosition !==center&&!tab.$slots.title && _this.renderIcon(index), _this.textPosition ===center&& _this.renderTabTitle(index, _this.textPosition)]), _this.textPosition ===bottom&& _this.renderTabTitle(index, _this.textPosition)]);});}}, render:function render(){var h = arguments[0];var tabList =this.renderTabs();return h(div,{class:[vue-tabs,this.stackedClass]},[h(div,{class:[{nav-tabs-navigation:!this.isStacked },{left-vertical-tabs:this.isStacked }]},[h(div,{class:[nav-tabs-wrapper,this.stackedClass]},[h(ul,{class:this.classList, attrs:{ role:tablist}},[tabList])])]), h(div,{class:[tab-content,{right-text-tabs:this.isStacked }]},[this.$slots.default])]);}, watch:{ tabs:function tabs(newList){if(newList.length >0&&!this.value){if(newList.length <=this.activeTabIndex){this.activateTab(this.activeTabIndex -1);}else{this.activateTab(this.activeTabIndex);}}if(newList.length >0&&this.value){this.findTabAndActivate(this.value);}}, value:function value(newVal){this.findTabAndActivate(newVal);}}};varVTab={ name:v-tab, props:{ title:{ type:String,default:}, icon:{ type:String,default:}, tabData:{default:null},/*** * Function to execute before tab switch. Return value must be boolean * If the return result is false, tab switch is restricted */ beforeChange:{ type:Function}, id:String, route:{ type:[String,Object]}, disabled:Boolean, transitionName:String, transitionMode:String}, computed:{ isValidParent:function isValidParent(){returnthis.$parent.$options.name ===vue-tabs;}, hash:function hash(){return#+this.id;}, tabId:function tabId(){returnthis.id ?this.id :this.title;}}, data:function data(){return{ active:false, validationError:null};}, mounted:function mounted(){this.$parent.addTab(this);}, destroyed:function destroyed(){if(this.$el &&this.$el.parentNode){this.$el.parentNode.removeChild(this.$el);}this.$parent.removeTab(this);}, render:function render(){var h = arguments[0];return h(section,{class:tab-container, attrs:{ id:p-+this.tabId,aria-labelledby:t-+this.tabId, role:tabpanel}, directives:[{ name:show, value:this.active }]},[this.$slots.default]);}};varVueTabsPlugin={ install:function install(Vue){Vue.component(vue-tabs,VueTabs);Vue.component(v-tab,VTab);}};// Automatic installation if Vue has been added to the global scope.if(typeof window !==undefined&& window.Vue){ window.Vue.use(VueTabsPlugin); window.VueTabs=VueTabsPlugin;} exports[default]=VueTabsPlugin; exports.VueTabs=VueTabs; exports.VTab=VTab;Object.defineProperty(exports,__esModule,{ value:true});})));

我们可以在页面上调用插件的初始化代码,即可完成这个vue tab插件。

newVue({ el:"#app",}); $(.js-tilt).tilt({})
(window.slotbydup = window.slotbydup || []).push({ id: "u6835052", container: "_96bek913mdb", async: true });

本文链接:http://blog.sauo.top/?id=519 感谢分享!

分享到:

扫描二维码推送至手机访问。

版权声明:本文由冬眠先生个人博客发布,如需转载请注明出处。

本文链接:http://blog.sauo.top/?id=519

分享给朋友:

“这都可以?(使用vue.js)vue vue.js,Vue.js 实现的 3D Tab菜单,Vue.js 实现的 3D Tab菜单,” 的相关文章

干货分享(php file_get_contents curl)php file_get_contents post,php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....,php file_get_contents(): SSL operation failed with code 1. OpenSSL Error message.....,

免费领取腾讯云服务器! 在调试php脚本代码时,发现使用 file_get_contents() 函数请求HTTPS的网址链接时出现了报错,其报错代码如下面所示“file_get_contents(): SSL operation failed with...

一篇读懂(PHP for循环)php跳出循环的语句,php中的几种循环语句,php中的几种循环语句,

免费领取腾讯云服务器! 列举几种php脚本中常用的几种循环语句,比如,for,foreach,do....while 等。 php for循环 for循环在很多语言中都经常用到,比如js语言,c语言,java语言等。...

不看后悔(php全局变量有哪些)php全局变量和局部变量的区别,php全局变量与js全局变量的区别,php全局变量与js全局变量的区别,

免费领取腾讯云服务器! 因为经常写php与js代码,有时候使用全局变量的时候经常的混淆,这篇文章就来说说js中的全局变量与php中的全局变量的区别。 js全局变量与php全局变量的区别 php全局变量 php...

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

一看就会(imagefilter过滤图像方法)php imagefill,php imagefilter()图片滤镜函数的用法与示例,php imagefilter()图片滤镜函数的用法与示例,

免费领取腾讯云服务器! 有个小需求,需要使用php代码对图片进行颜色调整,比如变成灰色,改变图片的亮度,对比度等等。而php中就内置了一个图片的滤镜函数 imagefilter() ,下面就来具体说说这个函数的用法。 php imagefi...

全程干货(php将图片转为对象)php文件怎么转成图片,php将图片转为base64编码格式图片的方法,php将图片转为base64编码格式图片的方法,

免费领取腾讯云服务器! 下面的博文提供两个利用php代码将图片转为base64编码格式图片的方法,分为php转换本地图片为base64图片以及php转换远程图片为base64图片的方法。...

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

深度揭秘(Linux查看文件md5)linux命令查看md5值,Linux系统下查看文件md5的方法,Linux系统下查看文件md5的方法,

免费领取腾讯云服务器! 上两篇博文,分别写了在window系统下获取文件md5值的方法与mac苹果系统下获取文件md5值的方法,今天这篇博文就写一下在linux系统下获取文件md5值的方法。 Linux系统下获取文件md5值的方法...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。