qq_36364963的博客

原创 vue2 截屏及上传

1、使用 html2canvas 插件， yarn add html2canvas --save2、使用 html2canvas 的组件 <div class="btn" @click="screenShot">截屏保存</div> import html2canvas from 'html2canvas' methods：{ //这里的html标签是获取页面最大的dom元素；根据实际业务场景自行更改 const el = document.

原创 vue hls 视频播放及跨域解决

注：个人笔记本地开发跨域，当前我的是vuecli3vue.config.jsmodule.exports = { devServer: { proxy: { '/iphone': { target: 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8', //这里后台的地址模拟的;应该填写你们真实的后台接口 ws:

原创 element 表单行内校验

原创 js 一维数组对象，以某个属性 组成二维数组

// 需求是 以value 相同的组成数组 const arr = [ { id: '1', value: 1, }, { id: '2', value: 2, }, ...

原创 vue3 学习记录

vue3.0 为什么会快？1.diff算法优化：vue2中虚拟dom是进行全量的对比vue3中增加了静态标记（PatchFlag）在与上次虚拟节点进行对比的时候，只对比带有patch flag的节点，并且可以通关flag的信息得知当前节点要对比的具体内容。2.hoistStatic 静态提升vue2中无论元素是否参与更新，每次都会重新创建vue3中对于不参与更新的元素，只会被创建一次，之后会在每次渲染时候被不停的复用3. cacheHandlers 时间侦听器缓存默认情况下 onClick

原创 lodash 学习记录

菜鸟一枚 学习lodash 把自己觉得常用的方法记录下来 // 数组方法 // 数组对象交集 { let data = [ {nameList: [{ category: '心累'}]}, {nameList: [{ category: '心不累'}]}, {nameList: [{ category: '心累'}]} ] let data2 = data.map(item=> item.nameList)

原创 element table动态添加form内容，并且每次只选择一行

个人记录，方便查阅，<template> <section class="add-work"> <div class="title"> <label>新增项目：</label><span>{{ data.label }}</span> </div> <el-form :model="model" ref="tableForm" :

原创 element table动态增加列及动态表头

个人记录 方便查阅<template> <div> <p>{{cols}}</p> <el-table :data="tableData" style="width: 100%" :key="itemKey"> <el-table-column label="Date" prop="date"> </el-table-column> <el-table-column l

原创 element tab切换 table 高度和宽度变化

个人记录： tab切换 table 高度和宽度变化原因：1. table的父级容器不能用flex布局，不然在切换的时候 宽度一直增减2.tab 的切换是 display 的属性切换解决办法：1. 在 el-tab-pane 包含的子组件 用if来限制2. 在父组件 tab切换的时候 调用 子组件 获取数据的 方法 // tab 切换 handleClick() { // 直接调用子组件初始化方法 避免 子组件 table 高度塌陷 有个bug 每次切换后

原创 vue directive 指令做按钮权限

const Permission = { name: 'permission', store: null, inserted(el, binding) { const { value } = binding; // 获取到 v-permission的值 这里也是个数组 [1] const permissions = Permission.store && Permission.store.getters && Permission.store.g

原创 element 前端分页及删除某条数据

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[10]" :page-size="limit" layout="total, prev, pager, next, jumper" :total="total" ...

原创 git 常用命令

个人记录git init 创建本地git 仓库git status 查看当前仓库状态git pull 远程拉取代码git add . 提交所有文件到本地仓库管理git commit -m"init" 提交记录说明git push 提交到远程仓库git clone xxx 克隆远程仓库（整个远程的仓库）git clone -b XXX 克隆某个指定的分支git diff HEAD XXX.txt 查看当前文件的修改git log 查看版本提交信息git reset --har

原创 element 表单验证带上防抖及后台验证

记录日常，笔记作用<el-form ref="form" label-position="right" label-width="107px" :model="form" :rules="rules" > <el-form-item label="组织编码" prop="deptCode"> <el-input v-model="form.deptCode" clearable />

原创 Vue Baidu Map不同地址显示不同图片

<template> <au-panel full class="home"> <au-panel-title title="首页" /> <div class="maps"> <baidu-map class="baidu-map" :center="mapConfig.center" :zoom="15" scroll-wheel-zoom

原创 element tree子节点 默认勾选已知id

个人日常记录，方便查阅 <el-tree ref="tree" :data="treeData" show-checkbox accordion :props="treeProps" node-key="resourceId" :default-expanded-keys="defaultCheckedKeys" :default-checked-keys="de

原创 element tree数据封装

个人日常代码记录 ，方便以后自己查阅 <el-tree ref="tree" :data="treeData" show-checkbox :default-expanded-keys="[-2]" :default-checked-keys="resourceIdList" accordion :props="treeProps" node-key="resourceI