仿大众点评——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>