详解Vue 项目中的几个实用组件（ts）

2023-08-10 05:17:04 88

前言

这段时间使用ts和vue做了一个项目，项目从0开始搭建，在建设和优化的同时，实现了很多自己的想法，有那么一两个组件可能在我本人看来有意义，所以从头回顾一下当初的想法，同样也可以做到一个记录的作用。如果还没有使用过ts的同学可以通过使用VueCli3+TypeScript+Vuex+Jest构建todoList 这边文章开始你的ts之旅，后续代码也是在todoList的结构上改进的

vue路由中的懒加载

你真的用好了路由的懒加载吗？

在2.x的文档中、cli的初始化项目中都会默认生成一个路由文件，大致如下：

{
path:'/about',
name:'about',
//routelevelcode-splitting
//thisgeneratesaseparatechunk(about.[hash].js)forthisroute
//whichislazy-loadedwhentherouteisvisited.
component:()=>
import(/*webpackChunkName:"about"*/'./views/About.vue')
}

通过路由懒加载的组件会在webpack打包之后生成名为about的 dist/js/about.39d4f7ae.js文件。
但是在react中，react-loadable可以使路由在懒加载之前先加载一个其他的组件（一般是loading）过度这个加载的过程。

Ahigherordercomponentforloadingcomponentswithpromises.

其实这也就是react的高阶组件（HOC），那么根据HOC的思想，我们能否在vue中也实现这样一个HOC呢？答案是YES

让我们看一下官方的介绍:

constAsyncComponent=()=>({
//Thecomponenttoload(shouldbeaPromise)
component:import('./MyComponent.vue'),
//Acomponenttousewhiletheasynccomponentisloading
loading:LoadingComponent,
//Acomponenttouseiftheloadfails
error:ErrorComponent,
//Delaybeforeshowingtheloadingcomponent.Default:200ms.
delay:200,
//Theerrorcomponentwillbedisplayedifatimeoutis
//providedandexceeded.Default:Infinity.
timeout:3000
})

这个2.3+新增的功能，使我们的开始有了可能，我们创建一个loadable.ts的高阶组件，利用render函数生成组件并返回。

importLoadingComponentfrom'./loading.vue';

exportdefault(component:any)=>{
constasyncComponent=()=>({
component:component(),
loading:LoadingComponent,
delay:200,
timeout:3000
});
return{
render(h:any){
returnh(asyncComponent,{});
}
};
};

在routes中使用该组件

importloadablefrom'./loadable';

constroutes=[
{
path:'/about',
name:'about',
//component:()=>import(/*webpackChunkName:"about"*/'./views/About.vue')
component:loadable(()=>import(/*webpackChunkName:"about"*/'./views/About.vue')
}
]

看起来貌似已经成功了，但是在这当中还存在问题。

关于vue-router，不可避免的会涉及到路由的钩子函数，但是在以上用法中路由钩子是失效的，why？

路由钩子只直接生效于注册在路由上的组件。

那么通过loadable生成渲染的组件中About组件已经是一个子组件，所以拿不到路由钩子。

组件必须保证使用上的健壮性，我们换一种方案,直接返回这个组件。

constasyncComponent=importFunc=>()=>({
component:importFunc(),
loading:LoadingComponent,
delay:200,
timeout:3000
});

我们重新更换routes：

constroutes=[
{
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图标简介。

SVGsymbol,SymbolsletyoudefineanSVGimageonce,andreuseitinmultipleplaces.

和雪碧图原理类似，可以将多个svg合成一个，但是这里用id来语意化定位图标

//定义









//使用

正好有这么一个svg雪碧图的webpackloader，svg-sprite-loader，下面是代码

首先根据官网修改配置：

//vue.config.js
constsvgRule=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]'
});

constimagesRule=config.module.rule('images');
imagesRule.exclude.add(resolve('src/icons'));
config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/);

创建ICON文件夹，然后在文件夹中创建svgIcon.vue组件。




import{Component,Vue,Prop}from'vue-property-decorator';

