- 博客(15)
- 收藏
- 关注
RSS订阅原创 前端调用后端接口（返回文件流）-文件下载
后端返回的文件是一个blob格式的流文件，前端需要进行转码，得到一个url，实现下载文件的功能。使用window.location.href=url，window.open(url)也可以实现文件下载，但下载需要传请求头时，就不适用这种方法了。通过axios设置服务器响应的数据类型，可以下载后台返回的二进制流文件。exportExcel(url,params={}) { axios.get(url,{params: params, responseType: 'blob'})
2022-03-22 17:34:58
5087
原创 uniapp小程序图片直传阿里云oss（结合uni-file-picker插件）
需求：uniapp开发的微信小程序，使用uni-file-picker插件可以将图片上传至当前绑定的dcloud服务空间，而我们需要将图片直接传到公司的阿里云空间，不使用dcloud服务空间，不用走后台接口即可上传。由于一开始做图片上传选用了uni-file-picker插件，后更改需求直传阿里云，所以这里是结合uni-file-picker插件做的图片直传。1. uni-file-picker插件使用<!-- @readonly 组件是否只读 @fileMediaty
2022-03-09 16:16:08
4330
3
原创 uniapp微信小程序使用canvas绘制百分比环形图
需求：绘制展示缺货量，缺品情况的百分比圆环<canvas canvas-id="myCanvas" class="canvas"></canvas><!-- canvas绘制的图片 --><image :src="item.tempFilePath" class="item-img" mode="aspectFill"></image>绘制画布/*** @stock_out_rate 缺货百分率* @stoc..
2022-03-08 11:49:17
1697
原创 uniapp自定义tabbar
在开发微信小程序时，由于uniapp官方的tabbar不满足根据权限区分tab的要求，则自定义了tabbar，出现两个问题；问题一：自定义的tabbar在切换的时候tabbar会闪烁，尤其在用户手机性能不太好的手机型号上闪烁尤其明显；问题二：自定义的tabbar使用uni.redirectTo切换页面每次都会触发页面的onLoad，页面数据得不到缓存，消耗性能。所以将官方的tabbar和自定义的tabbar结合使用，（1）在tabbar页面使用uni.hideTabBar({})将官方的ta
2022-03-08 10:44:55
7297
8
原创 unipp小程序map组件，实现点聚合，并自定义点聚合样式
最近需要在小程序中做一个点位图，用于展示不同点位，且根据地图不同的缩放级别，实现多点位的聚合和分裂效果，使用uniapp提供的map组件，官方文档实现效果：代码如下： 使用地图组件，需要初始化经纬度 <map id="map" style="width: 100%; height: 100vh;" latitude="39.904989" longitude="116.405285" :show-location="tru
2022-01-27 14:23:07
7679
6
原创 vue3.0-封装数据懒加载函数
目的： 实现当组件进入可视区域在加载数据。使用 @vueuse/core 中 useIntersectionObserver 函数来实现监听进入可视区域的范围，但必须配合vue3.0的组合API方式来实现分析useIntersectionObserver 函数// const {stop} = useIntersectionObserver(target, fn, options)// 1、参数一target表示被监听的DOM元素// 2、参数二是回调函数，用于通知监听的动作（回调函数..
2021-09-19 17:00:32
205
原创 基于vue封装弹窗询问组件
目的：通过vue实例调用$confirm函数弹出确认框。同时支持import导入函数使用大致步骤： 实现组件基础结构和样式。 实现函数式调用组件方式和完成交互。 支持Promise的API，new Promise((resolve,reject)=>{ }) resolve的触发由【确认】按钮决定，reject的触发由【取消】按钮决定 加上打开时动画效果。 给vue挂载原型函数$confirm。 落地代码1.组件的基础结构和样式src/c
2021-09-08 10:48:09
782
原创 基于vue封装一个消息提示组件
目的：在接口请求报错的时候给用户进行提示组件功能分析： 固定顶部显示，有三种类型：成功，错误，警告。 显示消息提示时需要动画从上滑入且淡出。 组件使用的方式不够便利，封装成工具函数方式。 大致实现步骤：先把布局，和三种情况的显示，完成。定义组件：src/components/library/message.vue<template> <transition name='down'> <div class="xtx-mes
2021-09-04 18:16:44
1068
1
原创 基于vue3.0和IntersectionObserver封装懒加载指令（图片懒加载）
目标：当图片进入可是区域后才加载图片，且处理加载失败，封装成全局指令，全局插件首先要先介绍一个 webApiIntersectionObserverconst observer= new IntersectionObserver((entries, observer) => { }, {})observer.observe(imgDom)observer.unobserve(imgDom)// 被观察dom进入可视区离开可视区都会触发 回调函数// - 两个回调参数 ..
2021-08-22 17:58:02
827
原创 vue中创建全局UI组件，以插件的方式
封装UI样式组件 封装插件vue2中封装插件的方法给自定义的组件添加 install 方法创建一个js文件 如下// vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展imoprt 组件名 from '组件路径.vue'export default { install (Vue) { Vue.component('插件名', 组件名) }}在main.js中引用//导入全...
2021-08-16 17:24:57
224
原创 vue-quill-editor富文本编译器使用
1、npm 安装 vue-quill-editornpm i vue-quill-editor2、在main.js中引入import VueQuillEditor from 'vue-quill-editor'// require styles 引入样式import 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css';Vue.us
2021-08-04 14:53:45
621
原创 vue的upload组件上传图片，自定义使用腾讯云存储
<template> <!-- @action 必选参数，上传的地址 @http-request 覆盖默认的上传行为，自定义上传的实现，使用自定义时 action值为 # @show-file-list 是否显示已上传文件列表 @on-success 文件上传成功时的钩子函数 @before-upload 上传文件之前的钩子 --> <el-uploa.
2021-08-03 14:49:26
270
原创 layui分页器和弹出层的使用
laypage.render({ elem: 'page', // 注意，这里的 test1 是 ID，不用加 # 号 count: count, // 数据总数，从服务端得到, limit: data.pagesize, // limit限制 每页显示几条数据 curr: data.pagenum, // limits: [2, 3, 5, 10], // 下拉框的值，表示每页多少条..
2021-05-31 13:56:25
364
原创 jQuery图片剪裁插件Image Cropper使用
初始化剪裁区 使用插件 cropper：https://www.jq22.com/jquery-info9322 必须IP+PORT 形式打开页面； 步骤： 找到剪裁区的图片 （img#image） 设置配置项 调用cropper方法，创建剪裁区 // --------------- 创建剪裁区// - 调用cropper方法，创建剪裁区$('#image').cropper({ // 纵横比(宽高比) as
2021-05-31 13:40:51
577
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人