![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小曲曲
这个作者很懒,什么都没留下…
展开
-
统计页面学习时长——停留时间
【代码】统计页面学习时长——停留时间。原创 2024-06-19 13:45:59 · 368 阅读 · 0 评论 -
vue播放播放M3U8格式——HLS的直播流
【代码】vue播放播放M3U8格式——HLS的直播流。原创 2024-06-19 13:42:37 · 251 阅读 · 0 评论 -
vue播放flv格式的直播流
【代码】vue播放flv格式的直播流。原创 2024-06-19 13:41:37 · 192 阅读 · 0 评论 -
解决富文本中抖音视频无法播放的问题——403
default :若当前页面使用的是 https 协议,而正要加载资源使用的是普通的 http 协议,则将 http header 中的 referer 置空;never :删除 http header 中的 referer,所有从当前页面发起的请求将不会携带 referer;referer 的 metadata 属性可以设置 content 属性值为以下。always :不改变 http header 中的 referer 的值;no-referrer:没有referer;原创 2024-06-07 15:07:39 · 562 阅读 · 0 评论 -
智能面试——录音及播放下载js-audio-recorder — post请求,formdata传参
bug:本地调试调取不起来麦克风。原创 2024-04-09 10:14:21 · 399 阅读 · 0 评论 -
多个代理proxy配置——日志查看代理后的地址
【代码】多个代理proxy配置——日志查看代理后的地址。原创 2024-04-09 10:12:13 · 367 阅读 · 0 评论 -
vue2+element-ui 实现OSS分片上传+取消上传
遇到问题:项目中需要上传500MB以上的视频。一开始使用上传组件el-upload,调用后台接口,但是出现了onprogress显示百分百后接口一直pending,过了很多秒后接口才通,如果遇到大文件的话,接口就会报超时。解决办法:使用阿里云OSS的分片上传。调用OSS时报No’Access-Control-Allow-Origin’的错误一定要设置跨域规则!!!否则会报No’Access-Control-Allow-Origin’的错误。原创 2024-04-03 17:37:46 · 445 阅读 · 0 评论 -
高德地图——轨迹回放和电子围栏
【代码】高德地图——轨迹回放和电子围栏。原创 2024-03-21 15:28:53 · 845 阅读 · 0 评论 -
文生图项目总结
采用父盒子 flex:center,内层盒子居中显示:横图可以,超高竖图顶部会有遮挡;所以判断竖图就定义宽90%,高度auto根据图片比例动态计算宽高,动态设置内层盒子的宽高;盒子里放图片和文字假如是9:16 的图片,固定一个高度,计算固定宽度;其他比例宽度为手机屏幕宽度,高度计算。原创 2024-02-28 10:48:44 · 883 阅读 · 0 评论 -
nuxt、vue实现PDF和视频文件的上传、下载、预览
【代码】nuxt、vue实现PDF和视频文件的上传、下载、预览。原创 2023-11-27 16:07:44 · 1275 阅读 · 0 评论 -
vue及react原理方面总结
旧虚拟 DOM 找到和新虚拟 DOM 相同的 key: 若内容没变,直接复用真实 DOM;若内容改变,则生成新的真实 DOM,替换页面中之前的真实DOM。旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key:根据数据创建新的真实 DOM ,渲染到页面。原创 2023-06-09 09:57:30 · 135 阅读 · 0 评论 -
微前端——qiankun配置方法
微前端是指存在于浏览器中的微服务,其借鉴了微服务的架构理念,将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话,可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块,每个微前端模块可以由不同的团队进行管理,并可以自主选择框架,并且有自己的仓库,可以独立部署上线。一般呢,微前端多应用于企业中的中后台项目中,因为企业内部的中后台项目存活时间都比较长,动辄三五年或者更多,最后演变成一个巨石应用的概率往往高于其他类型的web应用。这就带来了技术栈落后编译部署慢两个问题。原创 2023-05-30 10:00:05 · 3835 阅读 · 0 评论 -
富文本编辑器——wangEditor兼容各种框架
【代码】富文本编辑器——wangEditor。原创 2023-02-17 16:23:42 · 568 阅读 · 0 评论 -
element——CheckBox复选框
【代码】element——CheckBox复选框。原创 2023-02-03 10:33:38 · 401 阅读 · 0 评论 -
element——table控制根据接口数据控制单元格颜色和点击事件
el - table - column prop = "xuan1" label = "1月" align = "center" > < template slot - scope = "scope" > < span > {xuan1 : {原创 2023-02-02 10:38:08 · 302 阅读 · 0 评论 -
element——form表单规则验证总结
【代码】element——form表单规则验证总结。原创 2023-01-19 09:19:51 · 2203 阅读 · 0 评论 -
element —— 动态新增删除form表单必填验证
rules=“rules.rechargeAmount” 单独设置rules。” 注意属性前边不加ruleForm。原创 2023-01-13 17:20:45 · 1178 阅读 · 0 评论 -
百度地图信息弹窗——vue组件的形式——Vue.extend
【代码】百度地图信息弹窗——vue组件的形式。原创 2022-12-13 16:03:27 · 2272 阅读 · 2 评论 -
若依elementUI——上传图片组件封装
【代码】若依——上传图片组件。原创 2022-08-29 16:55:37 · 4740 阅读 · 0 评论 -
css动画实现
animate__shakeX 左右震动。animate__shakeY 上下震动。rubberBand 左右拉扯变扁后回弹。headShake 向左震动后弹回震动。jello 变成平行四边形后回弹。wobble 左摆后回弹。pulse 放大后缩小。tada 扭转后回弹。hinge 一边掉落悬挂。rollOut 滚出。bounce 弹跳。swing 跷跷板。...原创 2022-08-18 16:34:10 · 872 阅读 · 1 评论 -
elementUI——js实现填写表单弹窗
代码】elementUI——js实现填写表单弹窗。原创 2022-08-15 17:57:17 · 1309 阅读 · 2 评论 -
身份证解析年龄、性别、出生日期
/** * 传入身份证号码,获取出生日期、性别和年龄 * @param IdCard 身份证号码 */function IdCard (IdCard) { //获取出生日期 let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14) //获取性别 let sex = parseInt(IdCard.substr(16, 1)原创 2022-05-18 17:55:17 · 221 阅读 · 0 评论 -
若依——防止按钮重复点击
axios的封装文件中request.js请求拦截函数里首先判断是post 或 put 请求,因为get请求无需处理(本身很快获取下次且不影响逻辑)将本次请求的url、参数、当前时间戳组合为一个对象 requestObj获取session中存储的对象 sessionObj,如果没有就将本次请求的对象存入session;如果本地存储有对象,则取出备用,同时设置一个防重复点击的间隔时间将本地取出的对象与本地请求的对象做对比,如果url和data都相同,说明是两次一样的请求,然后判断现在的时间戳与上次原创 2022-05-11 16:48:53 · 1374 阅读 · 0 评论 -
VUE全屏插件 —— screenfull
安装npm install sreenfull --saveimport screenfull from ‘screenfull’使用 <a @click="fullscreen"> <i class="zmdi zmdi-fullscreen"></i>切换全屏 </a> fullscreen: function() { // 全屏切换 screenfull.toggle(); }...原创 2022-05-09 10:14:16 · 1454 阅读 · 0 评论 -
h5浏览器——扫码功能
bug:适用于各种浏览器,但必须是https,否则无法调起扫码页面<template> <div class="scan"> <div class="nav"> <!-- <a class="close" @click="handleLast()"></a> --> <p class="title">扫一扫</p> </div> <div.原创 2022-05-06 17:40:05 · 2846 阅读 · 2 评论 -
锁安——下载模板、导入Excel、导出
下载模板将Excel模板文件放在/public/CTEI.xlsa 链接跳转下载<a-button class="ml-20" type="primary"> <a href="/CTEI.xls" download="CTEI导入模板.xls" style="text-decoration: none">下载导入模板</a></a-button>导入Excel使用upload组件上传文件 <a-upload .原创 2022-04-28 09:48:04 · 149 阅读 · 0 评论 -
element——table
表格宽度width不设置width,剩余宽度会分配给所有列;没有剩余宽度时,所有列都会换行;min-width 会把剩余宽度按比例分配给所有设置了 min-width 的列;直到没有剩余宽度时,会产生滚动条;width是固定宽度,剩余宽度会分配给其他没有设置width的列;没有剩余宽度时,没有设置width的列会换行;对于不确定长度的列,首先需要设置min-width,再设置省略显示:show-overflow-tooltip="true"。当剩余宽度没有时,会显示 …推荐方案 列比较多原创 2022-04-13 16:00:43 · 870 阅读 · 0 评论 -
vue2+vant2搭建H5框架
新建项目npm install --global @vue/clivue create vue-h5引入vant2.0bug :若莫名其妙报错是因为vant 版本太高,降低版本即可npm i vant -S按需引入组件npm i babel-plugin-import -Dbabel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', li原创 2022-04-12 17:04:24 · 3700 阅读 · 3 评论 -
nuxt——nuxt.axios的使用
bug:localStorage不存在在SSR中,created生命周期在服务端执行,node环境中没有localStorage所以会报错,将需要使用localStorage的代码放到浏览器使用的生命周期(mounted)中。配置文件配置axios文件不在服务端渲染 { src: ‘@/plugins/axios’, ssr: false }axios封装 plugins/axios.jsimport { Message, Notification } from 'element-ui'im原创 2022-03-19 16:59:52 · 2268 阅读 · 0 评论 -
若依—— 父组件向子组件传递数组和对象
父组件向子组件传递数组,控制表格table列的显示隐藏子组件接受的父组件的值分为——引用类型和普通类型两种,普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)引用类型:数组(Array)、对象(Object)结论普通类型是可以在子组件中更改,不会影响其他兄弟子组件内同样调用的来自父组件的值引用类型的值,当在子组件中修改后,父组件的也会修改。其他同样引用了该值的子组件内部的值也会跟着被修改。...原创 2022-03-16 13:20:17 · 1351 阅读 · 0 评论 -
若依——角色权限控制
按钮权限的判断两种用法:1、全局指令如果是false就干掉这个节点,v-hasPermi="['system:role:add']"2、使用工具方法传参得到 true 和 false, v-if="checkPermi(['system:role:add'])",适用于不适合直接干掉标签的地方 <el-button type="primary" plain icon="el-icon-plus" size=原创 2022-03-16 13:18:51 · 3345 阅读 · 0 评论 -
vant+postcss-pxtorem 移动端rem单位适配方案
npm安装npm install postcss-pxtorem --save.postcssrc.js做如下修改// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { "plugins": { "postcss-import": {}, "postcss-url":...原创 2019-06-26 11:25:41 · 12062 阅读 · 3 评论 -
vue——自定义指令
Vue.directive指令(自定义指令)全局apiVue.directive指令自定义指令的生命周期全局api概述全局api并不在构造器里面,而是先声明全局变量或者直接在vue中定义一些新功能,VUE内置了一些全局api,说简单点就是在构造器外面用vue提供给我们的api函数来定义新的功能.Vue.directive 指令我们在第一季学习了内部指令,但是我们想要定义一个v-hello的指令,作用就是让文字变成绿色.在开始之前先写一个小DEMO,页面上有一个数字是10,数字的下面有一个原创 2022-03-07 14:43:24 · 219 阅读 · 0 评论 -
切换主题——控制类名的显示隐藏
使用Switch标签切换主题 <el-switch v-model="theme" /> watch: { theme() { toggleClass(document.body, 'custom-theme') } }公共方法/** * 判断某标签上如果有某个类名,就去掉;如果没有就添加 * @param {HTMLElement} element 标签 * @param {string} className 类名 */export fun原创 2022-01-28 10:04:49 · 1100 阅读 · 0 评论 -
前端性能优化 - 使用内容分发网络CDN
为什么使用CDN当引入的组件越来越多时,运用 webpack 打包后的 app.js 文件容易变得过大,对首屏加载很不友好。使用CDN的第三方资源的JS代码,将不再打包到本地服务的JS包中。减小本地JS包体积,提高加载速度。-给网页加载提速Vue项目打包的时候,默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开原创 2022-01-25 10:23:36 · 906 阅读 · 0 评论 -
report分析vue项目中各文件大小
vendor.js在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首开的体验。vue-cli 4 使用report分析vendor.jsVue Cli(@/vue/cli)自带的webpack包体积优化工具,它可以查看各个模块的size大小,方便优化。只需要在build后面加上 --report 参数即可。1、 我们把命令配置到package.json里原创 2022-01-24 15:49:03 · 1415 阅读 · 0 评论 -
角色权限控制合集
后端返回角色标识前提条件已知固定两种角色已知每种角色需要展示的菜单思路步骤登录获取角色标识根据角色在vuex中存储该权限拥有的权限数组[{ path: '/foo', name:'foo', redirect:'', meta: { icon: "weibo", title: "首页", }, children: [], component: Foo }]根据路由数组生成路由文件和菜单数组// 路由文件引入所有文件原创 2022-01-20 10:29:50 · 192 阅读 · 0 评论 -
antdesign——菜单Menu
1、根据list值生成静态菜单代码SiderMenu.vue<template> <div> <a-button type="primary" style="margin-bottom: 16px"> LOGO </a-button> <a-menu :default-selected-keys="['1']" :default-open-keys="['2']" mode="inline"原创 2022-01-20 10:28:41 · 2893 阅读 · 0 评论 -
vue根据路由递归动态生成菜单
需求根据路由数组,生成菜单数组,过滤掉隐藏的菜单源数据let arr = [ { path: "/", name: "home", meta: { icon: "weibo", title: "首页", }, redirect: "/dashboard/analysis", component: () => import("@/layouts/B原创 2022-01-19 15:35:38 · 2237 阅读 · 0 评论 -
antdesign——Tree树形控件
需求根据所有数据展示树形结构根据选中数据获取选中节点的keys集合,渲染默认选中的节点根据选中数据获取选中节点的keys集合const checkedData = [ { title: "0-0", key: "0-0", children: [ { title: "0-0-0", key: "0-0-0", children: [{ title: "0-0-0-0", key: "0-0-0-0" }],.原创 2022-01-18 18:01:18 · 4717 阅读 · 0 评论