tabbar购物车案例

基本结构大致如下

 

• 组件拆分:

  • MyHeader.vue – ==复用之前的==

  • MyTabBar.vue – 底部导航

  • MyTable.vue – 封装表格

• 三个页面

  • -MyGoodsList.vue – 商品页

  • MyGoodsSearch.vue – 搜索页

  • -MyUserInfo.vue – 用户信息页

需要安装插件 less less-loader@5.0.0 -D bootstrap axios 

注意需要在main.js引入字体图标和bootstrap

整体效果如下

 首先将页面引入,并开始着手做顶部和底部,数据提前已经准备好,头部是之前做好的组件,只需设置文字内容设置颜色即可

<template>
  <div>
    <MyHeader title="TabBar案例" colorStr="white" bgc="green"></MyHeader>
    <MyGoodsList></MyGoodsList>
    <MyTabBar :list="tabArr"></MyTabBar>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyTabBar from "./components/MyTabBar.vue";
import MyGoodsList from "./views/MyGoodsList.vue";
export default {
  data() {
    return {
      tabArr: [
        {
          iconName: "icon-home",
          tabName: "商品列表",
        },
        {
          iconName: "icon-sousuo",
          tabName: "商品搜索",
        },
        {
          iconName: "icon-user",
          tabName: "我的信息",
        },
      ],
    };
  },
  components: {
    MyHeader,
    MyTabBar,
    MyGoodsList,
  },
};
</script>

<style>
</style>

 来到底部页面,对主页数据父传子,并在对应标签进行遍历,铺数据,用到了高亮显示.可参考上篇文章

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


<script>
export default {
  props: {
    list: Array,
  },
  data() {
    return {
      isH: 0,
    };
  },
  methods: {
    btn(ind) {
      this.isH = ind;
    },
  },
};
</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>

底部数据做个数据判断,数组长度需要在2-5之间

export default {
  props: {
    list: {
      type: Array,
      validator(e) {
        if (e.length >= 2 && e.length <= 5) {
          return true;
        } else {
          return false;
        }
      },
    },
  },

底部顶部完成后开始做list页面

拿到页面首先分析页面结构,拿数据进行铺设数据,分析模块功能

对list页面进行了数据铺设代码及效果图如下

 

 接下来运用了插槽技术将可变化数据放到mygoodlist页面,目的是我们不能确定每次拿到数据都是一样格式的,使用插槽可以提高组件复用,减少代码操作,可以随意增加表格的列.

 到这里大部分已经完成,剩余标签功能和删除功能

删除功能

给按钮增加点击事件,删除需要准确的id进行删除,所以我们返回当前数据的id,根据id查找所对应的索引进行删除

 methods: {
    delFn(id) {
      let theId = this.arr.findIndex((obj) => obj.id === id);
      this.arr.splice(theId, 1);
    },
  },

  <button class="btn btn-danger btn-sm" @click="delFn(scoped.row.id)">
            删除
          </button>

标签栏效果图和需求如下

• 需求1: 点击Tab, 按钮消失, 输入框出现

• 需求2: 输入框自动聚焦

• 需求3: 失去焦点, 输入框消失, 按钮出

• 需求4: 监测input回车, 无数据拦截

• 需求5: 监测input取消, 清空数据

• 需求6: 监测input回车, 有数据添加

在bootstrap官网找到对应的样式 

 

 <span
            class="badge rounded-pill bg-warning text-dark"
            v-for="(item, index) in scoped.row.tags"
            :key="index"
            style="margin: 0 5px"
            >{{ item }}</span
          >

对找到的样式标签进行遍历,效果如下

 做蓝色输入框

  <input
            class="tag-input form-control"
            style="width: 100px"
            type="text"
            v-if="scoped.row.inputVisible"
            v-fofo
            v-model="scoped.row.inputValue"
            @blur="scoped.row.inputVisible = false"
            @keyup.enter="enterFn(scoped.row)"
            @keyup.esc="scoped.row.inputVisible = false"
          />
          <button
            v-else
            style="display: block"
            class="btn btn-primary btn-sm add-tag"
            @click="scoped.row.inputVisible = true"
          >
            +Tag
          </button>

 页面完成