vue 专栏
文章平均质量分 60
vue
Q_Q 忙里偷闲
自律。
展开
-
国密SM4,javaScript / vue加密解密 java加密解密
文章目录1. SM算法简介2. 百度SM4算法 实现的心酸历程3. SM4 前端javascript代码实现加密解密4. SM4 后端java代码实现5. 测试SM4是否可用1. SM算法简介SM算法:国密即国家密码局认定的国产密码算法。主要有SM1,SM2,SM3,SM4。密钥长度和分组长度均为128位。SM1 为对称加密。其加密强度与AES相当。该算法不公开,调用该算法时,需要通过加密芯片的接口进行调用。SM2为非对称加密,基于ECC。该算法已公开。由于该算法基于ECC,故其签名速度与秘钥生成原创 2020-07-14 09:47:06 · 19564 阅读 · 17 评论 -
vue使用jsencrypt实现rsa前端加密
介绍 vue 完成 rsa 加密传输,jsencrypt实现参数的前端加密。原创 2023-09-04 15:47:12 · 1504 阅读 · 0 评论 -
mavon-editor 使用及如何将html的数据转为markdown的数据问题
vue,mavon-editor,保存到数据库里的时候是html,再拿出来,如何转成markdown,如下图和代码原创 2022-07-13 17:06:21 · 930 阅读 · 1 评论 -
Vue 使用 Markdown标记语言编辑器(MavonEditor)
文章目录1. 实现效果2. 直接撸 `MavonEditor`,上代码2.1 npm安装 MavonEditor2.2 在需要使用Markdown的Vue组件导入mavonEditor2.3 vue页面使用3. 参考1. 实现效果本篇文章的实现效果图如下2. 直接撸 MavonEditor,上代码2.1 npm安装 MavonEditornpm install mavon-editor --s2.2 在需要使用Markdown的Vue组件导入mavonEditorimport { mavo原创 2022-05-24 10:56:19 · 950 阅读 · 1 评论 -
vue 使用 jszip file-saver 对附件word pdf png 等进行zip打包下载
1. 下载依赖npm install jszipnpm install file-saver2. 在utils文件下新建downloadZip.js 封装下载zip包方法downloadZip.js 文件代码import axios from "axios"import JSZip from "jszip"import FileSaver from "file-saver"export const downloadZip = { handleBatchDownload(data) {原创 2022-04-25 17:30:01 · 1804 阅读 · 0 评论 -
vue el-select与el-tree的结合使用 支持可搜索树型
1. 树型下拉菜单 实现效果2. vue页面代码引入selectTree组件import { selectTree } from '@/components'export default { components: { selectTree }, data() { defaultData:{ managementStationId:'1478570186653609986', managementStationName:'泸弥监控中心-安全' }原创 2022-03-10 18:00:53 · 7150 阅读 · 7 评论 -
vue 保存按钮表单提交事件防抖解决办法(函数封装)
防抖:防止一段事件内多次点击,比如提交表单,出现提交多条数据情况下面是解决办法1. vue 保存按钮添加防抖<el-button @click="debounceSave()">保存</el-button>import { debounce } from '@/utils/$utils'export default { data() { return { debounceOnExport: debounce(this.onExport, 40.原创 2022-03-01 14:21:08 · 1453 阅读 · 1 评论 -
vue单页面应用刷新网页后vuex的state数据丢失的解决方案
1. 问题造成原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue实例,store里面的数据就会被重新赋值。2. 解决办法思路一种是state里的数据全部是通过请求来触发 action 或 mutation 来改变一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中很显然,第一种方案基本不可行,除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。3.原创 2020-12-23 17:57:43 · 855 阅读 · 0 评论 -
vue 微信扫码登录嵌入方式及开发踩的坑点
文章目录1. 微信扫码登录开发文档2. 微信扫码登录代码3. 使用 href 更改内嵌的样式1. 微信扫码登录开发文档首先阅读 微信扫码登录开发文档扫码登录有两种方式:①:跳转到大黑屏界面进行扫码登录,像京东,知乎这种大型网站都是采用的这种方式②:把微信登录二维码嵌入到网页中进行登录。这样可以自定义一些样式,例如二维码的大小、是否有标题等,下面是嵌入式的效果如下2. 微信扫码登录代码<template> <div> <div id="wx_logi原创 2021-10-22 17:41:48 · 6728 阅读 · 5 评论 -
vue 钉钉授权第三方WEB网站扫码登录功能
文章目录1. 阅读钉钉扫码登录开发文档2. 注册钉钉账号(已经注册了直接跳过)3 获取APPID和appSecret3.1 登录钉钉开发者后台3.2 创建应用4. vue实现扫码登录4.1 html 代码4.2 js代码4.3 操作扫码效果5. 获取钉钉的用户信息1. 阅读钉钉扫码登录开发文档首先阅读 钉钉官方的开发文档 ,扫码登录其实用的是官方文档描述的第二种方式,即将钉钉登录二维码内嵌到自己页面中,用户使用钉钉扫码登录第三方网站,网站可以拿到钉钉的用户信息。2. 注册钉钉账号(已经注册了直接跳过)原创 2021-11-02 17:39:14 · 5858 阅读 · 6 评论 -
vue echarts geo3D 实现3D中国地图显示 鼠标悬浮信息 定时切换省效果
文章目录1. 实现效果2. echarts-gl1. 实现效果2. echarts-gl原创 2021-07-23 17:34:23 · 5968 阅读 · 4 评论 -
vue-amap 高德map组件 根据关键字搜索位置,根据经纬度点搜索地理位置
文章目录1. 写在前面2. vue-amap 高德地图组件引用2.1 npm安装 `vue-amap`2.2 main.js 引入3. 使用 GaodeMap 公共组件3.1 GaodeMap 组件的功能,`可以根据搜索框搜索地理位置,也可以根据经纬度坐标搜索地理位置`3.1.1 搜索方法的代码3.2 index.vue 页面代码3.3 GaodeMap.vue 封装的组件代码1. 写在前面之前公司是用的百度的 vue-baidu-map 组件写的一个组件。因为移动端ios默认是高德的地图,Androi原创 2021-07-16 16:12:46 · 4266 阅读 · 12 评论 -
cannot find module ‘xxx‘ 解决办法
遇到这个问题可以试试这个解决方案;将node_module文件夹删掉输入命令:npm clean cache查看package.json里有没有依赖项,有的话npm install没有就npm install express --save原创 2021-07-05 11:37:58 · 4495 阅读 · 0 评论 -
vue监听鼠标滚动事件
<script> export default { name: "home", data(){ return{ currentId:1, listName: [] //滚动的列表 } }, methods:{ //函数防抖 debounce(func, wait) {原创 2021-02-05 11:46:56 · 7467 阅读 · 1 评论 -
el-tree 设置选中添加样式
<el-tree ref="tree" :data="areaTreeData" :props="defaultProps" node-key="woreHouseAreaId" @node-click="onNodeClick"> <span style="width: 100%" class="custom-tree-node" slot-scope="{ node, data }" > <span class.原创 2021-01-27 16:21:56 · 5018 阅读 · 3 评论 -
vue ul li 鼠标滚动时候分页加载数据功能
HTML和滚动事件data数据data() { return { current: 1,//当前页数 applyData: [],//数据存放 pages: 0,//一共多少页数 LOCK_STATUS: false, //当在请求数据时,滚动时锁定不能再发送分页请求 datas: []//临时存储数据 } },加载数据请求:默认第一个,一页家在10条async getApplyData(type) { thi.原创 2021-01-24 21:28:53 · 1006 阅读 · 0 评论 -
vue axios 循环调用分页查询数据
data(){ return{ monitorFrom: { pageNumber: 1, //第几页 pageSize: 10, //每页多少条 total: 0, //总页数 currentPage: 0, //当前页 }, }}// 获取视频的接口async getMonitor() { let result = await axiosRest(原创 2020-11-17 10:59:04 · 1665 阅读 · 0 评论 -
在Vue项目中,promise.all 等待所有请求完毕以后执行操作 两个异步接口按照顺序执行
原创 2020-11-09 20:48:59 · 7433 阅读 · 0 评论 -
vue vuex操作按钮权限控制
文章目录1. 一张图搞懂按钮权限逻辑1. 第一步:创建src/directives/permission.js2. 第一步:在 store/user.js 中3. 第三步:在routerConfig.js(路由拦截器里面)4. 触发步骤1. 一张图搞懂按钮权限逻辑好了,下面是具体实现步骤。1. 第一步:创建src/directives/permission.js1.1 思路:在vue全局挂载方法$_has,主要实现思路是将页面的按钮英文名传入,用以对比目前是否在权限数组里面方法定义好以后在m原创 2020-08-26 17:36:48 · 1602 阅读 · 5 评论 -
vue 实现pc端调取本地摄像头拍照生成base64数据 navigator.userAgent 功能
写在前面:在vue中为了安全,是获取不到 navigator.userAgent 对象属性的 ,这个是很重要的一个信息。在经历无数次百度,看到网上比较多的就是,开启用 https 方式去实现摄像头拍照的功能。怎么开启,下面我们会讲解。先看下实现效果...原创 2020-08-17 16:34:32 · 3235 阅读 · 3 评论 -
vue 使用vue-print-nb 实现打印功能
1. 实现效果2. 安装 vue-print-nbcnpm i vue-print-nb -S3. 在main.js 中引入import Print from 'vue-print-nb' //打印二维码Vue.use(Print)4. vue页面使用<template> <div class="print-page"> <div id="printTest"> <p>锄禾日当午</p&原创 2020-08-07 16:59:11 · 7459 阅读 · 0 评论 -
vue echarts Error in nextTick: “TypeError: Cannot read property ‘getAttribute‘ of undefined“
写在前面:导致 Error in nextTick: “TypeError: Cannot read property ‘getAttribute’ of undefined”报错原因就是因为获取不到页面的元素,导致这种报错的因素很多种,我这里至少记录下在vue子组件件中使用echart获取不到页面元素,使用vue插槽解决。1. 报错 Error in nextTick: "TypeError: Cannot read property 'getAttribute' of undefined"2..原创 2020-07-08 16:52:51 · 10192 阅读 · 0 评论 -
Vue Video.js播放m3u8视频流格式(video+videojs-contrib-hl)
文章目录1. Vue+Video.js播放效果图2. npm安装和引入3. vue 使用4. 动态设置video视频的src地址5. Uncaught (in promise) TypeError: The element or ID supplied is not valid. (videojs)6. 附上一些1. Vue+Video.js播放效果图采用 m3u8 视频流格式播放2. npm安装和引入2.1 首先,我们需要在vue工程中安装video.js相关依赖。npm install --原创 2020-07-03 18:04:29 · 38318 阅读 · 38 评论 -
vue-seamless-scroll 的click不触发问题
因为需要做一个无限滚动的table效果,然后百度了一下,看到网上挺多用 vue-seamless-scroll 的,然后自己就用了。后面一些问题给大家总结下。使用很简单,这里就不阐述了,主要讲下用这个的一些业务要求,遇到的问题。无限滚动原理:无限滚动的原理就是把之前的遍历的内容复制一份,滚动这两部分内容,达到无缝滚动效果。需求:首先需要一个这样的需求,才能碰到这个问题(通过点击列展示详情数据)遇到的问题一:当第一个ul中的数据滚动完时,第二个ul 部分的click事件不起作用,无法实现一些点击原创 2020-07-01 11:17:10 · 4620 阅读 · 1 评论 -
vue页面中添加水印
1. 效果图2. watermark.js首先在src目录下lib新建 watermark.js'use strict'let watermark = {}let setWatermark = (str) => { let id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElem原创 2020-06-30 09:49:45 · 2025 阅读 · 6 评论 -
vue element Cascader 级联选择器 选择任意一级选项 点击收起,点击label选中等问题详解
1. 温馨提示:Cascader 级联选择器 选择任意一级 请切换到 2.12.0 最新版2. 直接步入主题,先看下需求要实现的功能就是一个级联联动效果,但是他是每一级都能够选择,可以看到既可以选商品组,还能选择商品组下面的团队长,也就是他的子级。找到饿了吗的级联选择器,快捷访问地址:然后找到选择任意一级选项点击跳转:Cascader 级联选择器3. Cascader 级联选择...原创 2020-03-06 18:13:46 · 75526 阅读 · 67 评论 -
【百度地图三 - vue-baidu-map】bm-polyline 组件实现百度地图画线功能
1. 效果图2. 画线2.1 html<baidu-map class="bm-view" :scroll-wheel-zoom="true" :center="map.center" :zoom="map.zoom"> <bm-polyline :path="lineList" stroke-color="red" :stroke-opacity="0.5"...原创 2020-03-04 11:57:52 · 7637 阅读 · 5 评论 -
【百度地图二 - vue-baidu-map】bm-marker和bm-info-window实现打点和点详情弹窗功能
1. 问题如图:经纬度值已经改变,但是每次点击当前的坐标弹窗永远是在最后一个位置。在bm-marker中使用v-for循环,但是bm-info-window只会创建一个,点击其他的窗体位置还是在最后一个2. 解决方法:给bm-marker最外层套一个div,v-for循环绑定在div上,然后关键在于,被循环数组的每一个元素中应当有一个单独的flag,用来控制每个marker窗体的显示与与隐...原创 2020-03-03 11:14:02 · 12259 阅读 · 14 评论 -
【百度地图一 - vue-baidu-map】vue结合vue-baidu-map实现百度地图
1. 效果2. 使用2.1 npm 安装npm install vue-baidu-map --save2.2 ak申请 是在百度地图开发者平台申请的密钥 详见 百度地图开发者平台ak申请2.2 main.js 引入import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { // ak 是在百度地图开发者平台申请的密钥 详见...原创 2020-03-02 12:11:40 · 2752 阅读 · 0 评论 -
vue结合 Fabric.js 实现鼠标拖动画布、滚轮缩放画布的功能
1. 效果展示vue 结合 fabric.js 用canvas画布画底图实现鼠标拖动画布底图实现鼠标滚动对画布底图进行放大缩小2. 引入 fabric.js2.1 npm 安装npm install fabric --save2.2 main.js 导入import { fabric } from 'fabric'Vue.use(fabric);3.3 vue 页面实...原创 2020-02-21 11:55:31 · 14238 阅读 · 12 评论 -
vue大屏项目2.0版本 (highcharts)
第一版的大屏项目拿去给客户看,客户说设计的页面太垃圾了,然后回来就让设计重新在设计了一个版本,确实这个版本比第一个版本好看很多。前端就是地位低,才不管你做不做得出来,反正效果是这样,做不出来也得做。于是就有了下面的几个 2.0 版本页面具体细节后面回补充1.0 版本查看点击:vue大屏项目1.0版本 (echarts)vue开发大屏项目 - highcharts1.0 版本查看点击...原创 2020-01-19 15:42:18 · 4120 阅读 · 8 评论 -
vue 中使用 highcharts demo案例
1. 案例效果demo2. npm 安装 highchartsnpm install highcharts --save3. main.js引入import highcharts from 'highcharts/highstock';import highcharts3d from 'highcharts/highcharts-3d'import highchartsMore f...原创 2020-01-09 09:21:13 · 1393 阅读 · 1 评论 -
vue大屏项目1.0版本 (echarts)
效果图原创 2019-12-30 15:53:52 · 6599 阅读 · 0 评论 -
vue 实现点击按钮弹出div 点击页面其他位置,隐藏div
1. 效果图2. 实现步骤给最外层的div加个点击事件 @click="screenRule=false"给点击的元素上面加上:@click.stop="screenRule=!screenRule" 或者 @click.stop="screenRule=true"3. 步骤截图初始化一个值,控制 div 显示和隐藏设置页面最外层(当用户点击页面内所有地方都会触发,把 div...原创 2019-08-03 16:54:27 · 12048 阅读 · 1 评论 -
mt-tabbar组件封装 实现移动端底部tabbar切换路由跳转,默认首页显示高亮效果,选中状态切换
tabbar 组件<template> <div id="tabbar"> <div class="page-tabbar"> <mt-tabbar v-model="message" fixed > <mt-tab-item id="index">...原创 2019-06-14 15:00:06 · 6656 阅读 · 1 评论 -
vue.runtime.esm.js:1737 TypeError: _self.$scopedSlots.default is not a function
报错 _self.$scopedSlots.default is not a function ,原因:element组件在一个vue组件中重复使用解决方案:此时的解决办法是设置 key如下:一个vue组件中使用了多个 el-table 导致报错,给每个添加不一样的 key 值即可。确保每一个el-table具有唯一性<el-checkbox v-model="isStorNo" c...原创 2019-06-13 18:46:50 · 3872 阅读 · 0 评论 -
vue 封装组件el-select,el-select组件值是对象的解决方案
1.效果(工作中遇到一个问题,记录一下)1.1 核心代码在用select组件的时候,官方给出的例子是option 里面的value绑定一个值(不能是对象,绑定的对象的话就会出问题)。但是在开发过程中,确实遇到了需要绑定对象的时候,看官方文档根本没发现怎么解决,后来通过百度,谷歌才知道,原来在select上面加上value-key = id ,然后在option里面的 :key="item....原创 2019-05-19 18:41:27 · 8680 阅读 · 0 评论 -
vue.js中使用Export2Excel导出Excel表格
有一个项目需求,要求在前端项目中导出Excel表格,经过查找代码,Vue.js确实可以实现,具体实现步骤为:安装依赖npm install -S file-saver xlsxnpm install -D script-loader导入两个JS下载Blob.js和Export2Excel.js,在src目录下新建Excel文件夹,里面放入Blob.js和Export2Excel....原创 2019-04-19 16:45:36 · 23193 阅读 · 22 评论 -
使用vue-router的meta实现 设置每个页面的title标题
1.实现效果(左上角title变化)2.核心代码:这里主要是 meta 属性下面设置一个自定义的键值 title在前置导航守卫里面如下:router.beforeEach((to,from,next)=>{ // 根据路由元信息设置文档标题 window.document.title = to.meta.title || admin next()})3.完整的...原创 2019-05-03 23:26:54 · 10833 阅读 · 1 评论 -
vue解决h5 video视频 ios和安卓兼容问题
解决问题:不全屏播放 播放一次就不能播放,IOS一开始是白屏,返回后不能播放核心是判断手机为安卓还是ios,然后分开写下面是几个核心的关键代码:controls 解决播放一次就不能播放webkit-playsinline="" playsinline=“true” 解决一播放就是全屏preload=“none” 解决浪费资源问题 一打开网页就加载mp4 造成不必要的损失...原创 2019-04-15 00:14:14 · 9827 阅读 · 0 评论