- 博客(96)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 【js】ES6进阶学习
1.SymbolSymbol是ES6引入的，继undefind，null，String，Number，Boolean，Object之后的第七种原始数据类型。Symbol变量通过Symbol函数生成，可以传入一个字符串用于描述(主要是方便在控制台打印和遍历识别)symbol.Symbol表示独一无二的值。//由于 Symbol 表示独一无二的值，则使用Symbol()生成的值不存在和别的值相等const s1 = Symbol('s1');const s2 = Symbol('s2');con
2021-12-07 11:24:42
1082
转载 react-hooks学习
react hooks在react16.8版本以后，推出的一组函数式的api.专门用于函数组件，使函数组件也能像类组件一样使用state和生命周期等一些特性。1.useStateuseState可以使函数组件处理数据的状态。它只能放在函数组件中，不可以用在判断和循环语句中。let [state,setState] = useState(initialState);useState接收一个state初始值，返回这个state和设置state的函数；设置state的函数不能自动合并state.
2021-07-18 19:11:14
314
原创 【css】grid布局学习
grid据说是最强大的css布局方案。兼容性：灵活但兼容不好，就连谷歌浏览器都有部分不兼容：https://www.caniuse.com/?search=gridgrid布局特征：将容器划分为行和列，以产生单元格1.容器 / 项目 / 单元格 / 网格线 / 容器属性采用grid布局的区域，称为容器（container），容器内部采用网格定位的子元素，称为项目（item）正常情况下，n行和m列会产生n*m个单元格（cell），比如3行*3列 = 9个单元格划分网格的线，称..
2021-04-06 11:40:32
377
原创 【typescript】记录typescript基本知识的学习
1.typescript特点1.编译型的语言2.强类型的语言3.真正面向对象的语言typescript 就是比javascript 更java 的script2.全局安装npm install -g typescripttips:ts编译成js：tsc demo.ts3.基础数据类型字符串类型let email:string="111@163.com"let msg:string = `my email is ${email}`...
2021-04-03 22:42:16
318
1
原创 【vue3.x】vue3.x基础知识学习
1.vue2.x和vue3.x项目的区别1.1.创建应用实例的方式vue2.x：通过new Vue()创建vue根实例，从同一个vue构造函数创建的每一个根实例共享相同的全局配置import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = falsenew Vue({ ro.
2021-02-27 00:50:52
1257
4
原创 【react】基础知识补充及原理【粗略版】
PureComonent默认给类组件添加了一个shouldComponentUpdate的钩子函数，在这个钩子中，会对新旧状态及属性做一个浅比较，以此达到优化组件渲染的目的。
2022-12-03 21:22:52
863
原创 【vue】配置cdn加速
//vue.config.jslet cdn = { css: [], js: [] };// 通过环境变量 来区分是否使用cdnconst isDev = process.env.NODE_ENV === 'development'; // 判断是否是开发环境let externals = {};if (!isDev) { // 如果是非开发环境 就排除打包 否则不排除 externals = { // key(包名) / value(这个值 是 需要在CDN中获取js, 相.
2021-11-10 11:02:46
3796
2
原创 【vue】event bus简单使用(在js文件与vue文件之间通信)
bus是vue自身就携带的，不用引入，方便但不适合广泛使用。前情提要：vue+ant design vueant design vue这个ui框架那是真不好用，我想要做全局的弹窗，需要在http工具js中根据axios的请求情况来控制到App.vue中spin组件。。。//@/utils/bus.jsimport Vue from 'vue'const bus = new Vue()export default bus//这里为什么没选择挂载在this上呢？因为js文件中莫得t
2021-09-17 15:41:08
1395
原创 【vue】elementui Form和rules注意事项及规则
该博客基于此篇博客：Element UI各种使用问题汇总（Input、Form篇）一直以来，elementui用起来form和rules问题一大堆（小问题），但是积小成大，每次写明明很简单，但总有头疼之时。故将form各种注意事项和rules规则进行整理记录。...
2021-09-14 15:24:16
709
原创 【vue】使用provide，inject来刷新页面
问题：使用其他方式刷新当前页面有时会出现一段时间的空白，用户体验不好(利用这些方式来重新加载数据也不好)provide代码：//被控制页面<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', provide()
2021-09-10 15:22:30
246
原创 vue 萤石云视频监控对接
萤石云文档(web开发)参考博客：https://www.jianshu.com/p/5b104ce25724参考博客：https://www.jianshu.com/p/00b6331f3aff
2021-09-09 17:18:15
9272
12
原创 js 常用正则表达式
//正整数/^([0]|[1-9][0-9]*)$///金额(两位小数)/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)///手机号/^1[3|4|5|6|7|8|9][0-9]\d{8}$//^[1][3,4,5,6,7,8,9][0-9]{9}$///座机号码/^([0-9]{3,4}-)?[0-9]{7,8}$///电子邮箱/^(([^<>()\[\]\\.,;:\.
2021-08-27 12:01:36
431
原创 【工具】vue 文件上传(单个/多个)，拖拽上传
本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/环境：vue@2.6.12 element-ui@2.15.3 1.文件上传(单个)组件代码：//components/FileUpload<template> <div class="upload-file"> <el-upload :accept="accept" :action="upl...
2021-08-18 12:11:21
4995
8
原创 【工具】vue 图片上传(单张/多张)
本文单传组件取自若依微服务为版ruoyi-ui：http://doc.ruoyi.vip/ruoyi-cloud/环境：vue@2.6.12 element-ui@2.15.3 1.图片上传(单张)组件：//components/ImageUpload<template> <div class="component-upload-image"> <el-upload accept=".png,.jpg,.jpeg" ..
2021-08-18 11:55:05
2705
1
原创 【工具】vue excel导入通用组件-模板导出组件
环境：vue@2.6.12 element-ui@2.15.5 1.excel导入组件代码：//components/ExcelImport<template> <div class="component-upload-image"> <el-upload accept=".xls,.xlsx" :action="uploadImgUrl" :on-success="handleUploadSucc.
2021-08-18 11:37:08
2910
转载 【工具】vue excel导出
本文中的excel导出工具取自花裤衩的https://gitee.com/panjiachen/vue-element-admin环境：vue@2.6.12 element-ui@2.15.5 file-saver@2.0.4 xlsx@0.14.1 工具方法：//vendor/Export2Excel.js/* eslint-disable */import { saveAs } from 'file-saver'import XLSX from '.
2021-08-18 11:15:31
283
转载 mock.js了解学习
mock.js官网1.安装npm i mockjs其他辅助安装npm i json5npm i axios2.语法规范该部分出自b站李炎恢视频，有兴趣可以去看1. Mock.js 的语法规范包括两个部分：数据模板定义规范和数据占位定义规范； 2. 数据模板定义的规范包含 3 个部分：属性名、生成规则和属性值//'属性名|生成规则':属性值'name|rule':value 1.字符串/数值（7种）生成规则 说明 示例 min-max...
2021-07-02 10:44:31
256
原创 自动化构建工具-gulp学习
1.gulp安装//全局安装npm install gulp@3.9.1 -g//本地安装npm install gulp@3.9.1//全局及本地都需要进行安装//安装后检测gulp -v2.生成package.json管理gulp依赖//npm进行初始化，生成package.jsonnpm init -y 再在根目录下创建gulpfile.js文件，用于配置gulp任务，并引入gulp：//gulpfile.js// gulp定制任务 =>..
2021-06-23 17:29:58
526
3
原创 【js】数据处理
这里收集一下看到的数据处理方法和技巧，以及在实际工作中碰见的。1.copy Array 的6种方法let arr = [1,2,3,4,5,6]; // 解构console.log('[...arr]:',[...arr]);// Array.from()方法console.log('Array.from(arr):',Array.from(arr));// slice方法console.log('arr.slice():',arr.slice());//
2021-06-04 17:37:07
227
原创 【微信小程序】基础知识学习
1.工具(vscode环境)JavaScript (ES6) code snippets ：ES6语法提示，代码片段 minapp：小程序代码补全（标签/属性）提示 wechat-sinppet：小程序代码补全（小程序API）提示，如wx-request wxapp-helper：小程序助手，模拟 Web 开发者工具的创建等功能2.小程序文件结构与基本项目目录文件结构：结构 传统web 微信小程序 结构 HTML WX...
2021-05-15 14:09:05
1116
3
原创 【vue】表单数据缓存
方案：localStorage +beforeunload事件因为我目前只缓存了表单的进度，以此为例。1.组件的created或mounted钩子中加入beforeunload事件window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));2.beforeunload事件的销毁//beforeDestroy和destroy钩子中都可做此种操作beforeDestroy(){ ..
2021-04-30 15:52:31
1954
1
原创 【vue】在vue项目直接使用html文件
1.在public目录中新建html文件夹，放入html文件2.在main.js加入访问路径Vue.prototype.$publicURL = './';3.在vue组件中使用跳转<a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}html/xxxx.html`,'xxxx协议')">《xxxx协议》</a>//mixin中方法使用window.open进行跳转.
2021-04-30 15:37:38
9348
7
转载 【vue && js】省市区js数据转为tree结构
area.js 地区数据结构：//area.js/** * areas 对象转tree结构 */export function addressToTree(){ let districtssheng = address.province_list; let districtsShi = address.city_list; let districtsQu = address.county_list; let newArrSheng = []; for(var i in distr
2021-04-16 10:06:31
2367
1
原创 【ant design vue】表格超过高度时显示滚动条
样式：/* 表格 *//*.table 为全局表格自定义样式*/.table .ant-table-body,.table .ant-table-header{ overflow-y: auto !important;}html代码：<a-table class="table" :scroll="{ y: 550 }"></a-table>
2021-04-12 10:56:29
2994
1
原创 【redux】redux和react-redux的学习
1.什么场景使用redux?1.项目角度用户的使用方式复杂 不同身份的用户有不同的使用方式（多角色） 多个用户之间可以协作 与服务器大量交互，或者使用了websocket view要从多个来源获取数据2.组件角度某个组件的状态需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态2.redux设计思想web应用是一个状态机，视图与状态一一对应的 所有的状态，保存在一个对象里面3.redu...
2021-04-10 11:02:00
217
1
原创 【vue】change事件在保留默认形参的情况下传递自定义形参
input事件只有一个默认参数：e,但是我想多传递一个别的参数<a-input :value="record.transferAmount" @change="toChangeInput"/>解决：写法一：//多传递单个参数@change="e => toChangeInput(e, record)"//假设默认参数有两个：oldval, newval@change="(oldval, newval) => toChangeInput(oldval, ne..
2021-04-08 12:00:28
2030
原创 【vue && 上传组件】清除上传组件缓存，使之每次显示新的文件列表
有时上传后，因缓存问题，不会显示上传后的文件列表解决：html代码：我当前所用的UI框架是ant design vue给上传组件添加一个fileKey的变量//封装的上传组件<a-row :key="fileKey"> <a-upload list-type="picture-card" accept="image/*,.pdf" :multiple="true" .
2021-03-25 18:09:05
1146
2
原创 【ant design vue】解决Tabs选项卡打开时不选择第一个选项卡页
tips:ant design vue Tabs的activeKey只能是string,否则设置不起作用原因：缓存导致，当选择其他选项卡页时，关闭后，再次打开，还是会选择关闭前的选项卡页解决：利用activeKeyhtml代码：这里给选项卡设置activeKey值，然后通过change回调将每次选择后的key值赋值给activeKey<a-tabs :activeKey="activeKey" @change="(key) => { this.activeKey =..
2021-03-25 17:57:38
3500
转载 【工具类】数值金额转中文大写金额
/** * 数值金额转中文大写金额 * @param {数值金额} money */Vue.filter('amountToChinese',(money) => { let cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'); let cnIntRadice = new Array('', '拾', '佰', '仟'); let cnIntUnits = new Array(''.
2021-03-18 12:04:29
279
转载 【工具类】格式化金额:逗号分隔三位且保留两位小数
/** * 格式化金额:逗号分隔三位且保留两位小数 */Vue.filter('amountFormat',(amount) => { //强制保留两位小数 let f = parseFloat(amount); if (isNaN(f)) return false; f = Math.round(amount * 100) / 100; let s = f.toString(); let rs = s.indexOf('.'); if .
2021-03-18 12:02:18
612
原创 【vue && 弹窗】vue项目弹窗中的组件编辑ref值却获取不到
vue项目中点击打开弹窗，弹窗上面有子组件，在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值：简易代码如下：<a-modal centered v-model="visible" :title="title"> <upload ref="upload" /></a-modal>js: handleOpenUpload(){ this.visibleUpload = tr..
2021-03-10 15:56:12
4064
原创 【vue && vue-pdf】解决pdf预览时的跨域问题
问题：pdf预览引起跨域当时出问题时没截图，现在的图从网络上截取的和vue 接口请求解决跨域问题一样，在本地开发时同样通过 webpack的devServer去代理pdf预览的url（请求），其他环境（生成及测试）则让后端去解决。解决开发环境pdf预览跨域问题就是在devServer中添加一个代理即可：//vue.config.jsproxy: { //数据接口代理 '/api': { target:
2021-02-22 10:43:20
16038
11
原创 【vue && ant design vue】利用vue-draggable-resizable插件实现表格拖拽
就很坑，为什么ant design vue没有表格拖拽？这应该是一个常用并且基本的组件功能，elementui的表格拖拽却如此丝滑。。。官网上说使用vue-draggable-resizable插件来实现，拖拽了一下官网上实现的，真的很丝滑，但是自己做完后，卡卡卡卡卡卡顿。。。1.下载为什么我这里指定了版本？？？因为别的版本我试了，同样的代码，这个版本行，别的版本不行 ，，，就能用就行npm i vue-draggable-resizable@2.1.02.实现/** ..
2021-02-19 15:39:24
1869
3
原创 【vue】mixin混入的使用
1.全局mixin对mixin的使用我其实很浑浊，不太清楚，但我一般喜欢将mixin作为vue option API的公共method来使用，即将mixin全局引入，使没有组件中的methods选项都拥有该方法，比如使用ant design vue框架时没有表格拖拽功能，那么可以通过mixin混入，使每个页面都有这个方法//mixin/common.js/** * 全局mixins */export default { methods:{ filterColum
2021-02-19 15:13:44
241
原创 【vue && vue-pdf】pdf展示及解决签章不显示的问题
1.下载npm i vue-pdf//我使用的是4.2.0版本,版本可能影响问题的解决npm i vue-pdf@4.2.0 2.作为组件引入import pdf from 'vue-pdf';export default { components:{ pdf }}3.使用定义pages变量稍后用来获取pdf的页数<pdf v-for="i in pages" :key="i" :src="pdfUrl" ...
2021-02-18 17:39:41
2097
原创 【ant design vue】a-tree树形组件获取数据及回显
1.获取数据首先，数据自然是tree结构的，这中间自然会有一些对数据的处理，说一下常用处理：将扁平化数据处理为tree结构数据https://blog.youkuaiyun.com/thcoding_cat/article/details/113697354 将数据的属性处理为组件要求的属性 解决该组件的一些问题，优化1.将数据的属性处理为组件要求的属性使用组件提供的该属性:replaceFields="{key:'id',title:'name',children:'child...
2021-02-18 16:25:53
28423
5
原创 【vue pc端】 下载文件
利用原生fetch下载文件，该方法完美解决了浏览器下载文件会打开文件（本身是下载，结果却打开文件变成了预览文件）的问题。tips: 1.在a标签上加download属性有时会不管用 2.直接使用blob API将url转换为blob地址，API会直接将url认为是字符串，所以下载文件后打开文件显示文件已损坏 3.推荐将该方法放入mixin中，需要使用的组件可引入//url:文件地址//fileName 文件名download(url,fileName){ ...
2021-02-18 15:31:54
466
题库后台管理系统
2017-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人