技巧
zxuanxuanz
这个作者很懒,什么都没留下…
展开
-
输入框过滤输入(基于antd design input 和 ts 和 vue-property-decorator 封装组件)
一、说明此例子基于antd design input 和 ts 和 vue-property-decorator 封装组件。一、定义一个prop用于接收需要过滤的值,它可以是XInputTransformEnum枚举中的值(比较常用的),也可以是一个正则或一个函数,亦或者是所有这些可能值组成的一个数组。@Prop() transform?: XInputTransform | XInputTransform[];二、类型定义export enum XInputTransformE原创 2021-11-26 16:01:02 · 746 阅读 · 0 评论 -
纯CSS绘制左连接、右连接、内连接、全连接的小圆
一、效果二、实现<template> <div :class="$style.jointIcon"> <div :class="[ $style.jointIconLeft, leftFill && $style.fillColor, leftFill && $style.level, ]" ></div> <.原创 2021-10-11 17:37:52 · 456 阅读 · 0 评论 -
前端获取视频第一帧作为封面
一、方法一通过创建canvas标签,利用其drawImage() 方法在画布上绘制该视频,然后运用toDataURL方法转换canvas上的图片为base64格式,并将base64格式的图片作为video标签的poster属性。toDataURL具有跨域问题。注意:canvas无法对跨域的图片进行操作,需要提前处理好跨域问题 getVideoBase64(url) { ...原创 2020-03-25 10:12:18 · 8278 阅读 · 4 评论 -
在H5页面中使用Google Analytics
一、概述Google-Analytics是google旗下一款网站数据记录类服务系统二、注册Google Analytics账号https://marketingplatform.google.com/about/analytics/https://analytics.google.com三、创建媒体资源(1)选择网站(2)填信息,网站网址随意填,可用于测试GA是否...原创 2020-01-11 14:39:30 · 1542 阅读 · 0 评论 -
前端JS和APP交互
在APP中嵌入H5时,往往需要进行交互,此时就需要用到JS交互。一、从前端调用APP的方法(1)与Android交互window.Android开发人员定义的对象名.Android开发人员定义的方法名();例如: window.android.open();(2)与IOS交互window.webkit.messageHandlers.ios开发人员定义的方法名.post...原创 2019-12-18 14:56:19 · 3989 阅读 · 0 评论 -
调用百度地图JavaScript API实现地址解析
一、百度地图 百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口(除发送短信功能外)无使用次数限制。二、步骤(1)登录百度账号...原创 2019-11-26 14:31:42 · 1490 阅读 · 0 评论 -
提取富文本中文字内容(使用正则)
function removeTAG(str){return str.replace(/<[^>]+>/g, "");}原创 2019-11-18 17:28:34 · 4830 阅读 · 0 评论 -
input file图片上传(使用OSS Javscrtipt 上传到服务器)以及图片裁剪(cropper.js)
一、图片上传(1)使用<input type="file" accept="image/*" name="file" @change="upload($event)">accept="image/*;capture=camera" 直接调用相机accept="image/*" 调用相机 图片或者相册(2)file文件属性lastModified:数值,表...原创 2019-10-29 19:18:41 · 1136 阅读 · 0 评论 -
Echarts绘制三条线间有区域颜色,同时在线上添加文字提示,以及添加一条标注的线
一、效果二、实现(1)使用堆叠图(stack属性相同形成堆叠图)实现区域的颜色,因为刚好该需求的三条线的数据是低、中、高的缘故,只需用50%的数据去减去3%的数据就可以得到50%这条线的数据,同时97%的数据,用97%的数据减去50%得到的数据即可实现该堆叠图的效果。(2)线上文字提示的实现,使用的是每个点上的标注(label属性),但是使用了自定义标注,设定只有最后一个点的标注显...原创 2019-10-24 15:39:01 · 3061 阅读 · 1 评论 -
canvas绘制图片模糊
一、关于canvas(1)canvas绘制的是位图,而我们平常用的jpg,png也是位图。位图又叫像素图或栅格图,它是通过记录图像中每一个点的颜色、深度等信息来存储和显示图像。具象一点讲,可以将位图想象成一个巨大的拼图,这个拼图有无数的拼块,每个拼块代表了一个纯色的像素点。理论上,1个位图像素对应着1个物理像素。(2)canvas的width和height属性<canvas...原创 2019-09-05 17:19:37 · 1557 阅读 · 0 评论 -
canvas.toDataURL图片跨域的问题解决
1.报错Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.2.原因图片的跨域会导致canvas.toDataURL()失败报错。3.解决图片跨域(1)打开跨域资源允许权限var img=new Image();img.crossOrigin...原创 2019-08-27 15:52:31 · 1904 阅读 · 0 评论 -
vue中使用swiper插件时动态绑定图片数据无法滑动或白屏
一、原因使用静态图片是没问题的,但是使用接口返回的图片数据去绑定swiper就会出现无法滑动或则白屏的问题,原因是swiper提前初始化了,获取的图片数据还未返回。二、解决(1)使用$nextTick,在数据更新后在初始化swiperconst vm = this;vm.$nextTick(function () { vm.swiperInit()}) ...原创 2019-08-26 15:24:24 · 1412 阅读 · 0 评论 -
vue移动端H5页面复制邀请码(clipboard插件以及document.execCommand)
一.clipboard插件官网链接:https://clipboardjs.com/1.安装(1)方法1:引入clipboard.js插件(2)方法2:使用npmnpm install clipboard --save或npm install clipboard.js --save-dev2.引入如果是vue文件,只需要在相关的组件中进行clipboard....原创 2019-04-17 11:45:36 · 3482 阅读 · 0 评论 -
使用qrcode.js将URL转化为二维码图片
1.下载qrcode.js并引入2.绑定容器<!-- 二维码容器 --><div class="erweima" id="qrcode" style="width: 210px;margin:15px auto"></div>3.生成二维码 qrcode(){ let that = this; let qrcod...原创 2019-06-12 11:46:20 · 7019 阅读 · 0 评论 -
移动端H5页面 使用 URL Scheme 唤醒 APP
1.URL Schemes[scheme]://[host]/[path]?[query]2.使用下面代码,Android使用iframe唤起,ios采用window.location.href唤起。// 分享课程 shareAlbum() { let params = { ...原创 2019-06-17 15:58:21 · 10052 阅读 · 0 评论 -
自适应页面(CSS3 @media 查询)
1. 介绍Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。@media 媒体类型and (媒体特性){你的样式}注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性)。媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个...转载 2019-06-18 17:05:02 · 2426 阅读 · 0 评论 -
js中对省市区字符串进行切割
// var address = "辽宁省沈阳市和平区"; // 以这个地址为例// const address = msg.detail;// const proExp = ".+[省]",cityExp = ".+[市]",disExp = ".+[区]";// const province = address.match(new RegExp...转载 2019-07-11 16:36:06 · 3557 阅读 · 2 评论 -
vue项目对要显示的富文本数据中的图片处理----去掉或控制图片大小
一、去掉图片标签let informationArticle = informationArticle.replace(/<\/?(img)[^>]*>/gi, '');利用正则直接替换掉二、控制图片大小通常需要控制图片大小,否则就会因为富文本图片太大导致页面很奇怪。如下,页面可以往右滑动。const regex = new RegExp('<i...原创 2019-08-02 17:26:55 · 8047 阅读 · 4 评论 -
input输入框防抖
<!-- 搜索框 --> <Input class="searchInput" :clearable="true" prefix="ios-search-outline" placeholder="请输入" style="width: auto" v-model="name" @on-change="inputValue"/> <!-...原创 2019-08-02 17:31:37 · 15422 阅读 · 1 评论 -
使用canvas在图片上画圆圈,并可点击圆圈在圆圈下方画垂直线(适配移动端)
一、UI二、实现<div class="carBrightSpot"> <!-- 轮播图 --> <div class="block-swiper"> <div class="wrapper"> <swiper :options="swiperOption" id="sw...原创 2019-08-07 17:42:34 · 2105 阅读 · 0 评论 -
iview的菜单组件Menu动态设置open-names属性失效解决方案
使用Menu的updateopened方法:手动更新展开的子目录,注意要在 $nextTick 里调用。this.$nextTick(() => { this.$refs.menuName.updateOpened(); this.$refs.menuName.updateActiveName();})...原创 2019-08-21 16:27:05 · 938 阅读 · 0 评论 -
根据时间戳计算宝宝年龄(年月日)
//每个月按30天计算所以误差有些大// 根据时间戳计算宝宝年龄 getBabyAge:function(time){ let birthday = time; let now = new Date().getTime(); let hours...原创 2019-04-17 14:36:00 · 2108 阅读 · 0 评论