- 博客(14)
- 收藏
- 关注
RSS订阅原创 如何快速生成图片代码
在前端开发中，大家免不了要用到各式各样的图片来美化我们的页面，无论是通过标签还是利用background样式属性来引用图片，都需要我们来手动读取图片尺寸信息，然后再编写图片样式代码，这样的劳动重复且繁琐！！！是否有简单高效的实现方案呢？。这个插件使用起来非常简单，插件安装后，只需要将使用的图片链接复制到剪切板，然后直接在vscode编辑器中【右键】-【生成代码】，就可以在光标所在位置看到根据复制的图片链接所生成的代码了。生成的代码是支持模版配置，代码生成时会自动填充图片尺寸和图片链接。
2023-06-03 22:08:50
5042
原创 H5页面异步图片延迟显示解决方案
这里写自定义目录标题问题提出原因简述解决方案一般方案进阶方案：图片预加载终极解决：利用**工程化**自动完成异步图片预加载问题提出在开发h5页面的时候会经常涉及到图片的使用，对于图片的使用优化前端解决方案颇多，比如图片的懒加载等。但是有另外一种常见情况，网上却鲜有解决方案，那就是交互类图片异步显示问题。举个例子，比如页面中有一个规则弹窗，弹窗背景使用的是图片的形式呈现，在用户网络不稳定情况下，就会发生弹窗已经出现但是弹窗背景并未加载完成，造成弹窗添加微动效无法正常展示，严重影响用户体验，如图示：原因
2022-05-21 21:05:45
1750
原创 textArea高度自适应最优解决方案
问题：需求中form表单输入框需要根据输入内容动态调整输入框高度。方案：动态获取textarea元素的scrollHeight属性值，设置到textarea元素的style.height属性中。这里需要注意的是在获取scrollHeight属性值之前应将height设置为auto，否则获取的高度会受到元素padding等属性值的影响。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF
2021-08-14 20:50:29
1257
原创 关于v-if 和 v-for 同时用在同一个元素上的解决方案
vue实践关于v-if 和 v-for 同时用在同一个元素上的解决方案关于v-if 和 v-for 同时用在同一个元素上的解决方案对于v-if和v-for需要同时用到同一个元素上时，Vue官方文档是不建议我们这样做的，同时对于可能出现的情况给出了如下解决方案：为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。为了避
2021-07-20 12:24:47
1034
原创 VScode快速生成vue3代码模板
首先在vscode编辑器中打开，【文件】–>【首选项】–>【用户片段】–>【新代码片段】–> 取名vue.json 确定把下列代码放进去{ "Print to console": { "prefix": "vue3", "body": [ "<template>", " <div></div>", "</template>", "", "&..
2021-03-29 11:22:24
9611
3
原创 为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？
为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片？能够完成整个 HTTP 请求+响应（尽管不需要响应内容）触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据跨域友好执行过程无阻塞相比 XMLHttpRequest 对象发送 GET 请求，性能上更好GIF的最低合法体积最小（最小的BMP文件需要74个字节，PNG需要67个字节，而合法的GIF，只需要43个字节）参考资料：SegmentFault 上的回答Web beaconUsing a B
2021-02-20 15:25:00
679
原创 vue模拟原生页面跳转的最优解决方案
vue单页面应用模拟原生页面跳转的最优解决方案为实现APP内嵌H5开发页面与原生页面实现同样的跳转效果，我们利用Vue 提供了 <transition> 组件在单页面应用下来模拟原生的页面跳转。因为项目需要用<keep-alive> 包裹缓存不活动的组件实例，所以原有App.vue中代码是这样的： <template> <div id="app"> <keep-alive> <rou
2021-01-05 20:24:25
891
1
原创 H5实现在线签名，解决页面滑动的问题
原理实现在线签名功能，主要是依托canvas技术。首先生成画布、初始画笔对象，然后为画布添加touch事件监听，通过事件触发绘制文字。保存时通过canvas的toDataURL方法生成base64图片文件进行下一步操作。基于vue的demo实现<template> <div class="page-content"> <header title="用户需求签名"> <button slot="right" @click="handel
2020-12-17 18:12:44
1894
3
转载 windows环境下如何安装curl以及解决中文乱码问题
1. 官方下载https://curl.haxx.se/download.html2. 根据自己的平台选择安装包3. 解压安装包假设解压安装包到 D:\path\to\curl\，如此一来，每次都需要切换到该目录才能使用 curl 命令，无法全局使用 curl 命令，那么如何全局使用，往下看。4. 全局使用curlcurl 是工作在CLI 即命令行模式下的，，有三种方法将curl 注入全局：开始 --> 运行 --> sysdm.cpl --> 高...
2020-09-22 15:11:04
778
转载 微信小程序request请求API层封装
前言在小程序(其他)开发过程中,我们会遇到很多请求,如果每次都去写一遍wx.request({ url: 'test.php', // 仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res.data) }, fail(err){ co
2020-09-17 14:26:00
469
原创 全面分析toString与valueOf，并随手解决掉几道大厂必备面试题
让人恐惧的夏天也许就过去了，没人知道你在这个夏天、这个今年发生什么，但是我知道。知道你是努力的，也有可能是缓慢的。不过面对秋天，面对即将到来的国庆小假期，还请继续努力吧，川流不息的不止生命，还有时间，加油~~今天，我是作者，也是读者，为自己交作业，也为技术学习的路上交作业~~好了，进入正题，先理解这两个方法是做什么的：基本上，所有JS数据类型都拥有这两个方法，null除外。它们俩是位于原型链上的方法，也是为了解决javascript值运算与显示的问题。valueOf和toString..
2020-09-17 14:19:30
515
原创 VUE3.0引入vant组件库
VUE3.0引入vant组件库引入通过 npm 安装通过 yarn 安装组件挂载组件使用目前Vant 3 是基于 Vue 3 开发的，在使用 Vant 3 前，请将项目中的 Vue 升级到 3.0 以上版本。引入通过 npm 安装在现有项目中使用 Vant 时，可以通过npm或yarn安装通过 npm 安装npm i vant@next -S通过 yarn 安装yarn add vant@next组件挂载//main.jsimport { createApp } from 'vue
2020-09-10 15:33:05
7220
9
原创 基于vue-cropper插件实现图片截取上传组件封装
基于vue-cropper插件实现图片截取上传组件封装需求场景：后台开发需要上传图片并进行相应比例尺寸图片的截取,本组件开发采用Ant Design Vue组件库搭配vue-cropper插件进行封装实现如下html<template> <div> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-up
2020-07-23 17:15:03
711
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人