alize的博客

原创 iframe跨域问题：Uncaught DOMException: Blocked a frame with origin解决方法

iframe跨域问题：Uncaught DOMException: Blocked a frame with origin解决方法

原创 phaser 3 加载图片时加载不上报错 Local data URIs are not supported解决

可能是因为base64的图片无法加载，如果是vue项目的话，可以改一下url-loader 的 limit 参数改成 1，不用base64就不会有问题了修改vue-cli webpack url-loader 为1chainWebpack: config => { const urlLoader = config.module.rule('images') // 清除已有的所有 loader。 // 如果你不这样做，接下来的 loader 会附加在该

原创 Uniapp vue3.0 ref = undefined 的替代方案

setup 在生命周期 beforecreate 和 created 前执行，此时 vue 对象还未创建，因无法使用我们在 vue2.x 常用的 this。解决办法是 vue 中的 getCurrentInstance 方法返回了 ctx 和 proxy，控制台打印 ctx 和 proxy 发现和 vue2.x 中的 this 等同，习惯使用 this 的同学可以用 proxy 进行替代。没有用 ctx 因为 vue3 项目打包后 ctx 会失效。也可以在 App.vue 用 provide + inje

原创 js ts 根据时间戳判断是否为今天

export function isSameDay(timeStampA: number, timeStampB: number): boolean { let dateA = new Date(timeStampA); let dateB = new Date(timeStampB); return (dateA.setHours(0, 0, 0, 0) == dateB.setHours(0, 0, 0, 0));}

原创 js ts 格式化日期(时间戳转年月日时分秒)

export enum FormatsEnums { YMD = 'Y-m-d', YMDHIS = 'Y-m-d H:i:s', _YMD = 'Y年m月d日', _YMDHIS = 'Y年m月d日 H时i分'}export const dateFormat = function (timestamp: number, formats: FormatsEnums): string { // formats格式包括 // 1. Y-m-d //

原创 typeScript非空断言符 ！？的区别

！是预防前面？是预防后面

原创 Angular组件的创建 打包npm包的流程

大体流程是先建一个组件的仓库，仓库开发完成后build到dist中，然后打包发布。1. ng g library 仓库名 --prefix=selector的前缀比如：ng g library search-form --prefix=ytxx2.开发仓库第一步之后已经在项目根目录下建好了projects文件夹，在projects下有刚刚自己新建的仓库。lib下边就是我们操作的地方了，写好组件以后在module中把组件export出来，不然不能通过selector使用组件。public-api.

原创 tsc -p tsconfig.json --watch

tsc -p tsconfig.json --watch

原创 html2Canvas jsPDF 实现导出PDF文件

jsPDF官网html2Canvas官网<div id="canvas_pdf"> 我是一段话</div>import html2canvas from 'html2canvas';import { jsPDF } from 'jspdf'; const _this = this; const canvas_pdf = document.getElementById('canvas_pdf'); canvas_pdf.style.background

原创 lodashjs防抖节流

https://www.lodashjs.com/

原创 qiniu-js 上传七牛云服务

引入支持以下几种安装方式直接使用静态文件地址：https://cdnjs.cloudflare.com/ajax/libs/qiniu-js//qiniu.min.js通过sctipt标签引入该文件，会在全局生成名为 qiniu 的对象使用 NPM 安装NPM 的全称是 Node Package Manager，是一个 NodeJS 包管理和分发工具，已经成为了非官方的发布 Node 模块（包）的标准。如果需要更详细的关于 NPM 的使用说明，您可以访问 NPM 官方网站，或对应的中文网站np

原创 uni-app 子组件使用onLoad无效

1.uni-app 支持的页面生命周期函数是包含onLoad但是，在组件里面的时候不能使用页面生命周期函数，因此想要有onload的效果的时候，必须改成vue的mounted2.uni-app的组件中可以直接使用Vue的生命周期函数对逻辑进行处理...

原创 html2canvas html dom通过canvas生成图片

http://html2canvas.hertzen.com/

原创 TypeScript 导入 JSON Module --resolveJsonModule

// typings.d.tsdeclare module '*.json' { const value: any; export default value;}import jsonfrom 'src/assets/json/users.json'

原创 CSS,font-family,好看常用的中文字体

例1（小米米官网）：font-family: “Arial”,“Microsoft YaHei”,“黑体”,“宋体”,sans-serif;例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,‘宋体’,sans-serif;例3（加网 ）：font: 14px/1.5 ‘Microsoft YaHei’,arial,tahoma,\5b8b\4f53,sans-serif;例4（淘宝UED）：font: 12px/1 Tahoma,Helvetica,

原创 CSS修改radio的样式（对勾效果和圆形效果）

<input class="radio_type" type="radio" name="type" id="radio1" checked="checked"/> <label for="radio1">radio1</label><input class="radio_type" type="radio" name="type" id="radio2" /> <label for="radio2">radio2</label&gt.

原创 前端JS利用canvas的drawImage()对图片进行压缩

HTML5 file API加canvas实现图片前端JS压缩要想使用JS实现图片的压缩效果，原理其实很简单，核心API就是使用canvas的drawImage()方法；canvas的drawImage()方法API如下：context.drawImage(img, dx, dy);context.drawImage(img, dx, dy, dWidth, dHeight);context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidt

原创 angular hash模式和H5模式（地址路由无#）切换

index.html<base href="/">app.module.tsimport { LocationStrategy, HashLocationStrategy, PathLocationStrategy } from '@angular/common';providers: [ // { provide: LocationStrategy, useClass: HashLocationStrategy } // hash模式 {provide: Locat

原创 js 汉字拼音转换工具。

github地址npmnpm install pinyin用法var pinyin = require("pinyin");console.log(pinyin("中心")); // [ [ 'zhōng' ], [ 'xīn' ] ]console.log(pinyin("中心", { heteronym: true // 启用多音字模式})); // [ [ 'zhōng', 'zhòng' ],

原创 ＜ng＞修改第三方组件的样式——ng-zorro等组件默认样式的修改

在使用一些第三方的组件的时候，要修改组件的样式。这种情况下使用::host ::ng-deep .className{ 新的样式......}// 修改自定义第三方样式:host ::ng-deep .am-list-line { font-size: 20px; .am-input-label { font-size: 20px !important; }}这样的方式就可以方便的修改样式了。:host 表示选择器，选择当前的组件。

原创 NPM镜像源查看和切换

一、镜像源链接切换全局切换镜像源：npm config set registry http://registry.npm.taobao.org查看镜像源使用状态：npm get registry全局切换官方镜像源：npm config set registry http://www.npmjs.org二、使用 nrm 切换镜像源下载 nrm：npm install -g nrm查看可切换的镜像源： nrm ls (*表示正在使用的镜像源)* npm -------- https://r

转载 angular 数据改变视图不变的解决方案

原创 bug: ng cannot find type definition file for ‘$‘ ； angular找不到“ $”的类型定义文件；

“错误TS2688中的错误：找不到’$'的类型定义文件”tsconfig.app.json types修改为：

转载 HTML5 浏览器Notification Win10推送消息

if (window.Notification) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('safari') != -1) { if (ua.indexOf('chrome') > -1) { // Chrome Notification.requestPermission().then(function (permission) { if

原创 canvas 实现图片放大缩小拖拽 移动端、PC端

前言实现目标：使用canvas画出地图，且可以通过鼠标滚轮缩放，拖拽；手指滑动拖拽，手势缩放drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) //下面的变量名以此为准<template> <canvas ref="bargraphCanvas" :width="canvasWidth" :height="canvasHeight"></canvas></temp

原创 antPro umi dispatch回调，effects返回请求参数

方法一：new Promise((resolve) => { this.props.dispatch({ type: 'query/query', payload: { resolve, id: 1 }, });}).then (res => { console.log(res)})effects: { *query({ payload, query }, { call, put }) { const {

原创 vue 中 如何使用 jquery

npm install jquery在 webpack.base.conf.js 中添加const webpack = require('webpack') plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }methods： { init(){ $('body') }

原创 SVG实现图片圆角效果

<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" style="background: orange"> <title>Emulating CSS3 border-radius on an image element in svg</title> <desc> Draw a 1px black border a

原创 微信小程序 自定义tabBar 需要点两次才能跳转 跳转顺序错误 bindtap事件错误 Component “xxx” does not have a method “xxx” to handle

需要在你的页面下添加索引// index/index4.jsPage({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初...

原创 [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus

我们只需要将滑动报错的标签上加上一个样式即可 touch-action: none;touch-action ：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。touch-action取值有一下两种none：系统默认菜单被禁用default：系统默认菜单不被禁用* { touch-action: none;}...

原创 http请求出现413错误码

网站在进行文件上传的时候出现了上传文件失败，查看上传时的请求连接，发现上传的url报出了413的错误码。413的错误码是表示：请求实体太大。为什么会出现该问题？是因为nginx中的某处配置不够大#允许客户端请求的最大单文件字节数        client_max_body_size 10m;#缓冲区代理缓冲用户端请求的最大字节数，&nbs...

原创 window location截取URL各部分

URL即:统一资源定位符 (Uniform Resource Locator, URL)完整的URL由这几个部分构成：scheme://host:port/path?query#fragmentscheme(通信协议):常用的http,ftp,maito等host(主机): 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。port(端口号):整数，可选，省略时使用方案的默认...

原创 vue 中如何加载自定义字体 .ttf

先引入ttffont.cssApp.vue 引用font.css*{ font-family: 'font',"Source Han Sans CN","NSimSun",'FangSong';}注意：一定要用v-html{{}} 和 v-text 渲染效果一样 只会返回标签的内容 不会把标签的效果渲染出v-html 会带着标签效果一样显示,适合对接后台返回富文本内...

原创 微信小程序获取某个元素的高度宽度

js页面//创建节点选择器 var query = wx.createSelectorQuery(); //选择id var that = this; query.select('.every').boundingClientRect(function (rect) { // console.log(rect.width) that.set...

原创 JS 动画移动到锚点位置

goTagOne(id) { let mao = document.getElementById('tag-' + id) if(mao) { let pos = mao.offsetTop; function getScrollTop(){ var scrollTop=0; if(docume...

原创 全景组件 Pannellum 的简单使用 自定义点击事件

Pannellum github地址Pannellum CDN<!-- Latest compiled and minified standalone viewer -->https://cdn.pannellum.org/2.5/pannellum.htm<!-- Latest compiled and minified JavaScript --><...

原创 微信小程序 没有找到可以构建的npm包

1.进入小程序根目录，打开cmd，输入：npm init输入命令后一直点回车2.输入命令：npm i miniprogram-sm-crypto --production执行命令完之后，然后再去微信开发者中点工具-构建npm，然后就成功了，如下图...

原创 如何在 vue 中使用 photo-sphere-viewer

官网： https://photo-sphere-viewer.js.org/安装 photo-sphere-viewer依赖 npm install photo-sphere-viewer --save-dev 在你需要用到的页面引入文件 import PhotoSphereViewer from 'photo-sphere-viewer' import 'ph...

原创 Cannot find module ‘webpack-cli/bin/config-yargs

启动vue项目时报错:Cannot find module ‘webpack-cli/bin/config-yargs出现这个错误的原因是webpack与webpack-dev-server的版本不兼容, 解决方法如下:在本vue项目下输入:npm uninstall webpack -gnpm uninstall -g webpack-dev-server卸载完成后重新安装:npm...

原创 vue h5（网页） 调用相机拍照和相册，实现多张图片上传功能

第一种需求：只需要使用本地的图片资源<input id="upload" type="file" accept="image/*;" class="abc"> 第二种需求：只需要使用相机拍照功能<input id="upload" type="file" accept="image/*" capture="camera" c...