- 博客(81)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 typescript中keyof与typeof操作符用法
一、keyof 简介TypeScript 允许我们遍历某种类型的属性，并通过 keyof 操作符提取其属性的名称。keyof 操作符是在 TypeScript 2.1 版本引入的，该操作符可以用于获取某种类型的所有键，其返回类型是联合类型。下面我们来看个例子：interface Person { name: string; age: number; location: string;}type K1 = keyof Person; // "name" | "age" | "locat
2021-01-21 16:29:46
13542
2
原创 typescript中Object,object,{}类型之间的区别
一、使用 object 类型进行类型声明随着 TypeScript 2.2 的发布，标准库的类型声明已经更新，以使用新的对象类型。例如，Object.create() 和Object.setPrototypeOf() 方法，现在需要为它们的原型参数指定 object | null 类型：// node_modules/typescript/lib/lib.es5.d.tsinterface ObjectConstructor { create(o: object | null): any; s
2021-01-21 16:27:01
3437
原创 nuxt中,bootstrapVue自定义样式使用
安装: npm i -S bootstrap-vue/nuxt配置nuxt.config modules: ["bootstrap-vue/nuxt"], css: ["@/assets/style/customBootStrap.scss"], //全局bootstrap样式 bootstrapVue: { //引入icon icons: true, // 自定义样式,以下两属性设置false bootstrapCSS: false, b..
2020-12-15 09:49:54
2029
原创 nuxt修改ico和pwa的配置使用
修改ico在static中添加自己需要的图标,如favicon2.iconuxt.config.js中修改head:{ link: [ { rel: "icon", type: "image/x-icon", href: "/favicon2.ico" }, { rel: "shortcut icon", href: "/favicon2.ico" }, { rel: "apple-touch-icon", href: "/favicon2.ico" } ]}
2020-12-15 09:28:16
2448
1
原创 nuxt统一管理api模块
思路创建一个用于暴露api的plugin, 并将axios传参入api模块中调用步骤创建axios拦截器,统一管理请求(这步可有可无)export default function({ store, redirect, req, router, $axios }) { $axios.interceptors.request.use(config => { return config; }); $axios.interceptors.response.use(
2020-12-09 17:52:53
2127
3
原创 print.js分页,铺满纸张打印
问题打印A和B两个区域, 高度大于一张A4纸高度, 如何保证两个区域分别铺满在A4纸上A4纸宽度: 210mm; 高度:297mm;普通打印: 思路:打印内容超出一张纸高度时,根据纸张大小,设置打印区域的zoom,按比例缩小打印依赖函数Print.js,采用iframe绘制并打印 (复制调用即可)/***** iframe打印 * @param dom 打印区域的class, id * @param options.margin 控制页眉页脚, 默认 4
2020-11-23 11:40:52
6078
原创 mongoose关联查询并筛选子集数据
模拟数据city表{ "_id": { "$oid": "5f3b38a02e53c81ce4073d77" }, "status": { "$numberInt": "1" }, "add_time": { "$numberDouble": "1597716640324" }, "title": "北京",}food表cid与city表_id关联{ _id:5f3a30c102108
2020-09-21 10:04:43
940
原创 C-LODOP打印插件使用
事例为vue中使用安装安装c-lodop插件CLodop_Setup_for_Win32NT.exe 和 打印机对应驱动下载引入CLodopfuncs.js至目录下载地址编写LodopFuncs.js用于加载clodop,用于打印前判断c-lodop是否安装和加载注意: 依赖 CLodopfuncs.js,CLodop_Setup_for_Win32NT.exe 注意下面代码中的引入路径, 具体按照实际情况修改var CLodopJsState;//====加载C-Lodop的过程(用s
2020-08-24 09:32:48
7983
原创 mongoose从被关联模型中查询关联模型数据
数据如下被关联数据-articleKeywords表:{ "_id": { "$oid": "5f3b38a02e53c81ce4073d77" }, "status": { "$numberInt": "1" }, "add_time": { "$numberDouble": "1597716640324" }, "title": "北京", "__v": { "$nu.
2020-08-18 11:30:02
413
原创 CentOS 7 nginx部署及ssl配置
80端口部署(http)server { listen 80 default_server; listen [::]:80 default_server; server_name domain.com www.domain.com; root /home/client/; location / { try_files $uri $uri/ /index.html; } location /api {
2020-08-05 15:40:18
233
原创 vue-worker的使用,及element ui动态设置任意主题色
思路获取document中所有的style标签,正则匹配替换里面含有主题色的字符串,并生成新的字符串append到body中,起到覆盖样式的作用问题和解决当样式字符串比较多时,正则匹配与替换这步操作耗时比较多,会阻塞当前页面,此时使用web-worker创建子线程来解决具体代码1 安装js-cookie vue-worker2 element-variables.scss项目默认的自...
2020-04-08 14:58:06
1615
1
转载 小程序页面栈控制
页面栈首先我们要理解在小程序中页面的路由是小程序框架本身控制的我们不要去手动管理， 小程序框架通过一个页面栈的设计来管理所有的界面，为了便于理解你可以看一下示意图。如图所示小程序的页面栈最大能存放5个页面，当页面栈中的页面等于5时，在使用navigateTo这种方式是不能再跳页的。下面我们分析一下页面栈的变化过程，从分析中，我们需要明白的一个重要问题就是，当客户按返回按钮的时候究竟会跳转...
2020-03-19 11:47:16
795
原创 mongoose数据校验
一、Mongoose检验参数required : 表示这个数据必须传入max: 用于 Number 类型数据， 最大值min: 用于 Number 类型数据， 最小值enum:枚举类型， 要求数据必须满足枚举值 enum: [‘0’, ‘1’, ‘2’]match:增加的数据必须符合 match（正则） 的规则maxlength： 最大值minlength： 最小值var UserS...
2020-02-16 17:26:45
500
原创 解决video标签播放在微信浏览器中自动全屏问题（vue-video-player使用后续）
接着之前的vue-video-player 插件使用属性熟悉下面是微信video中几个Attribute的作用poster="loadbg.jpg" : 视频封面x-webkit-airplay="allow" : 允许iOS的airplayx5-video-player-type="h5" : 启用x5内核的播放器,是微信安卓版特性,另外在X5内核里，video是单独的一个view...
2019-10-14 10:41:25
2130
原创 vue-video-player 插件使用
开发遇到视频音频播放的需求,首先想到的是常用的videojs、audiojs这俩插件,但是在做vue开发肯定得换个思路,于是在github上找到了star较多的vue-video-player安装npm install vue-video-player --save引入和挂载import 'video.js/dist/video-js.css'import { videoPlayer...
2019-10-14 10:33:35
1554
原创 react-router-dom 与 后台路由的混合搭配使用
目前web开发流行的前后台分离模式,但是实际开发中存在需要后台来控制部分路由的情况思路单独配置一个后台路由的对象数组待用代码先匹配前台路由不匹配的则去匹配上面配置的对象数组, 跳转所需要的路径具体代码后台路由配置: redirect.jsimport React from "react";import { Redirect } from "react-router-...
2019-09-24 11:00:42
483
原创 weixin小程序传参获取的几种方式
已获取id为例, 二维码扫描, 路由传参, 转发这三种情况onLoad(){ var obj = wx.getLaunchOptionsSync(); //获取onLaunch时的参数 if (obj.scene == '1047') { //扫描二维码场景获取 var query = decodeURIComponent(obj.query.scen...
2019-07-17 13:29:11
238
原创 小程序onPullDownRefresh触发onReachBottom的解决方法
问题下拉刷新,上滑加载是比较常见的数据刷新方式, 本人在小程序开发过程中遇到如题这个坑点,两个交互同时触发导致数据重复渲染解决方法在onPullDownRefresh中加个状态A, onReachBottom中根据状态A来判断是否需要加载数据, 参考如下:onReachBottom: function() { //没有下拉状态才进行加载数据 !this.data.pullst...
2019-06-30 10:37:10
2089
原创 微信小程序二维码获取, canvas绘制,转图坑点解决方法总结
坑点1: 获取不到小程序码的二进制流解决: 请求配置添加 responseType: 'arraybuffer' wx.request({ url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + this.data.token, method: 'post', dat...
2019-06-18 12:29:14
1923
原创 解决ant design Tabs组件使得同一个子组件多次挂载的bug
当项目中使用react-loadable处理异步加载,ui使用了ant design的Tabs组件就会出现一些难以定位的错误例:<Tabs tabs={tab1} initialPage={nav1} tabBarPosition="top" renderTab={tab => <span>{tab.title}</span>} swipe...
2019-04-23 13:26:08
5244
1
原创 react非组件处理路由跳转
react组件中的跳转有Redirect, Link, withRouter高阶组件包裹跳转等等,但是对于非组件中,入请求接口统一封装调用后的判断, 这时需要创建history对象,调用对应方法跳转, 具体如下:先下载依赖:npm i history --save使用import { createHashHistory } from 'history'; // hash路由// ...
2019-04-20 12:22:33
2297
转载 解决`play() failed because the user didn‘t interact with the document`
详情见: Chrome 66禁止声音自动播放，开发怎么应对？
2019-03-11 16:37:15
40404
1
原创 react-router-dom4.x withRouter用法及函数式路由跳转
作用：将react-router 的 history、location、match 三个对象传入props对象默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用 函数跳转 的写法，执行this.props.history.push('/detail')跳转到对应路由的页面然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数...
2019-03-07 10:42:33
5549
原创 react-router-dom4.x按需加载
基于 react-loadable 来实现路由按需加载npm install --save react-loadableimport React from 'react';import ReactDOM from 'react-dom';import { Route , BrowserRouter, Switch } from 'react-router-dom';import {Pr...
2019-03-04 21:19:23
982
原创 长按计时事件封装
该封装事件基于jq, 参数如下fn 长按开始回调 类型: function(s) 参数s:长按计时 (秒)endfn 长按结束回调 类型: function(s) 参数s:长按计时 (秒)limitS 限制时间 类型: string (秒)$.fn.longTap = function(fn, endfn, limitS) { var timeout = u...
2019-02-23 11:34:03
248
原创 styled-components中弃用injectGlobal的解决
编译错误提示: 'injectGlobal' is not exported from 'styled-components'原因: styled-components 4.x版本将原来的injectGlobal方法用createGlobalStyle替换了。用法上也有一些不同,如下import {createGlobalStyle} from 'styled-components';exp...
2019-02-16 15:20:17
3594
原创 解决create-react-app中antd配置主题的报错
首先安装 less, less-loader项目中暴露配置npm run eject项目\config\webpack.config.dev.js和webpack.config.prod.js中添加配置,如下:const lessRegex = /\.(less)$/;//添加主题变量所有变量const modifyVars = { "primary-color": "pi...
2019-02-13 10:57:01
1020
原创 尾递归解决递归时的栈溢出错误
递归是非常耗内存的,因为需要同时保存成千个调用帧,容易发生栈溢出错误,但如果使用尾递归的话,由于只存在一个调用帧,所以不会发生栈溢出错误.例1: 阶乘计算function factorial (n) { if (n === 1) return 1; return n * factorial(n - 1) ;}factorial(S) // 120...
2019-01-17 18:22:00
1437
原创 React组件销毁中清理异步操作和取消请求
报错描述:Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous task...
2019-01-16 16:18:07
12720
1
转载 解决wx.getLocalImgData在安卓上的兼容问题
wx.getLocalImgData({localId: '', // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示}});在开发过程中，在IOS上得到的数据是一个图片的base64码，而在安卓机上得到的是没有头部的base64...
2019-01-15 12:43:23
5585
19
原创 react中css设置作用域
react中使用普通的css样式表会造成作用域的冲突，css定义的样式的作用域是全局，在Vue 中我们还可以使用scope来定义作用域，但是在react中并没有指令一说，所以只能另辟蹊径了。下面我将简单记录并介绍一下在webpage配置实现css 的模块化。webpack的配置： 截取一小段 {test: /\.css/,use:['style-loader','css-loader?...
2019-01-09 15:14:35
5708
CLodop_Setup_for_Win32NT.exe
2020-11-20
Gprinter - 热敏打印机驱动 (支持多机型)
2020-11-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人