建设思政教育网站案例,太原电子商务网站的建设与服务,wap网站浏览器,网络外包服务公司要掌握#xff1a;localStorage#xff0c;组件封装
emm#xff0c;第一次上传视频转gif的图片#xff0c;效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif…要掌握localStorage组件封装
emm第一次上传视频转gif的图片效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif/
在 components 下新建一个 curmbs 文件夹并在该文件夹下新建一个 index.vue 文件。router.js 中的配置添加一个 meta对象 代码
templatediv classcrumbs!-- 面包屑 --el-card classbox-cardel-breadcrumb separator/el-breadcrumb-item v-for(level,index) in this.levelList :keyindex :tolevel.path{{level.name}}/el-breadcrumb-item/el-breadcrumb/el-card/div
/templatescript
export default {name : crumbs,data() {return {levelList: []}},watch: {$route(to,from) {console.log(to,from)// 思路判断meta中breadNumber为几就把它放在第几个// 注意存放到localStorage中的数据格式最好统一我在这里把它统一成了数组的格式// levelList最终的格式要为[{name:xx,path:xx,breadNum:xx}]this.getBreadcrumb()}},methods:{getBreadcrumb() { // 1.获取当前的name,path,breadNumbervar newName this.$route.name;var newPath this.$route.fullPath;var newBreadNum this.$route.meta.breadNumber; // 2.获取前一页存下的name,path,breadNumbervar oldName JSON.parse(window.localStorage.getItem(oldName));var oldPath JSON.parse(window.localStorage.getItem(oldPath));var oldBreadNum JSON.parse(window.localStorage.getItem(oldBreadNum));var routerInfo JSON.parse(window.localStorage.getItem(routerInfo)) || []; this.levelList routerInfo; // 3.判断是否是第一层即初始位置如果是第一层分两种情况if(this.$route.meta.breadNumber 1){// 3.1 localStorage有值那么this.levelList不是空值说明是由上一个主路由进来的需要清空之前localStorage的值并且重新赋值给levelListif(this.levelList.length ! 0 ){localStorage.removeItem(oldName);localStorage.removeItem(oldPath);localStorage.removeItem(oldBreadNum);localStorage.removeItem(routerInfo);this.levelList []; }// 3.2 localStorage没有值说明就是第一次进主路由直接赋值this.levelList.push({name:newName,path:newPath,breadNumber:newBreadNum});// this.$store.commit(breadCrumb/BREAD_PATH,{ newName,newPath,newBreadNum });// 按照数组格式的方式存放var nameStr [];nameStr.push(newName);var pathStr[];pathStr.push(newPath);var breadNumStr [];breadNumStr.push(newBreadNum);window.localStorage.setItem(oldName,JSON.stringify(nameStr));window.localStorage.setItem(oldPath,JSON.stringify(pathStr));window.localStorage.setItem(oldBreadNum,JSON.stringify(breadNumStr));window.localStorage.setItem(routerInfo,JSON.stringify(this.levelList));}else{ var isBreadNumber false; // 4.breadNumber除了等于1其他值时this.levalList一定不是空值判断点击的这个breadNumber数组中是否存在// 4.1 如果存在就要删掉这个后面的所有值并且将点击所获得的的这个值存进this.levalList数组中// 4.2 如果不存在说明是按照顺序进行的把它存到localStorage中并把值给this.leavalList数组//在这里不用return否则会终止循环for(var i 0 ;i this.levelList.length; i){if(this.levelList[i].breadNumber newBreadNum){// return true; // 为true时表示数组内已存在 false表示不存在isBreadNumber true;break;}}if( isBreadNumber ){//删除点击的后面所有信息localStorage中的数据也要删除这里的删除是截取而不是完全删除然后将该信息添加进去 //要注意的是这里的变化还有可能是点击面包屑时产生的其他地方通常是通过路由跳转得到的 // 注意这里splice的用法如果直接写在localStorage.setItem 中得到的值是被截取的值而不是截取后的值oldName.splice(newBreadNum,oldName.length-newBreadNum );window.localStorage.setItem(oldName,JSON.stringify( oldName ));oldPath.splice(newBreadNum,oldPath.length-newBreadNum);window.localStorage.setItem(oldPath,JSON.stringify( oldPath ));oldBreadNum.splice(newBreadNum,oldBreadNum.length-newBreadNum);window.localStorage.setItem(oldBreadNum,JSON.stringify( oldBreadNum ));routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);window.localStorage.setItem(routerInfo,JSON.stringify( routerInfo ))}else{var oldNameStr JSON.parse(window.localStorage.getItem(oldName));oldNameStr.push(newName);window.localStorage.setItem(oldName,JSON.stringify(oldNameStr));var oldPathStr JSON.parse(window.localStorage.getItem(oldPath));oldPathStr.push(newPath);window.localStorage.setItem(oldPath,JSON.stringify(oldPathStr));var oldBreadNumStr JSON.parse(window.localStorage.getItem(oldBreadNum));oldBreadNumStr.push(newBreadNum);window.localStorage.setItem(oldBreadNum,JSON.stringify(oldBreadNumStr));this.levelList.push({name:newName,path:newPath,breadNumber:newBreadNum});window.localStorage.setItem(routerInfo,JSON.stringify(this.levelList)); }}}},created(){this.getBreadcrumb(); }
}
/scriptstyle scoped langscss
.box-card{margin-bottom: 20px;
}
/style上面 localStorage存储的name, path,breadNum 是我测试的时候存的也可以删除简洁版代码
templatediv classcrumbs!-- 面包屑 --el-card classbox-card v-showisShowel-breadcrumb separator/el-breadcrumb-item a hrefjavascript:;{{$route.matched[0].name}}/a/el-breadcrumb-itemel-breadcrumb-item v-for(level,index) in this.levelList :keyindex :tolevel.path{{level.name}}/el-breadcrumb-item/el-breadcrumb/el-card/div
/templatescript
export default {name : crumbs,props:{isShow:{type:Boolean,default:true //默认值为true 显示}},data() {return {levelList: []}},watch: {$route(to,from) {// console.log(to,from)// 思路判断meta中breadNumber为几就把它放在第几个// 注意存放到localStorage中的数据格式最好统一我在这里把它统一成了数组的格式// levelList最终的格式要为[{name:xx,path:xx,breadNum:xx}]this.getBreadcrumb()}},methods:{getBreadcrumb() { // 1.获取当前的name,path,breadNumbervar newName this.$route.name;var newPath this.$route.fullPath;var newBreadNum this.$route.meta.breadNumber; // 2.获取前一页存下的name,path,breadNumbervar routerInfo JSON.parse(window.localStorage.getItem(routerInfo)) || []; this.levelList routerInfo; // 3.判断是否是第一层即初始位置如果是第一层分两种情况if(this.$route.meta.breadNumber 1){// 3.1 localStorage有值那么this.levelList不是空值说明是由上一个主路由进来的需要清空之前localStorage的值并且重新赋值给levelListif(this.levelList.length ! 0 ){localStorage.removeItem(routerInfo);this.levelList []; }// 3.2 localStorage没有值说明就是第一次进主路由直接赋值this.levelList.push({name:newName,path:newPath,breadNumber:newBreadNum});// 按照数组格式的方式存放window.localStorage.setItem(routerInfo,JSON.stringify(this.levelList)); } else{ // 4.breadNumber不等于1时那么this.levalList一定不是空值判断获取到的这个breadNumber在数组中是否存在 var isBreadNumber false; for(var i 0 ;i this.levelList.length; i){if(this.levelList[i].breadNumber newBreadNum){// return true; // 为true时表示数组内已存在 false表示不存在isBreadNumber true;break; //在这里不用returnreturn会终止循环}}// 4.1 如果存在说明是所有路由展示已经完或者是展示了前面几个然后点击面包屑点击面包屑上其中的一个标签//就要删掉这个后面的所有值并且将点击所获得的的这个值存进this.levalList数组中if( isBreadNumber ){//删除点击的后面所有信息localStorage中的数据也要删除这里的删除是截取而不是完全删除然后将该信息添加进去 //要注意的是这里的变化还有可能是点击面包屑时产生的其他地方通常是通过路由跳转得到的 // 注意这里splice的用法如果直接写在localStorage.setItem 中得到的值是被截取的值而不是截取后的值routerInfo.splice( newBreadNum,routerInfo.length-newBreadNum);window.localStorage.setItem(routerInfo,JSON.stringify( routerInfo )); } else { // 4.2 如果不存在说明是按照顺序进行的,如一级跳到二级再从二级跳到三级//把它存到localStorage中并把值给this.leavalList数组this.levelList.push({name:newName,path:newPath,breadNumber:newBreadNum});window.localStorage.setItem(routerInfo,JSON.stringify(this.levelList)); }}} },created(){this.getBreadcrumb(); }
}
/scriptstyle scoped langscss
.box-card{margin-bottom: 20px;
}/style注册 如果想要一部分页面显示该组件一部分不显示那么需要用到 props 传参。 具体做法参考 1在 index.js 中
el-card classbox-card v-show isShowexport default {
props:{isShow:{type:Boolean,default:true //默认值为true 显示}}
}(2) 组件调用时
crumbs :isShowfalse/crumbs //false表示不显示面包屑如果想要将左侧主导航栏也显示出来则添加代码 原代码
el-breadcrumb separator/ el-breadcrumb-item v-for(level,index) in this.levelList :keyindex :tolevel.path{{level.name}}/el-breadcrumb-item/el-breadcrumbel-breadcrumb-item a hrefjavascript:;{{$route.matched[0].name}}/a
/el-breadcrumb-item
