共计 2195 个字符，预计需要花费 6 分钟才能阅读完成。
网络上有个大神自己写了一个移动端可滑动（惯性滑动 & 回弹）Vue 导航栏组件 ly-tab 然后我想把它用到我的项目中去，发现会有这个报错：SyntaxError: Unexpected token import 我也不知道是哪个步骤操作不正确。我就把它的源码从 node_modules 文件中复制出来, 放在 components 文件下
node_modulescomponents
在需要使用的组件中局部引用
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>
写的很乱，是自己平时项目中的小总结
