2020年11月_qq_36437172

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

原创 Vue 项目优化图片

我们通常都会借助webpack打包工具，对小图进行转base64,或者使用字体图标等功能进行优化，以及制作雪碧图来减少访问请求次数等。在访问一个项目中，有时候我们通过接口访问图片资源时，图片加载也需要时间，我们如何快速的渲染图片呢？1.压缩文件将上传的图片，放到在线压缩网站上，对所有图片进行压缩，减少文件体积，加快渲染速度。如果用到阿里云OSS上传图片文件，我们可以使用阿里云提供的图片处理方式，例如：阿里云提供图片缩放的方法。按照比例缩放：x-oss-process=ima...

2020-11-18 21:53:46 1117

原创 Vue 中如何配置项目支持 JSX 语法

Vue 是使用的的模板语法，Vue的模板实际上就是编译成了 render 函数，同样支持 JSX 语法。在 Vue 官网中，提供 createElement 方法来

2020-11-15 20:54:46 3968

转载 Vue 使用 Export2Excel 导出 excel

1.安装依赖npm install -S file-savernpm install -S xlsxnpm install -D script-loader2.引入所需的JS文件把Blob.js和Export2Excel.js这两个文件放到src/utils/excel文件目录下，Blob 文件在GitHub上能找到。3.页面方法调用async handleExport () { const { data: { rows } } = await ReportFor...

2020-11-15 19:18:10 514

原创在 render 函数中，Vue 实例属性：$attrs、$props、$listeners 和 $scopedSlots的使用

一、$attrs、$props、$listeners$attrs：当前组件的属性，通俗的讲也就是在组件标签定义的一系列属性，如input的value，placeholder等，但是不包括在当前组件里面定义的props属性$listeners：当前组件监听的事件，通俗的讲也就是在使用组件的时候在标签中定义的事件，如@input，以及一些自定义事件@tempFn等$props：当前组件从父组件那里接收的参数，通俗的讲和$attr差不多，但是只包括在当前组件中定义了的props属性。通俗的讲：$.

2020-11-15 18:58:24 5327

原创 vue 后台管理系统如何生成动态菜单

说起菜单的如何生成的，这个会与路由和权限的定义有关。因为路由涉及页面的跳转以及当前菜单项高亮选中等，可能后面还会涉及面包屑、标签页等功能的制作。目前不考虑权限，我们根据约定路由的配置，来生成动态菜单。一、布局对于后台管理系统，通常由 sider 菜单栏、header、footer 和 content 的内容组成。<a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout> .

2020-11-08 22:09:15 2908 3

原创 ant-design-vue select 可搜索下拉加载更多

1.搜索配置showSearch属性，支持单选模式可搜索。filterOption是否根据输入项进行筛选。当其为一个函数时，会接收inputValueoption两个参数，当option符合筛选条件时，应返回true，反之则返回false。filterOption(input, option) { return option.componentOptions.children[0].text.includes(input)},2.搜索与远程数据结合这里需要...

2020-11-05 22:09:32 7027 5

原创 ant-design-vue cascader 级联选择动态加载省市区接口数据

通过接口获取数据，用于配置 cascader 组件的options 可选数据源。async mounted () { const data = await this.getRegion() this.options = data.map(item => { item.isLeaf = false return item })}在接口返回的数据中，添加参数 isLeaf: false，动态加载数据时，才会触发 loadData 方法，.

2020-11-05 22:08:21 5829 7

原创 JS 中的 reduce 常用使用方式

1.reduce的介绍reduce()方法对数组中的每个元素执行一个有您提供的reducer函数（升序执行），将其结果汇总为单个返回值。constarray1=[1,2,3,4];constresult=array1.reduce((accumulator,currentValue)=>accumulator+currentValue)console.log(result);//10reducer函数接收4个参数:Accumulator...

2020-11-04 23:02:22 218

原创了解 Promise 常用 API

1.Promise.resolve2.Promise.all3.new Promise((resolve, reject) => {})4. return new Promise((resolve, reject) => {})const a = () => Promise.resolve(true)console.log(a())let result = Promise.all([a()])result.then(r => console.log(r).

2020-11-04 23:00:39 598

原创 Vuex 之命名空间 namespaced

Vuex由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。因此，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，此.

2020-11-03 23:04:11 792

转载 JS 的立即执行函数

1.定义IIFE：ImmediatelyInvokedFunctionExpression，意为立即调用的函数表达式，也就是说：声明函数的同时立即调用这个函数。对比一下，这是不采用IIFE时的函数声明和函数调用：function foo(){ var a = 10; console.log(a);}foo();下面是IIFE形式的函数调用：(function () { var a = 10; console.log(a);})();函数的声明和IIF...

2020-11-02 22:32:56 425

原创 Vue 自定义组件中，使用 v-model 如何定制 prop 和 event

一、v-model 语法糖v-model指令在表单<input>、<textarea>、<select>元素上创建双向数据绑定。<input v-model="value" />二、model 属性实现自定义组件的双向数据绑定允许一个自定义组件在使用v-model时定制 prop 和 event。默认情况下，一个组件上的v-model会把value用作 prop 且把input用作 event，但是一些输入类型比如单选框...

2020-11-02 22:06:28 6220

原创 slice() 与 splice() 的用法和区别

一、slice(start, end)从 start 开始截取到 end 但不包括 end 返回值为截取出来的元素集合原始的数组不会发生变化const arr = [10, 20, 30, 40, 50]const arr1 = arr.slice() // [10, 20, 30, 40, 50]const arr2 = arr.slice(1, 4) // [20, 30, 40]const arr3 = arr.slice(2) // [20, 30, 40, 50]const

2020-11-02 22:06:03 342

原创 async 与 await 是啥？如何捕获异常？

一、async 和 awaitasync 和 await 主要用于进行异步请求。异步函数：程序运行起来不会阻塞后面的代码进程。async 是返回一个 promise 对象，await 就是 async 返回的 promise 对象返回的结果。await 需要搭配 async 使用。function loadImg(src) { const promise = new Promise((resolve, reject) => { img.onload = function ()

2020-11-01 23:11:04 5665

转载 Array.slice 的常用用法

slice 方法可以在不修改原始列表的情况下，创建列表子集的浅拷贝。注意： splice 方法会修改原始数组。一、slice工作原理如MDN文档，slice是数组上的一个方法，它最多有两个参数:arr.slice([begin[, end]])begin从该索引处开始提取原数组中的元素,如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。如果省略begin，则slice从...

2020-11-01 17:56:04 3782