vue移动端引用第三方组件-lytab（学习笔记）

Posted 2022-02-23 weixin_34375251

网络上有个大神自己写了一个移动端可滑动（惯性滑动&回弹）Vue导航栏组件 ly-tab
然后我想把它用到我的项目中去，发现会有这个报错：SyntaxError: Unexpected token import
我也不知道是哪个步骤操作不正确。我就把它的源码从node_modules文件中复制出来,放在components文件下

node_modules

components

在需要使用的组件中局部引用

import LyTab from '@/components/Scroll'

后来我发现还是报SyntaxError: Unexpected token import
接着尝试把路径换成下面的就不会报错了

import LyTab from '@/components/Scroll/src/index.vue'

==========================================运用======================================

<ly-tab :items="sortList" :options="options" class="parent" v-model="selected"></ly-tab>
items是传递给子组件的数组
options是lytab的配置

export default 
  components: 
    LyTab
  ,
  data() 
    return 
      sortList: [], //父分类
      i: 0,
      selected: 0,
      options: 
        activeColor: '#78d5f7',
        labelKey: 'name' // 在sortList数组中选择想要渲染的key名
      
    
  

后面我需要去获取点击父分类的index值从而筛选子分类，所以我需要在源码的基础添加
index.vue子组件

<template>
  <div class="ly-tab">
    <ly-tabbar v-bind="options" v-model="selectedId">
      <ly-tab-item :key="index" v-for="(item, index) in items">
        <span slot="icon" v-if="options.fixBottom && item.icon">
          <i :class="item.icon"></i>
        </span>
        <span @click="getindex(index)"> item[labelKey] </span>
      </ly-tab-item>
    </ly-tabbar>
  </div>
</template>

新增getindex函数获取点击的index然后传递给父组件

父组件接收

<ly-tab :items="sortList" :options="options" @parent="parent" class="parent" v-model="selected"></ly-tab>
<div class="child" v-if="sortList[i].subCategoryList.length>0">
  <ul>
    <nuxt-link
      :key="index"
      :to="path: '/quesbank/sort', query: cp_id: item.pid, c_id: item.id"
      v-for="(item,index) of sortList[i].subCategoryList"
    >
      <li
        :class="$route.query.c_id===item.id?'activechild':''"
        v-if="item.name!==''"
      >item.name</li>
    </nuxt-link>
  </ul>
</div>

export default 
  components: 
    LyTab
  ,
  data() 
    return 
      sortList: [], //父分类
      i: 0,
      selected: 0,
      options: 
        activeColor: '#78d5f7',
        labelKey: 'name'
      
    
  ,
  mounted() 
    if (this.$route.query.cp_id) 
      this.selected = Number(this.$route.query.cp_id)
    
  ,
  //asyncData在服务端渲染
  async asyncData() 
    let res = await Net.getSort()
    let result = res.data.data
    result.unshift(
      name: '全部',
      id: 0,
      subCategoryList: []
    )
    for (let i = 0; i < result.length; i++) 
      if (result[i].subCategoryList) 
        for (let j = 0; j < result[i].subCategoryList.length; j++) 
          result[0].subCategoryList.push(result[i].subCategoryList[j])
        
      
    
    result[0].subCategoryList.unshift(
      name: '全部',
      id: 0,
      pid: 0
    )
    return 
      sortList: result
    
  ,
  methods: 
  //获取index进行子分类的筛选
    parent(index) 
      this.i = index
    
  

</script>

写的很乱，是自己平时项目中的小总结