仿大众点评——aui-tab按钮组工具栏

tab切换图

代码

这里我引用了AUI的框架，所以需要在index.html文件进行配置

//css样式引入<link rel="stylesheet" href="/static/css/aui.css">
//script引入
<script src="/static/script/api.js"></script>
<script src="/static/script/aui-tab.js"></script>
<script type="text/javascript">apiready = function(){api.parseTapmode();}var bar = document.querySelectorAll(".aui-bar-btn");if(bar){for(var i=0; i<bar.length;i++){var d = bar[i];var tab = new auiTab({element:bar[i],repeatClick:true},function(ret){if(ret.dom.parentNode.getAttribute("type") && ret.dom.parentNode.getAttribute("type")=="count"){var count = parseInt(document.getElementById("count").value);if(ret.index==2)return;if(ret.index==1){document.getElementById("count").value = count-1;}if(ret.index==3){document.getElementById("count").value = count+1;}}});}}
</script>

新建一个component组件

<template><div id="app"><header class="aui-bar aui-bar-nav aui-bar-light"  v-if="$route.path=='/deliciousFood'||$route.path=='/city'"><a class="aui-pull-left aui-btn" @click.stop="$router.push('/home')"><span class="aui-iconfont aui-icon-left">span>a><div class="aui-title"><slot name="tabChoose">slot>div>header>div>
template>
<script>
export default {};
script>
<style lang="less" scoped>style>

在组件中写好通用构架，然后使用slot插槽，优化代码

<v-buttonToolbar><template v-slot:tabChoose><div class="aui-bar aui-bar-btn aui-bar-btn-round width150"><div class="aui-bar-btn-item aui-active sh">商户div><div class="aui-bar-btn-item shtg">闪惠团购div>div>template>v-buttonToolbar>

<v-ButtonToolbar v-slot:tabChoose><template><div class="aui-bar aui-bar-btn aui-bar-btn-round width200"><div class="aui-bar-btn-item aui-active gn">国内div><div class="aui-bar-btn-item gjgat">国际/港澳台div>div>template>v-ButtonToolbar>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！