tabbar案例

<template>
  <div>
    <my-header title="tabbar案例" background="green"></my-header>
    <div class="main">
      <!-- 动态组件 -->
      <component :is="comName"></component>
    </div>
    
    <!-- 子传父 -->
    <my-tab-bar :arr="tabList" @changeCom="changeComFn"></my-tab-bar>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyTabBar from './components/MyTabBar.vue'

//引入页面组件
import MyGoodsList from './views/MyGoodsList.vue'
import MyGoodsSearch from './views/MyGoodsSearch.vue'
import MyUserInfo from './views/MyUserInfo.vue'
export default {
  components:{
    MyHeader,
    MyTabBar,
    
    //动态组件
    MyGoodsList,
    MyGoodsSearch,
    MyUserInfo
  },
  data(){
    return{
      comName:"MyGoodsList",
      tabList: [
    {
        iconText: "icon-shangpinliebiao",
        text: "商品列表",
        componentName: "MyGoodsList"
    },
    {
        iconText: "icon-sousuo",
        text: "商品搜索",
        componentName: "MyGoodsSearch"
    },
    {
        iconText: "icon-user",
        text: "我的信息",
        componentName: "MyUserInfo"
    }
]
    }
  },
  methods: {
    changeComFn(cName){
      
      this.comName = cName; // MyTabBar里选出来的组件名赋予给is属性的comName
      // 导致组件的切换
    }
  }
}
</script>

<style>
.main{
  margin-top:45px;
  margin-bottom: 50px;
}
</style>

views/MyGoodsList.vue

<template>
  <div>
    <my-table :arr="list">
      <template #header>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </template>
      <template #body="scope">
        <td>{{scope.row.id}}</td>
        <td>{{scope.row.goods_name}}</td>
        <td>{{scope.row.goods_price}}</td>
        <td>
          <!-- 黄色小框 -->
          <!-- style="display:block;"行内标签换行 -->
          <input type="text"
          style="width:100px;"
          v-if="scope.row.inputVisible"
          v-focus
          @blur="scope.row.inputVisible=false"
          v-model="scope.row.inputValue"
          @keydown.enter="enterFn(scope.row)"
          @keydown.esc="scope.row.inputValue=''"
          >
          
          <button
          style="display:block;"
          v-else
          @click="scope.row.inputVisible=true"
          >+Tag</button>

          <span 
          v-for="(str,ind) in scope.row.tags" 
          :key="ind"
         
          class="ban"
          >{{str}}</span>
           <!-- 小标，小小表class="badge badge-warning" -->
        </td>
        <td>
            <button class="btn btn-danger btn-sm"
            @click="removeBtn(scope.row.id)"
            >删除</button>
        </td>
      </template>
    </my-table>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL="https://www.escook.cn"
import MyTable from '../components/MyTable.vue';
export default {
  components:{
    MyTable,
  },
  data(){
    return{
      list:[],
    }
  },
  created(){
    axios({
      url:"/api/goods",

    }).then((res)=>{
      console.log(res);
      //赋值给list
      this.list=res.data.data;
    })
  },
  methods:{
    removeBtn(id){
      //循环遍历做对比
      let index=this.list.findIndex((obj)=>obj.id===id)
      this.list.splice(index,1)
    },
    enterFn(obj){
      if (obj.inputValue.trim().length===0) {
        alert("不能为空");
        return 
      }
      obj.tags.push(obj.inputValue)
      obj.inputValue=""
    }
  }
}
</script>

<style lang="less" scoped>
.ban{
  height: 30px;
  background-color: #ffc107;
  border-radius: 5px;
  font-weight: 700;
  padding: 0 2px;
  margin-right: 5px;
}
</style>

components/MyTabBar

<template>
  <div class="my-tab-bar">
  	<div class="tab-item"
    v-for="(obj,index) in arr"
    :key="index"
    :class="{current:activeIndex===index}"
    @click="btn(index,obj)"
    >
      <!-- 图标 -->
      <span class="iconfont" :class="obj.iconText"></span>
      <!-- 文字 -->
      <span>{{obj.text}}</span>
    </div>
  </div>
</template>

<script>


export default {
  data(){
    return{
      activeIndex:0//高亮元素下标
    }
  },
   methods:{
    btn(index,theObj){
      this.activeIndex = index;
      //子传父
      this.$emit("changeCom",theObj.componentName)
    }
  },
    props:{
    arr:{
      type:Array,
      required:true,
      //自定义校验规则
      validator(value){
        if (value.length>=2 && value.length<=5) {
          return true;
        }else{
          console.error("数据必须在2-5之间");
          return false;
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
    
.current {
  color: #1d7bff;
}
</style>

components/MyTable

<template>
<!-- bootstarp样式 -->
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <!-- <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th> -->
        <slot name="header"></slot>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="obj in arr" :key="obj.id">
        <!-- <td>{{obj.id}}</td>
        <td>{{obj.goods_name}}</td>
        <td>{{obj.goods_price}}</td>
        <td>{{obj.tags}}</td>
        <td>
            <button class="btn btn-danger btn-sm">删除</button>
        </td> -->
        <slot name="body" :row="obj" ></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyTable',
  props:{
    arr:Array,
  }
  
}
</script>


<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>

main.js

import Vue from 'vue'
import App from './App3.vue'
//1引入bootstrap在main.js里边
import 'bootstrap/dist/css/bootstrap.css'
import "./assets/fonts/iconfont.css"
Vue.config.productionTip = false

//3自定义全局指令
Vue.directive("focus",{
    inserted(el){
      el.focus()//触发标签的事件方法
    }
  })

new Vue({
  render: h => h(App),
}).$mount('#app')

//1完成布局

//2动态组件 挂载

//3MyGoodsList3调接口，存list父传子给MyTable3

//(MyTable3表头用具名插槽，表格用作用域插槽，tr上循环)

//4黄色小框框样式设计v-if显示隐藏