vue 动态面包屑,
这篇文章主要为大家详细介绍了某视频剪辑软件项目实现面包屑导航，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件项目实现面包屑导航的具体代码，供大家参考，具体内容如下
安装依赖
npm i vuex
创建tagView.vue
模板
div class=标记-视图-容器
滚动窗格 tags-view-wrapper ref=滚动窗格
路由器链接
ref=tag
:to=tag
:class=isActive(tag)？操作 :
class=scrollPane_item
@上下文菜单。预防。native= openMenu(tag，$event)
Array.from(已访问视图)中的v-for=标记
:key=tag.path
{{tag.title}}
错误关闭图标：class=isActive(tag)？图标激活“: ”@点击。预防。stop= closeSelectedTag(tag)/span
/路由器链接
/滚动窗格
ul class=上下文菜单 v-show= visible :style= { left:left px ，top: top px}
Li @ click= closeSelectedTag(所选标记)关闭/李
li @ click= closeOthersTags 关闭其他/李
li @click=closeAllTags 关闭所有/李
/ul
/div
/模板
脚本
从导入滚动窗格./scrollPane/scrollpane
导出默认值{
名称：标签-视图，
组件：{ ScrollPane }，
data(){
返回{
可见：假，
top: 0，
左：0,
selectedTag: {}
ScrollAction: false
}
},
计算值：{
visitedViews(){
归还这个100美元商店。状态。标签视图。已访问视图
}
},
观察：{
$route(){
this.addViewTags()
this.moveToCurrentTag()
},
可见（值){
如果（值){
文档。身体。addevent侦听器( click ，this.closeMenu)
}否则{
文档。身体。removeeventlistener( click ，this.closeMenu)
}
}
},
已安装(){
this.addViewTags()
},
方法：{
generateRoute(){
如果（这个. route.name) {
归还这个。$路线
}
返回错误的
},
isActive(路线){
返回route.path===this .$route.path
},
addViewTags() {
const route=this.generateRoute()
如果(!路线){
返回错误的
}
这个100美元商店。分派( addVisitedViews ，路线)
},
moveToCurrentTag() {
常量标签=这个.$refs.tag
这个. nextTick(()={
对于(标签的常量标签){
if (tag.to.path===this .$route.path) {
这个refs.scrollPane.moveToTarget(标记100万美元)
破裂
}
}
})
},
closeSelectedTag(视图){
这个100美元商店。调度( delVisitedViews ，视图).然后((视图)={
if (this.isActive(view)) {
const最新视图=视图。切片(-1)[0]
如果(最新视图){
这个10.99 $ router . push(最新视图)
}否则{
这个. router.push(/homePage )
}
}
})
},
closeOthersTags() {
这个. router.push(this.selectedTag)
这个100美元商店。调度( delOthersViews ，this.selectedTag).然后(()={
this.moveToCurrentTag()
})
},
closeAllTags() {
这个store.dispatch(delAllViews )
这个. router.push(/homePage )
},
openMenu(tag，e) {
this.visible=true
this.selectedTag=tag
this.left=e.clientX 30 //15:右边距
this.top=e。客户
},
closeMenu() {
this.visible=false
}
}
}
/脚本
风格
@import ./tagview。scss’；
/风格
创建tagView.scss。标签-视图-容器{
身高：100%;
}。上下文菜单{
边距：0;
背景：# fff
z指数：100;
位置：绝对；
列表样式类型：无；
填充：5px 0；
边框-半径：4px
字体大小：12px
字体粗细：400;
颜色：# 333;
箱形阴影：2px 2px 3px 0 rgba(0，0，0，3);
}。上下文菜单李{
边距：0;
填充：7像素16像素
光标：指针；
}。李：悬停{
背景：# eee
}。标签-视图-包装器一个{
显示：内嵌-块；
位置：相对；
宽度：100像素
填充：0 10px
颜色：# 000;
背景：# fff
文本对齐：居中；
字号：15px
}。动作{
边框-底部：2px实心# 1AB394
}。关闭图标{
颜色：# fff
左边距：3px
}。IconActive {
颜色：# b1b1b1
}
创建tagViews.js
const tagsView={
状态：{
已访问视图：[],
缓存视图：[]
},
突变：{
ADD_VISITED_VIEWS: (state，view)={
如果(状态。已访问的视图。有的(v=v . path===查看。路径))返回
状态。已访问的视图。推(对象。分配({ }，查看，{
title: view.meta.title 无名称
}))
如果(!view.meta.noCache) {
状态。缓存视图。推送(查看。姓名)
}
},
DEL_VISITED_VIEWS: (state，view)={
对于(状态。已访问的视图。条目()的const [i，v]){
if (v.path===view.path) {
state.visitedViews.splice(i，1)
破裂
}
}
对于(状态。缓存视图的const I){
if (i===view.name) {
常数索引=状态。cachedviews。索引(一)
state.cachedViews.splice(索引，1)
破裂
}
}
},
DEL_OTHERS_VIEWS: (state，view)={
对于(状态。已访问的视图。条目()的const [i，v]){
if (v.path===view.path) {
状态。访问量=状态。已访问的视图。切片(I，i 1)
破裂
}
}
对于(状态。缓存视图的const I){
if (i===view.name) {
常数索引=状态。cachedviews。索引(一)
状态。缓存视图=状态。缓存视图。切片(索引，i 1)
破裂
}
}
},
DEL_ALL_VIEWS: (state)={
state.visitedViews=[]
state.cachedViews=[]
}
},
动作：{
addVisitedViews({ commit }，view) {
提交(添加已访问视图，视图)
},
delVisitedViews({ commit，state }，view) {
返回新承诺((解决)={
提交( DEL_VISITED_VIEWS ，视图)
解决([.state.visitedViews])
})
},
delOthersViews({ commit，state }，view) {
返回新承诺((解决)={
提交( DEL_OTHERS_VIEWS ，视图)
解决([.state.visitedViews])
})
},
delAllViews({ commit，state }) {
返回新承诺((解决)={
提交(“删除所有视图”)
解决([.state.visitedViews])
})
}
}
}
导出默认标签视图
创建scrollPane.vue
模板
div class=" scroll-container " ref=" scroll container " @ wheel。防止=处理滚动
div class= scroll-wrapper ref= scroll wrapper :style= { left:left px }
插槽/插槽
/div
/div
/模板
脚本
常量填充=15 //标记的填充
导出默认值{
名称：“scrollPane”，
data() {
返回{
左侧：0
}
},
方法：{
手柄卷轴(e) {
const event delta=e . wheel delta -e . deltay * 3//wheel delta:-120；deltaY:-120
const $container=this .$refs.scrollContainer//外面的容器
const $ container宽度=$ container。offsetwidth//外面的容器的宽度
const $wrapper=this .$refs.scrollWrapper//里面
const $ wrapper宽度=$ wrapper。offsetwidth//里面的宽度
if (eventDelta 0) {
this.left=Math.min(0，this.left eventDelta)//min()方法可返回指定的数字中带有最低值的数字。
}否则{
if($容器宽度-填充$包装宽度){
如果(这个。left-($ wrapper width-$ container width padding)){
左=左
}否则{
这个。左=数学。max(这个。左事件增量，$容器宽度-$包装宽度-填充)
}
}否则{
this.left=0
}
}
},
moveToTarget($target) {
const $container=this .$refs.scrollContainer
const $ container宽度=$ container。偏移距离
const $ target left=$ target。向左偏移
const $ target宽度=$ target。偏移距离
if ($targetLeft -this.left) {
这个。left=-$ target左填充
} else if(target左填充-this。left $ target left $ target宽度-this。left $ container width-padding){
}否则{
这个。left=-($ target left-($容器宽度-$目标宽度)填充)
}
}
}
}
/脚本
风格。滚动容器{
空白：nowrap
位置：相对；
溢出：隐藏；
宽度：100%;
身高：100%;
框大小：边框-框；
}。卷轴包装{
身高：100%;
行高：41px
位置：绝对；
}
/风格
商店中索引。射流研究…配置
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入*作为类型。/类型
导入标签视图自./assets/js/tagsview
Vue.use(Vuex)
const store=new Vuex .商店({
模块：{
标签视图
}
})
导出默认存储
商店中的type.js配置
导出常量登录=登录
导出常量注销=注销
导出常数TITLE=title
router.js修改配置
对点击左侧按钮根据路由器视图显示清理缓存
最后在主页。射流研究…中引入商店。射流研究…
从导入存储/store/index //导入状态管理器状态管理
新Vue({
埃尔： #app ，
路由器，
店，
组件：{ App }，
模板："应用程序/"
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。