weixin_43924261-优快云博客

转载 IOS 适配安全区域

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：safe-area-inset-left：安全区域距离左边边界的距离safe-area-inset-right：安全区域距离右边边界的距离safe-area-inset-top：安全区域距离顶部边界的距离safe-area-inset-bottom ：安全距离底部边界的距离而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit

2021-12-23 10:53:44 794

原创 Canvas绘制有效区域

1、有效区域最多5个2、有效区域面积不小于画布的1/1003、不可拖拽超出画布4、绘制的是四边形<template> <div class="ai-draw-area">  <img :src="captureImg" class="img"/>  <canvas id="myCanvas" class="canvas" wi

2021-09-09 15:55:37 1076

原创自定义弹框组件

1、弹框组件代码<template> <Modal v-model="visible" :title="title" :width="336" :mask-closable="false" :styles="style" :mask="false" :footer-hide="!hasClose" @on-cancel="closeModal" > <div class="msg-area"&

2021-08-31 09:42:04 221

原创一些常用的公共方法

1、垂直方向的平滑滚动/** * 垂直方向的平滑滚动 * @param el dom元素 * @param from y轴移动的开始坐标 * @param to y轴移动的目标位置坐标 * @param duration 滚动时间 * @param endCallback 滚动结束的回调 */const scrollTop = function(el,from=0,to,duration=500,endCallback){ if(!window.requestAnimation

2021-08-31 09:40:11 137

原创拖拽那些事

1、自定义拖拽npm install vuedraggable<template> <div> <draggable :list="list" @end="onDragEnd" element="ul"> <li v-for="(item, idx) of list" :key="idx" >{{item.name}}</li> &lt

2021-08-30 17:21:25 75

原创常用的公共样式

1、基础样式更改* { margin: 0; padding: 0;}ul,li { list-style: none;}input,textarea { border: none; resize: none; outline: none;}2、文本多余部分，省略号显示// 一行.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; wor.

2021-08-30 17:15:20 153

原创 lottie动画

lottie实现GIF到JSON的转变安装依赖npm install lottie-webanimationData由UI提供的JSON数据<template> <div> <span id="lottie"></span> </div></template><script> import lottie from "lottie-web"; import { ani.

2021-08-30 17:13:32 710

原创 H5左侧滑动返回上一个页面

<template> <div class="touch-back-page"> <div class="left-side" @touchstart.stop="handleTouchStart" @touchend.stop="handleTouchEnd" v-if="leftDrag"></div> <div class="right-side" @touchstart.stop="handleTouchStart" @to.

2021-08-30 17:10:43 3004

原创 H5的那些注意点

1、日期格式 2021-04-29，IOS解析不了，应把 - 替换为 /const date = '2021-04-29';const time = new Date(date.replace(/-/g, '/')).getTime();2、IOS页面最底部会有一块空白区域，在html中引入meta，设置'viewport-fit=cover'，即可去除<meta name="viewport" content="viewport-fit=cover">3、在vue中样式使

2021-08-30 17:08:09 280

原创 Canvas自定义画笔，绘制四边形

四边形绘制之后，显示每条线的中垂线；点击四边形内部，显示顶点并可移动四边形；拖动顶点，可拉伸四边形<template> <div>  <canvas id="myCanvas" width="960" height="540"> </canvas>  <Button @click="creatDraw">重新绘制</Bu

2021-08-30 17:02:40 1098 1

原创 Canvas增加水印

export const waterMarkMixin = { methods: { /** * 图片添加水印 * @param data { url: '图片地址', depName: '门店名称', time: '当前时间', userName: '用户显示名' } */ addWaterMark(data) { return new Promise(resolve => { if (!data.time) { .

2021-08-30 16:55:41 169

原创 Canvas压缩图片

import { EXIF } from './exif.js';function upload(file) { if (!file) return; return this.imgPreview(file);}function imgPreview(file) { let Orientation; //去获取拍照时的信息，解决拍出来的照片旋转问题 EXIF.getData(file, function () { Orientation = EXIF.getTag(th.

2021-08-30 16:54:29 91

原创 Canvas实现H5签名

<template> <div class="position-fixed sign-page"> <div>签名</div> <div class="no-sign" @click="goSign"> <img :src="signature" v-if="signature" /> </div> <!--.

2021-08-30 16:48:33 242

原创 Canvas获取视频缩略图、时长

methods: { /** * 截取视频中的一帧作为缩略图 * @param url 视频地址 * @param type 1 获取缩略图 2 获取视频时长 * @param imgWidth 图片宽度 * @param imgHeight 图片高度 */ getVideoImg(url, type = 1, imgWidth = 64, imgHeight = 64) { return new Promise(fu.

2021-08-30 16:46:09 757

weixin_43924261的博客