Vue
进了吧
这个作者很懒,什么都没留下…
展开
-
vue组件 导出excel,并且可以合并单元格,设置宽度,字体颜色,换行等
需求:在开发后台管理系统中,经常会有导出表格的需求,本案例实现了在导出时,可以合并单元格,设置单元格字体颜色和宽度,插件:xlsx(0.18.4),xlsx-style(0.8.13),file-saver(2.0.5)原创 2023-07-17 16:26:33 · 1665 阅读 · 0 评论 -
vue 自定义键盘实现,根据input 定位
vue 自定义键盘组件原创 2023-03-23 16:44:47 · 1489 阅读 · 0 评论 -
vue 实现图片以鼠标为中心放大,并可以随意在div内拖动
vue 实现图片以鼠标为中心放大,并可以随意在div内拖动原创 2022-08-12 14:14:54 · 1782 阅读 · 0 评论 -
vue 移动端可拖拽式icon图标
需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随意拖动。预览:组件代码如下:<template> <div class="ys-float-btn" :style="{'width':itemWidth+'px','height':itemHeight+'px','left':left+'px','top':top+'px'}" ref="div" @click ="onBtnClick.原创 2021-11-29 14:47:03 · 1099 阅读 · 0 评论 -
vue 连接高拍仪实现pc 端拍照上传功能
需求描述:实现电脑拍照内置摄像头拍照和连接高拍仪外置摄像头拍照。实现原理:利用H5 调用浏览器的摄像头来实现视频功能,然后利用canvas 截图,把当前的屏幕截取,生成一张图片。注意事项:电脑有内置的摄像头,也有外接的高拍仪,所以需要获取到全部的,然后可以选择切换摄像头。打开弹窗时会默认获取所有的摄像头,并且默认选择第一个,然后打开摄像头。点击确定时会生成一张图片。然后拿到图片就可以调取接口了。效果如下:以下为拍照子组件代码:里面有一点点数据是业务数据,可自行去掉。<原创 2021-11-29 14:27:00 · 3157 阅读 · 3 评论 -
vue + el-table +Print.js 实现前端打印分页多页表格
发大水阿斯顿发说法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入样式 -->原创 2021-07-08 11:03:35 · 5850 阅读 · 2 评论 -
前端vue +element Upload组件 调用阿里云oss 上传图片视频
前言:之前上传图片一般都是把file 文件直接传给后台,后台处理,然后返回URL ,阿里云oss 可以直接对接 前端来传输图片,视频 文件。以下为主要代码。1) elementUpload 改写如下。注意一定要用http-request 来覆盖他默认的上传方法。<el-form-item label="头像(必填)" prop="avatarUrl"> <el-upload .原创 2021-04-15 17:01:07 · 1421 阅读 · 2 评论 -
vue 配置proxy 解决跨域
前言:现在开发大多是前后端分离,在调接口调时候,必然会出现跨域的问题,可以后台配置解决,也可以前端配置。vue 最常用的就是配置proxy 来解决。具体如下:1)首先在最外层新建vue.config.js 。在里面配置。一下,所有访问以/admin,/api 开头的接口,都会被代理,访问到下面target 的网络地址。pathRewrite 为替换的地址,意思为把 /admin 或者 /api 在请求接口是替换为什么,我的就是替换为空。module.exports = { de...原创 2021-03-29 14:34:06 · 3073 阅读 · 4 评论 -
vue中使用axios 无痛刷新token,替换旧token
需求:最近项目有个需求,后台返回token之后,过一段时间就会过期,为了让用户无感知操作,前端需要利用旧token 去请求新token,请求成功之后,用新token 接着进行接口调取。关于刷新token的问题,网上查了很多,有很多解决方案,要和后台的同学商量好,总之目的就是替换token,并且让用户无感操作。我的思路为利用axios 的拦截器,判断如果返回是401 ,那么就利用旧token去请求新token,完成之后再继续请求之前未成功的接口和 缓冲起来的接口(见下文)。问题一:t...原创 2020-12-17 17:31:22 · 3757 阅读 · 8 评论 -
移动端适配postcss-px-to-viewport ,兼容vant
之前做移动端是用rem布局来做自适应,前博客有提到。就是把px 根据根元素转化为rem。现在发现了一个新的技术方案。把px 转化为转换成viewport单位,是根据视图的宽高来计算。vw本质上还是一种百分比单位,100vw即等于100%,即window.innerWidth用法如下:一:安装npm install postcss-px-to-viewport --save-dev二:在vue的根目录下新建postcss.config.js,引入如下代码:module.export原创 2020-07-28 14:12:33 · 3228 阅读 · 10 评论 -
vue 动态ref 设置
在vue 开发中,经常会用到ref 属性,一般为写死的ref="xxx",但是有时会用到动态的ref,下面记录一下<div v-for="(item,index) in list"> <fm-generate-form :data="item" :ref="'generate'+index" > &l...原创 2020-03-04 17:50:53 · 5949 阅读 · 0 评论 -
vue 自定义属性 data-v,closest 获取事件源外层元素
在遇到使用e.target 的时候,通常会传一个参数,比较简单,在此记录一下使用:data-XXX 来绑定 <div class="custom-tree-node" slot-scope="{ node, data }" :data-id="data.id"</div>获取 :利用closeet 获...原创 2019-10-22 10:07:46 · 1856 阅读 · 0 评论 -
修改element ui tree 搜索功能,实现分级搜索,关键字高亮
element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示需求:在element UI tree 原有功能不变的情况下新加1)搜索 tree 时,如果非叶子节点里面含有关键字,那么就显示此节点下的所有节点,此节点下的所有节点不参与过滤;2)所有节点里面含有的关键字都高亮效果如下:实现:1)修改插件自带的 filterNod...原创 2019-10-09 08:46:07 · 5472 阅读 · 5 评论 -
vue 复选框 ,单选框
复选框v-model 绑定一个数组,当选中当前项时,改项的value会自动进入数组中,未选中时会自动从数组中删除<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack"原创 2018-07-12 10:48:58 · 2322 阅读 · 0 评论 -
利用云信SDK实现前端实时聊天功能
前言:由于项目中有聊天的功能,会根据不同的状态,来判断哪些角色的人可以参与聊天,或者结束聊天等等。由于历史原因,项目不能使用websocket 来实现实时通信,所以就使用了云信的SDK,来实现实时聊天功能。1. 首先引入两个sSDK文件<script type="text/javascript" src="/js/Web_SDK_Base_v2.4.0.js"></s...原创 2018-09-30 10:23:28 · 2637 阅读 · 0 评论 -
vue 获取实际dom 的高度 this.$nextTick()
前言:利用vue 写的项目,由于用了iframe 的原因,子页面的内容会随着数据的不同而不同,所以iframe 的高度需要等页面数据加载完后动态计算。经过自己各种的调试,发现在mounted 里面无法得到所需要的高度,永远偏低。解决办法:利用watch 监听listModel,为请求的数据,待数据请求完成后,this.$nextTick 为dom 渲染完后,执行那个方法(自己封装的动...原创 2018-11-07 16:46:13 · 7614 阅读 · 3 评论 -
vue-cli3 处理静态文件 下载引用
问题:利用vue-cli3 写的项目,有一个下载excel 模板的功能,模板存放在前端本地,然后下载。解决:1)把excel 模板放到本地项目的 public 下(注意,一定要放在public 下,这样webpack 在打包的时候才不会解析他,会原封不动的引用他);2)在data里面定义data () { return { publicPath: process.en...原创 2019-05-07 15:28:44 · 4300 阅读 · 2 评论 -
vue 穿梭框 组件
前言:由于项目需要,element ui 里面的穿梭框不满足需求,所以自己封装了一个穿梭框,此穿梭框为三个,可以两两穿梭。如下图:代码如下:如有bug ,欢迎指出; 其实数据的传输,最好用vuex 来做;下面用的props ,监听来做的。其中需要判断的几个点:大家参考下1):操作按钮什么情况下可以点,什么情况下致灰;利用:disabled 来判断的2):穿梭框里面的选项,什...原创 2019-06-28 10:22:38 · 7572 阅读 · 2 评论 -
使用vue addRoutes 实现权限分配,并且解决不能删除问题,刷新失效问题
前言:做了好多权限分配的项目,使用了好多种方式控制,个人感觉使用 addRoutes 来做还是比较好的,使用过程中有几个坑,在此记录一下。先在路由index.js文件里面初始化路由:最后在导出let vueRouter = new Router( { routes: [] });//在此写动态加载路由的方法,也就是下面的方法export d...原创 2019-07-18 11:26:37 · 1290 阅读 · 3 评论 -
vue for 循环element ui 多选按钮组 el-checkbox-group ,单选按钮el-radio-group,输入框el-input,绑定值重复问题
前言:最近在做项目,有个做题的需求,分别有单选题,多选题,问答题,三种题型。因为题的数量不确定,所以肯定是for 循环每一道题,完了之后发现有问题;问题:for循环之后,就会发现,这三种组件(el-checkbox-group,el-radio-group,el-input)以下简称组件。都是只绑定一个变量,来获取当前的值,所以for循环之后绑定的值是一样的,导致出现bug;例如下面的v...原创 2019-07-18 12:00:54 · 8880 阅读 · 3 评论 -
vue h5 实现拖拽
目前项目遇到拖拽的功能,记录一下,大概逻辑如下:1)左侧为分类列表,右侧为数据,根据左侧的列表分类展示右侧的数据;2)右侧的数据还可以拖动到左侧类型里面,类似于文件夹拖动时的剪切,复制实现:div为目标元素,当鼠标拖动下面的li 移上去并放开时会触发,并且鼠标样式会发生变化,注意上面的两个方法为必须li 为移动的元素,deaggable ="true",表示此...原创 2019-10-08 17:30:58 · 977 阅读 · 1 评论 -
vue 利用路由守卫判断是否登录
1.在router下的index.js 路由文件下,引入相关需要文件;import Vue from 'vue'import Router from 'vue-router'import {LOGIN} from '../common/js/islogin'import HelloWorld from '@/components/HelloWorld'import Login from '...原创 2018-07-04 16:22:53 · 6585 阅读 · 1 评论