小七:-CSDN博客

原创文件上传(WebUploader)成功之前自定义裁剪(vue-img-cutter)，上传裁剪的图片，并兼容ie

上传文件使用的是WebUploader，可分片、并发、文件体积大时支持MD5秒传地址：http://fex.baidu.com/webuploader/思路：初始化上传组件，使用vue-img-cutter的裁剪；在裁剪成功之后；为兼容ie, 将裁剪获得的base64Url格式的图片地址转成bolo文件，追加到上传队列之中；调用上传方法继续进行上传，以确保上传的是裁剪后的图片使用方法：第一步：先引用webuploader.js，建议下载下来放在本地直接使用安装依赖vue-img-cutter并

2021-07-02 11:39:41 574

原创 img 图片标签自适应盒子, 使用object-fit属性,并兼容ie11

属性：object-fitfill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。none - 不对替换的内容调整大小。scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）为了图片在盒子中等比例缩放，且不拉伸图片使其变形使用 ob

2021-07-02 11:05:57 862

原创随机生成图形验证码

引入此js内容!(function(window, document) {var size = 4; //设置验证码长度function GVerify(options) {//创建一个图形验证码对象，接收options对象为参数this.options = {//默认options参数值id: ‘’, //容器IdcanvasId: ‘verifyCanvas’, //canvas的IDwidth: ‘100’, //默认canvas宽度height: ‘30’, //默认canvas

2020-08-07 09:58:57 296

原创 3种方法下载文件

第一种：路径拼接参数新开窗口下载//common/js/methods// get请求拼路径export function urlEncode(param, key, encode) {if (param == null) return ‘’;var paramStr = ‘’;var t = typeof param;if (t == ‘string’ || t == ‘number’ || t == ‘boolean’) {paramStr +=‘&’ +key +‘=’

2020-08-07 09:51:41 366

原创前端自选打印

安装 npm install vue-print-nb --save在main.js文件中注册import Print from ‘vue-print-nb’Vue.use(Print)<vi-button type=“primary” v-print="’#printPreview’" @click=“clickPrint”>打印//打印下面div的内容 ...

2020-07-03 17:36:04 148

原创 Vue根据接口返回权限和动态路由，来配置路由组件

首先再router/index.js中import Vue from 'vue'import Router from 'vue-router'import { getLogin } from '@/api/login' //登录接口const Main = () => import('@/pages/index')const Login = () => import('@/pages/login/login')const Home = () => import('@/page

2020-07-03 17:34:08 2040

原创 3.0代理

在vue.config.js中//接口封装//vue.config.js配置代理请求proxy: { '/wy': { // https://manager.highyundong.com/sport //代理的地址 target: 'http://10.4.149.24:8003/wy', ws: true, ...

2020-01-18 14:48:50 144 2

原创简单数据处理

数据去重 _.uniq([2,1,2]) =>[2,1]删除数组的指定项 .pull([1,2,3],2) =>[1,3]数组过滤.uniqBy(this.nodes, x => x.belong)数组每一项添加checked:true; array.map(x=>({…x,checked:true}))对象合并 {…obj1,…obj2}实例：_.uniqB...

2020-01-17 10:42:38 302

原创 input 上传文件判断重名限制文件个数

input 手写多文件上传`1.手写文件上传 accept=‘’只允许上传xmlge multiple 多文件上传<input type=“file” style=“display:none;” id=“file” multiple @change=“changeFile($event)” accept=“application/vnd.openxmlformats-officed...

2020-01-17 10:37:33 1120

原创搜索时使用全局事件替代input失去焦点的情况

引用外部js文件 clickoutside.js引入js文件将js文件引用起来export default { directives: { clickoutside },3.将全局事件使用在组件中<div class="znsearch" v-clickoutside="blurinput"></div>4.在方法中定义事件metho...

2019-10-27 12:53:27 246

原创 vue动态数据鼠标经过离开变化或者动态生成的list点击展开当前项

示例一：vue动态数据鼠标经过离开变化或者动态生成的list点击展开当前项<style lang="less">.line-list { position: relative; margin-bottom: 10px; border: 1px solid #e3e4e5; box-shadow: 0px 0px 1px 1px #d9d9d99c; .ti...

2019-10-11 19:25:11 375

原创动态数据锚点定位

锚点定位左侧点击右侧锚点定位样式一 <div class="left"> <a href="#book_time" @click="changeTabs(1)"></a> <a href="#search" @click="changeTabs(1)"></a> <...

2019-10-11 18:49:14 743

xyqseven的博客