- 博客(23)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 什么是跨域？如何解决？跨域的产生原因、解决方法以及vue解决跨域问题
跨域，一个老生常谈的问题，但在此之前并没有实际遇到过这个问题，也就没怎么放在心上，然最近本地开发的时候遇到了，和想象中不一样，以为很快解决，还是花费了一定的时间去解决，现在把自己解决的方案进行总结，也避免大家之后采坑。
2021-12-06 14:57:28
2815
原创 利用 box-reflect、 conic-gradient 实现光影按钮
前言webkit-box-reflect 是一个美妙的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。语法简介box-reflect：none | <direction> <offset> <mask-box-image>below可以是 below | above | left | right 代表下上左右，也就是有 4 个方向可以选。offset可以用长度值来定义倒影与对象之间的间隔。可以为负值；可以用百分比来定义倒影与对象
2021-11-18 15:09:37
203
原创 HTTP状态码详解-网络请求
前言当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含HTTP状态码的信息头（server header）用以响应浏览器的请求。常见状态码200 - 请求成功301 - 资源（网页等）被永久转移到其它URL404 - 请求的资源（网页等）不存在500 - 内部服务器错误HTTP状态码分类状态码类别描述理解1XXInformation（信息性状态码）信息，服务器收到请求，需要请求者继续执行
2021-11-12 10:19:37
235
原创 基于vue的图片裁剪vueCropper，不规则/固定比例裁剪，图片裁剪后上传，upload组件，裁剪组件 element UI
实现功能：在上传图片之前，按照一定比例或不规则进行剪裁，剪裁后上传到服务器,实现绝大部分的图片裁剪上传的需求，代码有注释。效果图：安装npm install vue-cropper使用import { VueCropper } from 'vue-cropper'上传图片html<el-upload action="" :class="['image-uploader']" :show-file-list="false" :acc
2021-06-26 16:17:16
1772
1
原创 Sass 使用小技巧 css样式， SassScript 夜间模式 Sass函数 random() @for循环
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。以下是开发过程中碰到的且运用Sass完成的一些效果。（供大家参考，会持续更新，关注不迷路????）
2020-09-08 17:37:54
821
原创 uni-app 取路由参数的两种方式，selectorQuery 对象实例，uni.upx2px
uni-app路由参数/***路由取参 两种方式*first：通过data*second： 通过计算属性computed:*getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。*/<script> export default { data() { const routers = getCurrentPages() const { product_id }
2020-09-08 17:27:11
4004
原创 节流和防抖函数 ---- 阻止事件持续触发的过程中那么频繁地去执行函数。
防抖函数（debounce）就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。去抖动。策略是当事件被触发时，设定一个周期延迟执行动作，若期间又被触发，则重新设定周期，直到周期结束，执行动作。 这是debounce的基本思想对防抖进行了封装/** * @desc 函数防抖 * @param func 函数 * @param wait 延迟执行毫秒数 */export function debounce(func,wait) { //触发事
2020-06-12 20:08:03
448
原创 日常开发遇到的小问题，JavaScript Array 对象，Es6，canvas等问题总结以及解决方案
日常开发遇到的小问题，总结以及解决方案常见JavaScript Array 对象Array.includes()和Array.indexOf()的异同常见JavaScript Array 对象Array.includes()和Array.indexOf()的异同Array.includes(searchElement，fromIndex)函数的用法...
2020-06-12 13:53:56
151
原创 基于UNI.app的小程序端的canvas绘图，绘制海报--图片更改为圆形，canvas对文字段落（长文本）进行处理
**基于UNI.app的小程序端的canvas， 绘制海报–图片更改为圆形，对文字段落进行处理**canvas绘制，找准x轴y轴坐标setFillStyle()设置文本字体颜色，上传下载要记得合法域名检测保存海报至相册要保证首先获取相册授权，uni.app有介绍如何拉取授权这里就不详细说明（另一篇文章也有实例参考）代码如下<template> <button class="save-result" @click="saveToAlbum">
2020-06-11 10:49:34
3389
3
原创 常用的es6语法小结
**1. Reflect.has(target, propertyKey) **Reflect.has(target, propertyKey) 返回一个布尔值用来说明是否存在指定属性。如果含有指定属性则返回true，否则会返回false。参数解析:（1）.target:判断此对象是否具有指定的属性。（2）.propertyKey:要被判断是否在对象上存在的属性名称。//特别说明:如果target不是一个对象会报错。var antzone = { webName: "蚂蚁部落", u
2020-05-26 20:19:39
183
原创 插槽slot应用实例，uni-app插槽的应用，组件封装
组件<template> <div class="mask" v-if="visible" @click="$emit('update:visible',false)"> <view class="warpper" @click.stop=""> <slot></slot> <button class="adv-btn" @click="submit(),$emit('update:visible',fa
2020-05-25 20:31:20
3556
原创 矢量图，动态不规则的图像，svg路径填充动画效果
这个效果类似svg路径填充动画效果，之前项目需要实现这个效果，写了一个小demo，供大家参考借鉴直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg矢量图</title> <style> *{ padding: 0; margin:
2020-05-13 14:54:55
670
原创 常用的正则判断、方法封装----持续更新中（车牌号正则，手机号码检验，深拷贝，生成随即字符串，获取随机数。。。。）
这里封装了一些经常用到的方法，为了以后再遇到更加方便快捷的开发。
2020-05-11 19:45:40
158
原创 input输入框，css3样式添加,伪类的应用，border-image属性的应用实例
input输入框属性值on 默认。规定启用自动完成功能。off 规定禁用自动完成功能。<input autocomplete="on|off">数组操作，css样式添加<ul class="user-name" v-if="detail.name"> <li class="alone-name" v-for="(name,index)...
2020-05-07 17:27:27
676
原创 日常笔记二(对数据进行一些简单的操作,css3下滑动画)
**1. 对请求的数据加一个属性及属性值**getQuestions().then(res => { const data = res.data; let keyId = this.questionsList[key]; data.forEach(qs => { this.$set(qs, 'leave', false);//方法一 // qs[...
2020-04-29 14:39:07
151
原创 window编码 解码；计时器；判断地址栏URL中是否包含某个参数this.$route.query； 判断机型； this.$refs['upload-input'].setAttribute，
1. 判断机型 <input ref="upload-input" name="upload-image" id="upload-image" type="file" accept="image/*" v-show="false">// window.navigator.userAgent.match(/Mi/)=='Mi' 判断是否是小米手机// this.$refs[...
2020-04-22 20:28:09
794
原创 在vue项目中引用vant组件库中的DatetimePicker组件实例
html<div class="birthday-box"> <span class="placeholder" > <van-datetime-picker ref="datetime" v-model="currentDate" typ...
2020-04-20 21:03:42
3144
原创 Hanzi Weiter的简单应用小案例,在HTML汉字的书写,演示汉字笔画顺序的 汉字笔画库 js vue案例实例
因为业务需求,上网查询之后写的一个小 demo,参考文档https://hanziwriter.org/**具体实现**在 script 标签加载 Hanzi Writer只需将以下内容放入你的网页的头部,自己的,或者从官网查看js vue应用 watch: { form (val) { this.username = this.form.name.r...
2020-04-10 20:32:56
1380
3
原创 前端用css3使用:before和:after伪类元素实现loading效果,旋转的圆动画
css3部分<style>/*旋转loading*/ b:not(:required) { border-right-color: transparent; border-radius: 1.7rem; box-sizing: border-box; display: inline-block; position: relative;...
2020-04-08 20:47:35
1348
原创 canvas画圆,canvas圆环进度条效果,vue
代码如下<template> <section class="container"> <div class="canvas-box"> <canvas id="canvas" width="200" height="200"></canvas> <div class="firstname">...
2020-04-07 20:23:30
1513
原创 日常笔记一(键值(key)重复的错误,字符串拼串的方法,uni.app 判断平台 )
出现的问题uni-app 页面使用多个v-for渲染数据,产生报键值(key)重复的错误的时候,给其键值单独识别 例如:<view v-for="(item, index) in suggestlist" :key="'2' + index"> <view class="way-content"> <text class="f...
2020-03-31 17:04:10
1368
原创 对于npm安装报错,安装失败 sass-loading问题的解决方案
npm安装失败的解决方案,出现大面积的gyp…删除您的node_modules文件夹。npm install --global windows-build-tools --save在命令提示符下运行,可能运行还会报错,不用管,进行下一步.使用以下命令安装node-sass ：（npm install node-sass@版本号 --save@4.12.或最新版本）如果遇到Node S...
2020-03-24 20:45:40
108
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人