vue
关注
分享
扫一扫
Wooofe。
这个作者很懒，什么都没留下…
展开
-
Vue自定义时间轴，点击两个点获取时间区间
Vue 自定义时间轴，动态生成纵轴时间轴的时间点，点击时间轴上两个点获取时间区间原创 2022-03-09 11:07:20 · 3079 阅读 · 0 评论 -
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 · 1770 阅读 · 0 评论 -
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 · 1098 阅读 · 0 评论 -
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 · 5330 阅读 · 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 · 2786 阅读 · 0 评论 -
在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 · 332 阅读 · 0 评论 -
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 · 1261 阅读 · 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 · 397 阅读 · 0 评论 -
vue 动态加载阿里云字体图标库
在vue中动态加载阿里云字体图标库，就不会影响项目之前的图标，直接把自己需要的图标另外添加进去1、在配置文件中定义引入图标路径地址，暴露出去，并在 main.js 中引入iconfontUrl 定义的是引入字体图标地址icongontVersion 定义的是引入地址里面的 $key，随着key的变化引入不同的图标，这个数组中的值就是图标在线链接这块2、在 main.js 中动态加载阿里云字体库loadStyle就是封装的引入地址的函数...原创 2021-10-14 11:43:47 · 685 阅读 · 0 评论 -
vue引入iconfont字体图标的四种方式
一、登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中http://www.iconfont.cn/home/index二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式）进入项目以后会看到阿里云可以选择三种方式进行导入图标1、UnicodeUnicode的主要的特点优势兼容性最好，支持ie6+ 支持按字体的方式去动态调整图标大小，颜色等等劣势不支持多色图标 在不同的设备浏览器字体的渲染会略有差别，在不同.原创 2021-10-14 11:08:32 · 19918 阅读 · 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 · 2091 阅读 · 0 评论 -
动态面包屑的实现，使用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 · 825 阅读 · 0 评论 -
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 · 2727 阅读 · 0 评论 -
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 · 434 阅读 · 0 评论