- 博客(43)
- 收藏
- 关注
RSS订阅原创 vxe-table多选表格设置父子树形结构不关联并实现全选
重写全选框，全选框的状态也需要自动实现，重写全选框后@checkbox-all无法使用，使用@checkbox-change实现全选框的显示状态。setAllCheckboxRow无法使用，只能使用setCheckboxRow方法，全选涉及到子行无法选中，又进行了遍历实现子行选中。设置checkStrictly为true的时候全选功能是没法使用的，需要我们手动写一个表头的复选框。treeCheckBox默认设置为false，表示复选框未被选中状态。treeCheckBox默认设置为true，表示全部选中。
2023-12-20 16:04:46
795
原创 关于el-form中的el-input回车自动刷新页面
上传代码回车执行handleSearch方法的时候会自动刷新页面。表单元素，回车事件就不会自动刷新，可以给其中一个。input设置display:none。1.如果el-form-item里面。2.给el-form的设置。
2023-09-07 15:55:29
647
原创 宏任务和微任务
js把异步任务又做了进一步划分，异步任务又分为两类：1.宏任务异步ajax请求文件操作其他宏任务2.微任务Promise.then或.catch或.finally其他微任务。
2022-11-29 17:06:34
142
原创 EventLoop
首先会按照次序执行js主线程栈中同步任务，将异步任务委托给宿主环境执行，完成的异步任务会将对应的回调函数放到任务队列中，当js主线程栈中的任务执行完成会读取任务队列中的任务继续执行。js主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行，这个过程是不断循环，所有整个过程被称为事件循环（EventLoop）给宿主环境（js的执行环境，如果在执行就是node环境、如果在浏览器执行就是浏览器环境）进行执行。异步任务：委托给js的宿主环境执行，异步任务的回调函数由js主线程执行。
2022-11-29 15:58:46
471
原创 vue 使用oss sts方式进行上传下载操作
1.api.ocrUi：调用后端接口返回oss相关信息（AccessKeyId、AccessKeySecret、SecurityToken、BucketName、Expiration）。2.Expiration超时时间，通过后端返回的过期日期转换成时间戳与当前时间戳进行判断，在还有1分钟超时的时候重新调用接口更新相关oss信息。
2022-11-02 17:42:20
1116
原创 点击表格中文字，图片中相关文字进行红框标注
需求：后端返回图片中所出现的文字（文字在图片中的坐标，文字在图片中的高度和宽度）以及该图片，用户点击该文字，图片中相应的文字进行红框标注。
2022-09-29 14:38:55
970
原创 树形结构递归过滤数据
数据里面title有很多是空数据，拼接出来就会有xxx-undefined--xxx，会出现很多无效数据。为了规范数据，需要获得含有title的树形结构数据再进行处理。
2022-09-29 13:52:26
283
原创 前端嵌入阿里云quick bi
token：管理员注册quick bi时就会生成，后续不管制作了几个图表界面，请求的token都是同一个，token可以让后端通过接口返回，前端直接请求阿里云接口获取token会跨域。pageid：这是很重要的一个值， 每个图表界面的pageid是不同，前端根据pageid去渲染不同的图标界面。quick bi最重要的两个参数，“token”和“pageid”。
2022-09-28 17:35:37
730
原创 vue 循环批量下载多个文件，导致浏览器丢失文件
遇到一个需求，需要前端批量导出100多个文件，前端使用await进行请求，所有请求发送成功，执行下载方法时还是导致了文件有丢失的情况存在，后来经过百度查询发现是导出速度过快，浏览器出现阻塞问题，导致文件丢失。文件下载方法，将文本内容转化为buffer，通过a标签进行下载操作。
2022-09-22 16:26:10
1892
原创 vue 获取oss上word文件地址，实现word文件预览
1.安装ali-ossnpm install ali-oss2.创建oss对象const oss = new OSS({ region: "xxx", accessKeyId: 'xxx', accessKeySecret: 'xxx', bucket: 'xxx'});3.调用oss signatureUrl方法async function get (fileName) { // fileName为oss中文件路径 try { const resu
2021-12-29 14:30:18
2241
原创 setup参数
参数一：props* setup 可以接收props为父组件的传值的props* 如果props里的msg为必须项，可以通过 let {msg} = toRefs(props)进行解构赋值* 如果msg为非必须项可以通过 let msg = toRef(props,'msg')进行创建msg<template> <div>{{ msg }}</div></template><script>import { r..
2021-11-29 17:01:01
2480
原创 ref,toRef,toRefs的区别
* ref创建一个响应式数据，修改该数据的时候不会更改原数据，ref相当于拷贝* toRef创建响应式数据，修改会影响原数据，通过toRef创建的数据更细不会触发ui更新,toRef本质是引用，与原始数据有管理* toRef接受两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性* toRefs可以既与原数据进行关联，又可以更新ui视图* toRefs接受一个对象，用于批量设置多个数据为响应式数据，它会遍历对象身上的所有属性，然后挨个调用toRef执行...
2021-11-29 16:50:48
468
原创 setup中expose的用法
子组件：childrenFile.vue<template> <div>{{ count }}</div></template><script>import { ref } from 'vue'export default { setup (props, { expose }) { const count = ref(0) const increment = () => ++count.value
2021-11-29 16:47:37
1193
原创 readAsText 读取本地文件
<el-upload class="upload-demo" action="#" :on-change="handleChange" :file-list="fileList" :limit="3" :on-exceed="handleExceed"> .
2021-11-24 15:06:01
4664
1
原创 vue3 teleport传送门
Teleport传送门组件提供一种简洁的方式可以指定它里面内容的父元素，是一种能够将我们的模板移动到DOM种vue app其他位置的技术。to：字符串类型，必需的prop。其值必须是有效的查询选择器或者HTML的元素名（如果在浏览器的环境中使用）。teleport组件的内容将被移动到指定的目标元素中。disabled：布尔类型，可选的prop。disabled可以用于禁用teleport组件的功能，这意味着它的插槽内容将不会被移动到任何位置，而是在周围父组件中指定<teleport&
2021-11-23 15:07:24
406
原创 在vue方法中使用$(this)实现图片以中心点放大
1.需要添加鼠标移入移出时事件：当前@mouseenter="mouseenterBox($event)"事件中的this=event.target2.需要对父容器添加绝对定位，子容易添加相对定位样式3.使用animate实现图片的宽度、高度、位移的缩放<template> <div> <div class="solutionList" @mouseenter="mouseenterBox($event)" @mouseleave="mousele
2021-01-12 11:06:49
515
原创 vue中实现滚动条同步滚动
<template> <div class="flex"> <div class="diffCont" ref="leftCont" @scroll="leftScroll" @mouseover="changeFlag(false)"> 测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据.
2020-12-21 14:51:43
1763
原创 vue中使用mergely.js
1.安装mergely.js、codemirror、jquerycnpm install mergelycnpm installcodemirrorcnpm install jquery2.配置vue.config.jsconfigureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', CodeMirror.
2020-12-21 14:13:34
2886
7
原创 vue3.0笔记
Vite：1.什么是Vite： Vite 是 Vue 作者开发的一款意图取代 webpack 的工具 其实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间。2.Vite 的安装和运行: 安装：npm install -g create-vite-app 创建：create-vite-app myApp 运行：cd myApp npm install npm run d...
2020-12-15 10:59:25
136
原创 vue中使用keep-alive时使用setInterval
vue中使用keep-alive保留当前用户操作，保留组件的状态不重新渲染，路由变化后destroyed并没有销毁setInterval当组件在keep-alive中切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。将setInterval 写在activated中，清除setInterval方法写在deactivated，完美结局路由变化后setInterval不执行export default { data () {
2020-10-20 16:59:10
354
原创 vue中使用vue-pdf打包之后预览报错hash+worker.js路径不对404
在vue中实现pdf在线预览1.安装vue-pdfnpm install --save vue-pdf<template> <div class="pdf" v-show="fileType === 'pdf'"> <p class="arrow"> <!--上一页 --> <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPag
2020-06-25 12:58:44
6225
2
原创 vue中使用markdown并根据markdown标题标签生成侧导航
1.安装mavon-editor引入markdwon编辑器<el-scrollbar style="height:100%"> <mavon-editor v-model="mdContent" ref="md" :toolbars="toolbars" @change="change" @save="submit" @imgAd...
2020-03-26 18:17:09
3512
6
原创 动态引入vue组件
一个页面是由多个组件组合而成的，这个页面需要import多个组件，如果整个page.vue文件里面全是import不太美观page.vue<div class="components"> <async-load-comp v-for="(item, index) in homeInfo" :componentName="item.cont...
2020-03-26 16:55:50
612
原创 在el-table中循环表单并验证
最近有一个需求，在table中添加一组数据，table的行中增加一组input框并进行校验自己钻了一个牛角尖，没搞清楚数据类型格式，最后在同事的帮助下，写出了该表格，记录下来备用~页面布局：将input根据el-table的lable的个数进行循环，input双向绑定的值以索引值为参数 scope.row[index] 可以使值独立不重复（在这里走了好多坑~没想到怎么设置父元素的数据格...
2018-12-07 17:13:17
4090
1
原创 Element-ui 使用el-tabs发生浏览器卡顿现象
最近使用el-tabs组件发生了一件不可思议的事情，浏览器卡顿到崩溃~之前将el-tabs放在for循环里面出现过该情况，一直以为是循环数据量过大导致，于是没有采用el-tabs组件，后来在<transition>里面嵌套<el-tabs>标签也出现浏览器卡顿现象，惊觉这是一件大事！经过各种搜索与尝试找到了解决办法：<el-col :span = "24...
2018-12-07 16:43:49
11803
4
转载 vue数组中添加新字段，改变字段后值没有比变化
vue2.0 给data对象新增属性，并触发视图更新如下代码，给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新...
2018-12-07 16:30:21
4967
原创 vue中安装echarts-liquidfill包引入不成功问题
import echarts from 'echarts'import 'echarts-liquidfill'报错解决方法：echarts-liquidfill 版本最新版本与echarts最新版本不兼容安装echarts版本为4.1.0安装echarts-liquidfill版本为2.0.2// package.josn 版本 "echarts": "^4...
2018-10-18 12:15:11
9625
4
原创 vue中v-model使用计算属性，双向绑定失效
在vue中v-model绑定了一个值到val中，用到了计算属性监测val的变化，但是使用了computed之后，v-model的双向绑定失效<div class = "flex f7" style = "width: 0" v-if="isIos || isAndroid"> <input class = "f7" type = "text" v-m
2018-09-13 15:03:03
36854
3
原创 在浏览器console中调用vue内部方法
new Vue({ el: '#app', i18n, store, router, data () { return { address:'' } }, components: {App}, template: '<App/>', mounted () { window.vue = this }, me...
2018-09-12 14:01:40
18961
4
转载 固定列宽的表格
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【表格】一个固定列宽的表格示例</titl
2018-09-07 18:15:16
289
原创 git的常用命令操作
1.安装git客户端下载git截止博客发布的时间，Git最新版本是2.10.2。我们可以从官网下载，官网下载链接如下：点击打开官网下载链接如果觉得官网下载太慢，也可以从如下CSDN的链接下载：点击打开CSDN下载链接详细步骤可参考：git安装教程2.git常用操作git touch aa.txt //新建一个aa.txt文件//他会监控工作区的状态树，使用它会把...
2018-09-07 15:34:56
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人