vue
茶荼
这个作者很懒,什么都没留下…
展开
-
不点击图片,直接实现el-image的大图预览功能
不点击图片,直接实现el-image的大图预览功能原创 2023-03-09 13:43:19 · 5071 阅读 · 0 评论 -
el-upload使用手动并限制图片类型及大小
upload上传 :before-upload 不生效,手动上传进行图片限制原创 2023-02-09 10:51:18 · 1075 阅读 · 0 评论 -
vue配置不同环境部署后控制面板是否显示console
vue配置不同环境部署后控制面板是否显示console原创 2022-11-07 15:50:01 · 790 阅读 · 0 评论 -
vue 使用oss sts方式进行上传下载操作
1.api.ocrUi:调用后端接口返回oss相关信息(AccessKeyId、AccessKeySecret、SecurityToken、BucketName、Expiration)。2.Expiration超时时间,通过后端返回的过期日期转换成时间戳与当前时间戳进行判断,在还有1分钟超时的时候重新调用接口更新相关oss信息。原创 2022-11-02 17:42:20 · 1188 阅读 · 0 评论 -
点击表格中文字,图片中相关文字进行红框标注
需求:后端返回图片中所出现的文字(文字在图片中的坐标,文字在图片中的高度和宽度)以及该图片,用户点击该文字,图片中相应的文字进行红框标注。原创 2022-09-29 14:38:55 · 1018 阅读 · 0 评论 -
vue 循环批量下载多个文件,导致浏览器丢失文件
遇到一个需求,需要前端批量导出100多个文件,前端使用await进行请求,所有请求发送成功,执行下载方法时还是导致了文件有丢失的情况存在,后来经过百度查询发现是导出速度过快,浏览器出现阻塞问题,导致文件丢失。文件下载方法,将文本内容转化为buffer,通过a标签进行下载操作。原创 2022-09-22 16:26:10 · 2148 阅读 · 0 评论 -
js 递归实现树形结构父子数据拼接
递归实现多层结构的父子孙数据的拼接,将树形结构转化为[a-aa-aa]数据。原创 2022-09-21 14:34:22 · 1216 阅读 · 0 评论 -
vue实现图片鼠标滚动放大缩小、按钮旋转、拖动查看
vue实现图片鼠标滚动放大缩小、按钮旋转原创 2022-06-29 14:40:54 · 2430 阅读 · 0 评论 -
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 · 2405 阅读 · 0 评论 -
readAsText 读取本地文件
<el-upload class="upload-demo" action="#" :on-change="handleChange" :file-list="fileList" :limit="3" :on-exceed="handleExceed"> .原创 2021-11-24 15:06:01 · 4870 阅读 · 1 评论 -
在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 · 551 阅读 · 0 评论 -
vue中实现滚动条同步滚动
<template> <div class="flex"> <div class="diffCont" ref="leftCont" @scroll="leftScroll" @mouseover="changeFlag(false)"> 测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据.原创 2020-12-21 14:51:43 · 1810 阅读 · 0 评论 -
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 · 3164 阅读 · 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 · 147 阅读 · 0 评论 -
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 · 397 阅读 · 0 评论 -
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 · 6385 阅读 · 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 · 3686 阅读 · 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 · 651 阅读 · 0 评论 -
echarts中x轴与x轴网格线不对应问题
安装导入echartsnpm install echarts --save引入并设置echarts容器<template> <!--图表内容区域,必须给 ECharts 容器本身指定高度。不然它会使用默认高度--> <div class = "chart"> <div id = "echarts" style =...原创 2018-09-07 11:19:49 · 7612 阅读 · 2 评论 -
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 · 37107 阅读 · 3 评论 -
vue数组中添加新字段,改变字段后值没有比变化
vue2.0 给data对象新增属性,并触发视图更新如下代码,给 student对象新增 age 属性data () { return { student: { name: '', sex: '' } }}众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新...转载 2018-12-07 16:30:21 · 5008 阅读 · 0 评论 -
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 · 9736 阅读 · 4 评论 -
Element-ui 使用el-tabs发生浏览器卡顿现象
最近使用el-tabs组件发生了一件不可思议的事情,浏览器卡顿到崩溃~之前将el-tabs放在for循环里面出现过该情况,一直以为是循环数据量过大导致,于是没有采用el-tabs组件,后来在<transition>里面嵌套<el-tabs>标签也出现浏览器卡顿现象,惊觉这是一件大事!经过各种搜索与尝试找到了解决办法:<el-col :span = "24...原创 2018-12-07 16:43:49 · 11918 阅读 · 4 评论 -
在el-table中循环表单并验证
最近有一个需求,在table中添加一组数据,table的行中增加一组input框并进行校验自己钻了一个牛角尖,没搞清楚数据类型格式,最后在同事的帮助下,写出了该表格,记录下来备用~页面布局:将input根据el-table的lable的个数进行循环,input双向绑定的值以索引值为参数 scope.row[index] 可以使值独立不重复(在这里走了好多坑~没想到怎么设置父元素的数据格...原创 2018-12-07 17:13:17 · 4171 阅读 · 1 评论 -
在浏览器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 · 19259 阅读 · 4 评论