- 博客(31)
- 收藏
- 关注
RSS订阅原创 Vue 实现图片监听，鼠标滚轮实现图片缩放功能，可拖拽
Vue 实现图片监听，鼠标滚轮实现图片放大缩小功能其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。其实就是这种效果：HTML代码：<img id="img" :src="src" alt="" @mousedown.prevent="dropImage" @mousewheel.prevent='gunlun' :style="{transform:'scale('+multiples+')'}">@mousewheel.prev
2021-12-07 11:09:17
1696
原创 vue中$set和$delete
$set 添加或修改对象属性和属性值$delete 删除对象属性html<div id="div1"> <button @click="doUpdate">修改属性</button> <button @click="doAdd">添加属性</button> <button @click="doDelete">删除属性</button> <hr> <h2
2021-12-03 16:33:13
1046
原创 Vue 实现电子签名
我使用的是vue-cli21.下载插件：npm install vue-esign --save2.全局引入：//main.js中引入：import vueEsign from ‘vue-esign’Vue.use(vueEsign)3.示例代码：这是电子签名组件1.定义数据和清空、生成事件回调2.模板中使用组件,并属性传值3.上传到oss并返回访问路径在模板中显示请在下方书写电子签名 4.文件格式：默认canvas会生成base64格式的图片
2021-11-09 15:29:50
5164
2
原创 iView的DatePicker日期选择器，设置日期选择区间
需求：如若今天是2021-11-8，那么时间区间是 2021-10-26 ~ 2021-11-8共14天，选择的时间只能在14天中，并且开始时间离结束时间不能超过7天1、html 结构部分<div class="datePicker"> <DatePicker :editable="false" :clearable="false" type="date" format="yyyy-MM-dd" plac
2021-11-08 16:41:35
2661
原创 在for循环中自定义左右轮播切换，for循环中使用ref获取dom元素
需求：for循环列表，每个列表中都有一个左右轮播切换解决方法：点击左右切换时，使用ref获取当前点击的需要切换的元素代码如下：html使用 id 做循环列表 列表元素独一的ref :ref="'openAreaPeopleNum' + imgItem.id" <div class="monitoring" v-if="showUnfoldList && !showTimeLine"> <div class="monitoringList">
2021-10-27 15:29:28
288
原创 vue生成多个二维码，并压缩下载
需求：点击打印二维码，添加到压缩包并下载表格选中的列表对应的二维码，选中多个就下载多个二维码安装// 生成二维码插件npm install --save qrcodejs2// 画布插件npm install --save html2canvas// 压缩包插件npm install --save JSZip// 下载压缩包插件npm install --save file-saver引入插件import html2canvas from "html2canvas";
2021-10-15 10:58:37
1182
2
原创 vue实现自定义分页，获取本地文件解决中文乱码问题，手动处理多数据分页
1、封装分页组件，代码部分<template> <div class="footer" id="pagefoot"> <div class="footLeft"> <span>每页：</span> <input type="text" v-model="pageAutoSize"> <span> 条，</span> <span
2021-10-14 14:03:43
334
原创 vue 动态加载阿里云字体图标库
在vue中动态加载阿里云字体图标库，就不会影响项目之前的图标，直接把自己需要的图标另外添加进去1、在配置文件中定义引入图标路径地址，暴露出去，并在 main.js 中引入iconfontUrl 定义的是引入字体图标地址icongontVersion 定义的是引入地址里面的 $key，随着key的变化引入不同的图标，这个数组中的值就是图标在线链接这块2、在 main.js 中动态加载阿里云字体库loadStyle就是封装的引入地址的函数...
2021-10-14 11:43:47
639
原创 vue引入iconfont字体图标的四种方式
一、登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中http://www.iconfont.cn/home/index二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式）进入项目以后会看到阿里云可以选择三种方式进行导入图标1、UnicodeUnicode的主要的特点优势兼容性最好，支持ie6+ 支持按字体的方式去动态调整图标大小，颜色等等劣势不支持多色图标 在不同的设备浏览器字体的渲染会略有差别，在不同.
2021-10-14 11:08:32
17645
4
原创 vue中如何实现展开收起动画？
1、首先，新建一个js文件，把下面代码复制进去const elTransition = '0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out'const Transition = { 'before-enter' (el) { el.style.transition = elTransition if (!el.dataset) el.dataset = {}
2021-10-09 10:22:23
2010
原创 JavaScript基础第十章（ES6的箭头函数）
语法箭头函数由 函数参数 箭头 函数体 组成。let func = value => value;// 相当于let func = function (value) { return value;}多个参数必须加小括号let sum = (num1, num2) => num1 + num2;// 相当于let sum = function (num1, num2) { return num1 + num2;}多条语句必须加大括号le
2021-09-30 14:40:05
93
原创 JavaScript基础第九章（递归）
概念一种函数，自己调用自己，就是递归构成递归需具备的条件：1. 子问题须与原始问题为同样的事，且更为简单；2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。需求根据数据，生成以下页面结构数据[ { "name": "广东", "children": [ { "name": "广州", "children": [ { "name": "白云" ...
2021-09-28 11:08:51
82
原创 JavaScript基础第八章（闭包）
闭包概念在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），只要出现引用了外部变量的函数,那么这个现象就叫做闭包作用让数据变得更加的安全 优化代码 函数内返回了另外一个函数不使用闭包<body> <button>自增</button> <h1></h1><script> const btn = docum...
2021-09-27 09:45:13
110
原创 JavaScript基础第七章（防抖和节流）
防抖- debounce防止抖动：防止事件在短时间内频繁被触发，用户停止输入后，延迟超过500ms时，才去搜索此时的String，这就是防抖。*原理：将若干个函数调用合成为一次，并在给定时间过去之后仅被调用一次。也就是最后触发的那次封装调用节流- throttle我们不想用户一味的输入，而是给用户一些搜索提示，在一定的时间内只触发一次 ，所以在当中限制每过500ms就查询一次此时的String，这就是节流。原理：节流函数不管事件触发有多频繁，都会保证在规定时间内一定.
2021-09-26 13:44:31
96
原创 JavaScript基础第六章（深拷贝和浅拷贝）
数据类型基本类型： Boolean、Number、String、Null、Undefined、Symbolvar num1 = 1;var num2 = num1;// num1: 1// num2: 1num2 = 2;// num1: 1// num2: 2引用类型： Objectvar obj1 = {x: 1, y: 2};var obj2 = obj1;// obj1: {x: 1, y: 2}// obj2: {x: 1, y: 2}obj2.x = 2
2021-09-24 09:39:12
108
原创 JavaScript基础第五章（正则表达式及验证）
正则表达式及验证入门教程正则表达式30分钟入门教程在编写处理字符串的程序或网页时，经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。某个字符串匹配某个正则表达式，通常是指这个字符串里有一部分（或几部分分别）能满足表达式给出的条件特殊字符如果需要这些字符用作文本字符，需要用反斜杠\对其进行转义。分别为：( ) [] {} \ ^ $ . | * + ?模式 含义 () 标记一个子表达式..
2021-09-23 09:36:19
79
原创 JavaScript基础第四章（数组去重）
基本类型方式一：for循环function noRepeat(arr){ var newArr = []; var arrLength = arr.length; for (var i = 0; i < arrLength; i++) { // 如果当前数组项在新数组中不存在，插入新数组 if (newArr.indexOf(arr[i]) === -1) { newArr.push(arr[i]);
2021-09-22 13:46:46
146
原创 JavaScript基础第三章（循环）
1、for循环在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句for(初始化变量;条件表达式;操作表达式){ //循环体}1. 输入10句"娘子晚安哈！"//基本写法for(let i = 1; i<=10; i++ ) { console.log('娘子晚安哈'); }// 用户输入次数let num = prompt('请输入次数:');...
2021-09-18 09:54:44
465
原创 JavaScript基础第二章（JS初体验）
1、JS初体验1.1、行内式JS<input type="button" value="点我试试" onclink="javascript:alert('Hello World')" />1可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读特殊情况下使用1.2、内嵌式JS????<scrip
2021-09-17 14:56:18
515
原创 JavaScript基础第一章（初识JavaScirpt）
1、初识JavaScirptJavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程2、浏览器执行JS简介浏览器分成两部分：渲染引擎和 JS 引擎渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器
2021-09-17 10:11:15
154
原创 JavaScript基础之时间日期处理
时间对象参数// Wed Aug 08 2018 00:00:00 GMT+0800 (中国标准时间)new Date('2018,8,8');new Date('2018-8-8');// 兼容性最好new Date('2018/8/8');时间戳获取时间戳今日当前时间// 1533618727625 精确到毫秒var timestamp = (new Date()).getTime();// 1533618727625 精确到毫秒var timestamp2
2021-09-16 16:10:44
558
原创 动态面包屑的实现，使用vue+vue-router+vuex
一、路由固定数据方式一步骤一 定义面包屑数据1、在src文件夹下新建utils文件夹(存放通用辅助文件)2、在utils文件夹下新建local-data.js(存放本地数据)3、在local-data.js文件中定义一个对象存放面包屑数据，并暴露出去utils - local-data.js/*-------------------------router面包屑-start---------------------------------------*/const routerBre
2021-09-09 09:50:01
743
原创 微信小程序循环显示多个Echarts图表，动态渲染数据
需求：需要在微信小程序中循环显示多个Echarts图表，动态渲染Echarts数据。经查询，选择使用echarts插件。在echarts官网中获取ec-canvas组件，放入至微信小程序中1、wxml：在标签中把数据通过父传子的方式传过去，子组件接收<view wx:for="{{tabContent}}" wx:key="studentId"> <!-- 上线用 --> <ec-canvas id="mychart-dom-line"
2021-09-08 10:21:42
2444
1
原创 vue使用setTimeout实现实时刷新，避免定时器死循环
1、定义变量timerval: null,isLeave: false2、在页面标签中添加 ref，获取页面dom元素，或者可以添加在需要定时刷新的dom元素上 <div ref="timeouts"></div>3、定义自动刷新方法 // 刷新，获取列表 refresh() { this.getAIBoxPageList(); }, // 设置刷新内容 setFresh() { if (thi
2021-09-07 09:06:01
2625
原创 微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式，可以使用微信小程序自带插件tabbar首先在页面json文件中引入 tabbar{ "navigationBarTitleText": "个人中心", "usingComponents": { "mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar" }}在wxml文件中使用mp-tabbar，list代表的是显示的列表（文字、图标），current是
2021-09-06 09:45:09
6281
1
原创 微信小程序使用Echarts真机调试报错，Echarts占内存过大解决方法
Echarts真机调试报错解决办法：给组件添加force-use-old-canvas="true"属性就可以在真机调试里展示。重点：发布线上时，一定要将这句去掉，现在只是不支持真机调试，线上是可以使用的。<view class="echartsBox"> <ec-canvas id="mychart-id" canvas-id="mychart" ec="{{ ec }}" force-use-old-canvas="t
2021-09-03 10:24:31
2916
3
原创 微信小程序使用Echarts图表组件，动态加载数据，图表模糊处理
1：下载 GitHub 上的项目https://github.com/ecomfe/echarts-for-weixin2：项目下载之后，打开小程序开发工具，可以看到效果如下3：如果是在项目里面引入组件的话，将github上下载的ec-canvas文件夹复制到你的项目里面。4：组件已经复制到了我的项目里面，想实现一个折线图，现在可以去组件中复制代码。wxml<!--index.wxml--><view class="container">
2021-09-02 10:42:09
1615
1
原创 vue设置页面标题title
每个页面设置相同标题index.html直接修改title标签里面的标题(ps: 这个html文件中也可以引入一些js文件)每个页面设置不同标题public-index.html<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="pragma" content="
2021-09-01 11:42:51
389
原创 微信小程序发布流程
发布流程，大概分三个大步骤：上传代码 提交审核 发布版本1、上传代码在代码编写完毕后，在他顶部的导航条上找到【上传】如果你之前已经上传过了就会出现下面的提示：这点击【确定】就好了然后这里填写对应的版本号和备注，这里对于版本号我个人一般是这样处理的，用两位数来记录版本，第一位是大版本号，第二位是小版本号。大版本小版本的区别是啥？大版本一般我们定义为修改了整体的交互，或者重新重头到尾修改了UI界面。其他的一些功能添加，小bug修复都算是小版...
2021-07-22 16:32:16
1032
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人