@Component
exportdefaultclassSvgIconextendsVue{
@Prop({required:true})privatereadonlyname!:string;
@Prop({default:()=>''})privatereadonlyclassName!:string;

privategetisShow(){
return!!this.name;
}

privategeticonName(){
return`#icon-${this.name}`;
}

privategetsvgClass(){
if(this.className){
return'svg-icon'+this.className;
}else{
return'svg-icon';
}
}
}



.svg-icon{
width:1em;
height:1em;
fill:currentColor;
overflow:hidden;
}

在当前目录下创建index.ts

importVuefrom'vue';
importSvgIconfrom'./svgIcon.vue';//svg组件

//注册到全局
Vue.component('svg-icon',SvgIcon);

constrequireAll=(requireContext:any)=>
requireContext.keys().map(requireContext);
constreq=require.context('./svg',false,/\.svg$/);
requireAll(req);

在当前目录下新建svg文件夹，用于存放需要的svg静态文件。

☁icons[1.1.0]⚡tree-L2
.
├──index.ts
├──svg
│└──loading.svg
└──svgIcon.vue

使用:

我们来看一下原理和值得注意的几点：

svg-sprite-loader处理完通过import的svg文件后将其生成类似于雪碧图的形式，也就是symbol,通过配置中的.options({symbolId:'icon-[name]'});可以使用直接使用这个svg
添加完svg-sprite-loader后，由于cli默认对svg有处理，所以需要exclude指定文件夹的svg。
使用时由于svgIcon组件的处理，只需要将name指定为文件名即可。

那么，我们使用iconfont和svg有什么关系呢？

iconfont的使用方法有很多种，完全看个人喜好，但是其中一种使用方法，也是用到了svgsymbol 的原理，一般iconfont会默认导出这些文件。

☁iconfont[1.1.0]⚡tree-L2
.
├──iconfont.css
├──iconfont.eot
├──iconfont.js
├──iconfont.svg
├──iconfont.ttf
├──iconfont.woff
└──iconfont.woff2

我们关注于其中的js文件,打开文件，可以看出这个js文件将所有的svg已经处理为了svgsymbol，并动态插入到了dom节点当中。

而iconfont生成的symbolId也符合我们svg-icon的name命名规则所以我们在项目的入口文件中引入这个js之后可以直接使用。

back-to-up

首先为什么会写这个组件呢，本项目中使用的组件库是elementUI，而UI库中自带el-backtop,但是我能说不好用吗？或者说我太蠢了，在经过一番努力的情况下我还是没能使用成功，所以自己写了一个。

直接上代码：




import{Component,Vue,Prop}from'vue-property-decorator';

@Component
exportdefaultclassBackToTopextendsVue{
@Prop({default:()=>400})privatereadonlyvisibilityHeight!:number;
@Prop({default:()=>0})privatereadonlybackPosition!:number;
@Prop({
default:()=>({})
})
privatereadonlycustomStyle!:any;
@Prop({default:()=>'fade'})privatereadonlytransitionName!:string;

privatevisible:boolean=false;
privateinterval:number=0;
privateisMoving:boolean=false;

privatedetaultStyle={
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
};
privategetlocalStyle(){
return{...this.detaultStyle,...this.customStyle};
}
privatemounted(){
window.addEventListener('scroll',this.handleScroll);
}

privatebeforeDestroy(){
window.removeEventListener('scroll',this.handleScroll);
if(this.interval){
clearInterval(this.interval);
}
}

privatehandleScroll(){
this.visible=window.pageYOffset>this.visibilityHeight;
}

privatebackToTop(){

window.scrollTo({
left:0,
top:0,
behavior:'smooth'
});


}

}



.back-to-ceiling{
background-color:rgb(255,255,255);
box-shadow:006pxrgba(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:display0.1s;
}
.fade-enter,
.fade-leave-to{
display:none;
}

使用：

custom-style可以自行定义，返回的图标也可以自由替换。

注意，在safari中动画中动画表现不一致，使用requestAnimationFrame之后仍然不一致。希望同学们有时间可以自由发挥一下。

总结

永远抱着学习的心态去写代码，尝试多种写法，写出你最优雅的那一种。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

详解Vue 项目中的几个实用组件（ts）

热门推荐

随机推荐