前言
这段时间使用 ts 和 vue 做了一个项目,项目从 0 开始搭建,在建设和优化的同时,实现了很多自己的想法,有那么一两个组件可能在我本人看来有意义,所以从头回顾一下当初的想法,同样也可以做到一个记录的作用。如果还没有使用过 ts 的同学可以通过使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList 这边文章开始你的 ts 之旅,后续代码也是在 todoList 的结构上改进的
vue 路由中的懒加载
你真的用好了路由的懒加载吗?
在 2.x 的文档中、cli 的初始化项目中都会默认生成一个路由文件,大致如下:
{ path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './views/About.vue') }
通过路由懒加载的组件会在 webpack 打包之后生成名为 about 的 dist/js/about.39d4f7ae.js 文件。
但是在 react 中,react-loadable 可以使路由在懒加载之前先加载一个其他的组件(一般是 loading )过度这个加载的过程。
A higher order component for loading components with promises.
其实这也就是 react 的高阶组件 (HOC),那么根据 HOC 的思想,我们能否在 vue 中也实现这样一个 HOC 呢?答案是 YES
让我们看一下官方的介绍:
const AsyncComponent = () => ({ // The component to load (should be a Promise) component: import('./MyComponent.vue'), // A component to use while the async component is loading loading: LoadingComponent, // A component to use if the load fails error: ErrorComponent, // Delay before showing the loading component. Default: 200ms. delay: 200, // The error component will be displayed if a timeout is // provided and exceeded. Default: Infinity. timeout: 3000 })
这个 2.3+ 新增的功能,使我们的开始有了可能,我们创建一个 loadable.ts 的高阶组件,利用 render 函数生成组件并返回。
import LoadingComponent from './loading.vue'; export default (component: any) => { const asyncComponent = () => ({ component: component(), loading: LoadingComponent, delay: 200, timeout: 3000 }); return { render(h: any) { return h(asyncComponent, {}); } }; };
在 routes 中使用该组件
import loadable from './loadable'; const routes = [ { path: '/about', name: 'about', // component: () => import(/* webpackChunkName: "about" */ './views/About.vue') component: loadable( () => import(/* webpackChunkName: "about" */ './views/About.vue') } ]
看起来貌似已经成功了,但是在这当中还存在问题。
关于 vue-router ,不可避免的会涉及到路由的钩子函数,但是在以上用法中路由钩子是失效的,why ?
路由钩子只直接生效于注册在路由上的组件。
那么通过 loadable 生成渲染的组件中 About 组件已经是一个子组件,所以拿不到路由钩子。
组件必须保证使用上的健壮性,我们换一种方案,直接返回这个组件。
const asyncComponent = importFunc => () => ({ component: importFunc(), loading: LoadingComponent, delay: 200, timeout: 3000 });
我们重新更换 routes :
const routes = [ { path: '/about', name: 'about', // component: () => import(/* webpackChunkName: "about" */ './views/About.vue') component: asyncComponent( () => import(/* webpackChunkName: "about" */ './views/About.vue') } ]
上述用法已经解决了路由钩子的问题,但是仍然有两点值得注意:
- asyncComponent 接受的参数是一个 function , 如果直接写成 import(/* webpackChunkName: "about" */ './views/About.vue'), 则 LoadingComponent 无法生效。
- AsyncComponent 还可以添加一个 error 的组件,形成逻辑闭环。
SVG 、Iconfont 在 vue 项目中最优雅的用法
能用 svg 的地方尽量不使用图片 笔者在使用 svg 的时候一开始是使用vue-svg-loader, 具体用法,请自行查看。
但是在写 sidebar 时,笔者想将 svg 通过配置文件的形式写入,让 sidebar 形成多层的自动渲染。
显然 vue-svg-loader 的用法不合适。我们先了解 svg 的用法,我们可以看一篇乃夫的介绍:SVG 图标简介。
SVG symbol ,Symbols let you define an SVG image once, and reuse it in multiple places.
和雪碧图原理类似,可以将多个 svg 合成一个,但是这里用 id 来语意化定位图标
// 定义 <svg class="hidden"> <symbol id="rectangle-1" viewBox="0 0 20 20"> <rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" /> </symbol> <symbol id="reactangle-2" viewBox="0 0 20 20"> <rect x="0" y="0" width="300" height="300" fill="rgb(255,159,0)" /> </symbol> </svg> // 使用 <svg> <use xlink:href="#rectangle-1" rel="external nofollow" href="#rectangle" rel="external nofollow" /> </svg>
正好有这么一个 svg 雪碧图的 webpack loader,svg-sprite-loader,下面是代码
首先根据官网修改配置:
// vue.config.js const svgRule = config.module.rule('svg'); // 清除已有的所有 loader。 // 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。 svgRule.uses.clear(); svgRule.exclude.add(/node_modules/); // 添加要替换的 loader // svgRule.use('vue-svg-loader').loader('vue-svg-loader'); svgRule .test(/\.svg$/) .pre() .include.add(/\/src\/icons/) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }); const imagesRule = config.module.rule('images'); imagesRule.exclude.add(resolve('src/icons')); config.module.rule('images').test(/\.(png|jpe"htmlcode"><template> <svg v-show="isShow" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName" rel="external nofollow" /> </svg> </template> <script lang="ts"> import { Component, Vue, Prop } from 'vue-property-decorator'; @Component export default class SvgIcon extends Vue { @Prop({ required: true }) private readonly name!: string; @Prop({ default: () => '' }) private readonly className!: string; private get isShow() { return !!this.name; } private get iconName() { return `#icon-${this.name}`; } private get svgClass() { if (this.className) { return 'svg-icon ' + this.className; } else { return 'svg-icon'; } } } </script> <style scoped> .svg-icon { width: 1em; height: 1em; fill: currentColor; overflow: hidden; } </style>在当前目录下创建 index.ts
import Vue from 'vue'; import SvgIcon from './svgIcon.vue'; // svg组件 // 注册到全局 Vue.component('svg-icon', SvgIcon); const requireAll = (requireContext: any) => requireContext.keys().map(requireContext); const req = require.context('./svg', false, /\.svg$/); requireAll(req);在当前目录下新建 svg 文件夹,用于存放需要的 svg 静态文件。
"htmlcode"><svg-icon name="loading"></svg-icon>我们来看一下原理和值得注意的几点:
- svg-sprite-loader 处理完通过 import 的 svg 文件后将其生成类似于雪碧图的形式,也就是 symbol, 通过配置中的 .options({ symbolId: 'icon-[name]' });可以使用 <use xlink:href="#symbolId" rel="external nofollow" /> 直接使用这个 svg
- 添加完 svg-sprite-loader 后,由于 cli 默认对 svg 有处理,所以需要 exclude 指定文件夹的 svg。
- 使用时由于 svgIcon 组件的处理,只需要将 name 指定为文件名即可。
那么,我们使用 iconfont 和 svg 有什么关系呢?
iconfont 的使用方法有很多种,完全看个人喜好,但是其中一种使用方法,也是用到了 svg symbol 的原理,一般 iconfont 会默认导出这些文件。
"color: #ff0000">back-to-up
首先为什么会写这个组件呢,本项目中使用的组件库是 elementUI ,而 UI 库中自带 el-backtop,但是我能说不好用吗? 或者说我太蠢了,在经过一番努力的情况下我还是没能使用成功,所以自己写了一个。
直接上代码:
<template> <transition :name="transitionName"> <div v-show="visible" :style="localStyle" class="back-to-ceiling" @click="backToTop"> <slot> <svg viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="height: 16px; width: 16px;" > <g> <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd" /> </g> </svg> </slot> </div> </transition> </template> <script lang="ts"> import { Component, Vue, Prop } from 'vue-property-decorator'; @Component export default class BackToTop extends Vue { @Prop({ default: () => 400 }) private readonly visibilityHeight!: number; @Prop({ default: () => 0 }) private readonly backPosition!: number; @Prop({ default: () => ({}) }) private readonly customStyle!: any; @Prop({ default: () => 'fade' }) private readonly transitionName!: string; private visible: boolean = false; private interval: number = 0; private isMoving: boolean = false; private detaultStyle = { width: '40px', height: '40px', 'border-radius': '50%', color: '#409eff', display: 'flex', 'align-items': 'center', 'justify-content': 'center', 'font-size': '20px', cursor: 'pointer', 'z-index': 5 }; private get localStyle() { return { ...this.detaultStyle, ...this.customStyle }; } private mounted() { window.addEventListener('scroll', this.handleScroll); } private beforeDestroy() { window.removeEventListener('scroll', this.handleScroll); if (this.interval) { clearInterval(this.interval); } } private handleScroll() { this.visible = window.pageYOffset > this.visibilityHeight; } private backToTop() { window.scrollTo({ left: 0, top: 0, behavior: 'smooth' }); } } </script> <style scoped> .back-to-ceiling { background-color: rgb(255, 255, 255); box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); background-color: '#f2f6fc'; position: fixed; right: 50px; bottom: 50px; cursor: pointer; } .back-to-ceiling:hover { background-color: #f2f6fc; } .fade-enter-active, .fade-leave-active { display: block; transition: display 0.1s; } .fade-enter, .fade-leave-to { display: none; } </style>使用:
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="0"> <i class="el-icon-caret-top"></i> </back-to-top>custom-style 可以自行定义,返回的图标也可以自由替换。
注意,在 safari 中动画中动画表现不一致,使用 requestAnimationFrame 之后仍然不一致。希望同学们有时间可以自由发挥一下。
总结
永远抱着学习的心态去写代码,尝试多种写法,写出你最优雅的那一种。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]