vue
文章平均质量分 56
vue学习
陌上烟雨寒
这个作者很懒,什么都没留下…
展开
-
vue3+vite 实现动态引入某个文件夹下的组件 - glob-import的使用
vite 官网文档 – glob-import。原创 2024-07-23 15:07:17 · 1147 阅读 · 1 评论 -
vue3 学习记录
vue3 学习记录vue3和vue2项目main.js对比常用的composition APIsetupsetup 返回值3. 返回一个对象4. 返回一个函数(渲染函数)setup() { let name = "zpp"; return { name } // return () => h("h1", "zpp"); },......原创 2024-06-13 15:14:21 · 745 阅读 · 1 评论 -
Vue3学习
修改名字原创 2024-06-13 15:12:44 · 1037 阅读 · 0 评论 -
粘贴图片上传,显示剪切板中的图片
存储图片的数据结构可根据实际需求来创建。原创 2024-05-15 11:38:51 · 216 阅读 · 0 评论 -
vue中含有iframe的页面如何避免路由切换时keep-alive不起作用
vue中含有iframe的页面如何避免路由切换时keep-alive不起作用原创 2022-11-30 13:53:15 · 1741 阅读 · 0 评论 -
vue页面批量引入组件
vue页面批量引入文件原创 2022-11-30 11:22:00 · 1843 阅读 · 0 评论 -
vite 中配置@表示访问src下的文件
vite 中配置@表示访问src下的文件原创 2022-07-15 10:06:09 · 1125 阅读 · 0 评论 -
vue3 devtools 安装指南
vue3 devtools安装指南原创 2022-07-15 08:59:44 · 4933 阅读 · 3 评论 -
前端如何处理后端一次性传来的10w条数据
懒加载 实现数据量较多时的列表展示原创 2022-06-21 11:18:24 · 6261 阅读 · 13 评论 -
vue2项目搭建
软件安装说明:先安装node.js(node-v8.11.3-x64),再安装Git-2.18.0-64-bit,最后安装vscode。安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)基于node.js,利用淘宝npm镜像安装相关依赖在cmd里直接输入:npm install -g cnpm --registry=https://registry.npm.taobao.org,回车,等待安装…安装全局vu原创 2022-06-20 09:25:00 · 3102 阅读 · 0 评论 -
element ui 限制时间范围
//限制结束日期不能大于开始日期pickerOptions0: {disabledDate: (time) => {if (this.ruleForm.endDate != “”) {return (time.getTime() < Date.now() - 24 * 60 * 60 * 1000 ||time.getTime() > this.ruleForm.endDate);} else {return time.getTime() < Date.now()原创 2022-06-20 09:03:06 · 160 阅读 · 0 评论 -
vue3 Vuex数据持久化存储
import { createStore, createLogger } from 'vuex'import { user } from './modules/user'import { system } from './modules/system'import createPersistedState from 'vuex-persistedstate';import ls from '@/utils/local-storage';const debug = process.env.NODE原创 2022-06-20 08:49:29 · 1544 阅读 · 0 评论 -
vue中printjs使用指南
使用攻略参考文档https://printjs.crabbly.com/分页使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面<div style="page-break-after:always">我是封面</div><div style="page-break-after:always">我是目录,你不知道我的内容有多长</div><div>我是正文,我需要从一个新页面开始展示&l原创 2022-04-26 13:09:35 · 8490 阅读 · 0 评论 -
tinymce如何设置不可编辑但可以打印
初始配置参考https://blog.csdn.net/weixin_47180815/article/details/121748486在init配置中添加keydown和keydown事件,给编辑器的内容重新赋值来达到无法输入的效果。这里的props.otherInfo入参可以拷贝一份v-modal的值(注意需要深拷贝)在打开编辑器的时候设置leafDetail.otherInfo = leafDetail.content;有其他比较好的方法可以在评论区讨论哦...原创 2022-03-14 15:16:51 · 2444 阅读 · 0 评论 -
解决Antd Table组件表头不对齐的问题
最后一列不设置宽度。因为antd会自己给最后一列分配宽度;设置合适的宽度。推荐用百分比设置宽度。scroll属性中的x选择一个合适的值(或者直接设为 max-content)scroll={undefined{ x: 'max-content', y: tableHeight() }}4.给Table组件设置这个中英文都换行的样式style={{ wordBreak: 'break-all' }}<Table bordered loadi..转载 2022-03-01 11:27:20 · 2619 阅读 · 0 评论 -
解决a-table打印时单元格中的内容不换行的问题
解决a-table打印时单元格中的内容不换行的问题绞尽脑汁,尝试了多种方法后终于发现了怎样解决.table .ant-table-tbody > tr > td { padding: 2px !important; white-space: pre-wrap; }最重要的是white-space: pre-wrap;white-space 属性设置如何处理元素内的空白。这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wr原创 2022-02-18 10:00:45 · 1147 阅读 · 0 评论 -
vue中使用iconfont
下载到本地在assets中新建文件夹iconfont把这些文件放进去在main.ts中引入// iconfont 图标库import './assets/iconfont/iconfont.js'import './assets/iconfont/iconfont.css'demo_index.html中有使用方法可以参考例如<span class="iconfont icon-level1"></span>...原创 2022-01-14 11:11:44 · 665 阅读 · 0 评论 -
vue3.0 监听页面dom大小的方法
这里提供两种解决方案1、 使用element-resize-detector插件2、使用自定义指令element-resize-detector插件前言: 记录一个好用的包,在做自适应模块的时候,可以实时监听页面中元素的宽高变化,弥补了window.onresize只能监听到由浏览器大小变化引起的元素变化的局限性;安装方法:npm install element-resize-detector或<script src="node_modules/element-resize-dete原创 2021-12-14 09:01:47 · 4045 阅读 · 1 评论 -
vue3 中使用tinymce
详细配置,请参考tinymce中文文档1. 安装相关依赖npm install tinymce -Snpm install @tinymce/tinymce-vue -S2. 汉化编辑器前往此地址下载中文汉化包:https://www.tiny.cloud/get-tiny/language-packages/3. 引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹,将下载的汉化包解压到此文件夹然后在node_modules/tinymce中找到skins文件夹,也原创 2021-12-06 15:53:34 · 14866 阅读 · 12 评论 -
vue中表格或者内容区域高度自适应
vue中表格或者内容区域高度自适应其实这也算是一个令人头疼的问题吧,我们需要固定某个区域的高度,并且在网页resize的时候变化。例如我们在页面中放入一个table,这种固定表头的table需要我们自己给一个高度,问题1: 这个高度不是也要算出来的吗?问题2: 这个高度不是也要随着页面的大小自己去适应吗?于是乎,就借鉴了我们公司一位大牛的思路,写个组件吧,搞个插槽把表格插在中间,高度自己计算就行。组件名称我就称之为PageWrap重要: PageWrap组件使用高度使用了height:10原创 2021-11-16 13:18:05 · 5936 阅读 · 0 评论 -
ant table 点击当前行 实现单选/多选和高亮
多选<template> <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :custom-row="customRow" > <template #name="{ text }"> <a>{{ text }}</a> </template> </a-t原创 2021-09-15 09:00:43 · 1615 阅读 · 0 评论 -
vue3.0学习-自用
1. Vue3.0六大亮点特性解析Performance性能比Vue 2.x快1.2~2倍Tree shaking support按需编译,体积比Vue2.x更小, Composition API:组合API(类似React Hooks)Better TypeScript support更好的 Ts支持Custom Renderer API暴露了自定义渲染APIFragment,Teleport (Protal),Suspense更先进的组件注:原创 2021-06-23 11:03:43 · 2200 阅读 · 1 评论 -
vue 引入高德地图 路线规划
由于vue-amap不支持路线规划,因此不予采纳。在index.html的header中引入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e72a9f0cac3b081df05259299454cf1a"></script> <!--引入UI组件库(1.0版本) --><script type="text/javascript" src="ht原创 2021-04-19 16:34:47 · 5458 阅读 · 7 评论 -
vue sass全局变量
为了避免在每一个需要引入变量的组件中import全局的文件我们使用sass-resources-loadercnpm i sass-resources-loader --save-dev确认这些都已经安装了,注意安装顺序;cnpm install sass-loader@5.0.0 node-sass@4.14.1在build–>utils.js中修改将 return { css: generateLoaders(), postcss: generateLoade原创 2021-04-15 13:55:03 · 904 阅读 · 0 评论 -
sass安装问题 TypeError: this.getOptions is not a function
TypeError: this.getOptions is not a function原因:sass版本过高降低sass版本先卸载然后再安装cnpm install sass-loader@5.0.0 node-sass@4.14.1原创 2021-04-15 10:59:22 · 2443 阅读 · 0 评论 -
操作剪切板(仅限操作text)
https://clipboardjs.com/原创 2021-04-06 16:02:25 · 792 阅读 · 0 评论 -
element table右键菜单
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event重要代码 //右键点击事件 rightClick(row, column, event) { console.log(arguments); var menu = document.querySelector("#menu"); event.preventDefault(); //获取我们自定义的右键菜单 // 根据事.原创 2021-03-26 15:30:32 · 2486 阅读 · 3 评论 -
element上传图片 可预览
第一次看到element ui中的上传图片时,可能因为好看的ui惊喜了一下下但是问题出现了,这些上传大多都是自动上传,而且是一个文件一个文件上传,所以为了解决一下问题一次上传多张手动上传图片图片预览问题:limit="limit" 限制上传图片的数量list-type="picture-card" 设置上传样式:on-preview="handlePictureCardPreview" 利用该事件来获得图片信息,完成图片预览:on-change="OnChange" 在选择好文件的原创 2021-03-09 14:44:38 · 3772 阅读 · 0 评论 -
从v-key探究到vue响应式原理
从v-key探究到vue响应式原理文章目录从v-key探究到vue响应式原理总结维护状态key数组更新检测变更方法替换数组注意事项知识扩展`Object.getPrototypeOf()``Object.assign()`Object.defineProperty()vue维护状态官方文档可能有一点点的难懂,那么我们举个例子实践一下吧 ,再来看官方给出的文档 <div id="app"> <div> <input type="text" v-mod原创 2021-03-02 10:24:27 · 701 阅读 · 0 评论 -
swiper中的切换事件
swiper中的时间,请参考官方文档,这里需要注意安装的swiper的版本<HeaderTab @toParent="getNowIndex" :tabInfo="tabInfo" :index="nowIndex" ></HeaderTab> <swiper @slide-change-transition-end="handleClickSlide" class="swiper" id原创 2020-12-15 16:44:03 · 7063 阅读 · 0 评论 -
解决vue中路由改变但是页面不刷新的问题
watch: { // 监听路由变化 "$route": function (newUrl, OldUrl) { console.log("监听路由"); console.log(newUrl, OldUrl); this.init(); }, },通过watch方法监听router的改变,当路由改变时调用页面初始化的方法。官网参考:https://router.vuejs.org/zh/guide/advanced/data-fet.原创 2020-12-15 16:35:08 · 761 阅读 · 0 评论 -
GanttElastic的使用
https://blog.csdn.net/yangxiaoman123/article/details/107855727<template> <!-- <q-page class="q-pa-sm"> --> <div v-if="tasks.length > 0"> <gantt-elastic :options="options" :tasks="tasks" @tasks-change原创 2020-12-15 16:25:18 · 5040 阅读 · 18 评论 -
vue中实现element的Popper功能
<template> <div class="pop-over"> <a @click="toggleOpen" class="pop-button" href="javascript: void(0);"> {{ buttonText }}你好呀 </a> <ul v-clickoutside="close" v-show="open" class="pop-list"> <slot&g.原创 2020-12-15 16:10:28 · 2492 阅读 · 0 评论 -
vue发送剪切板中的截图
<el-input class="textarea" size="small" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="comment" maxlength="1000" show-word-limit resize="none"原创 2020-12-15 16:07:26 · 409 阅读 · 0 评论 -
vue中使用axios下载excel二进制文件 出现乱码问题的解决方法
排查问题responseType: "blob",var blob = new Blob([res.data]);在main.js中是否引入了和axios有冲突的插件,我当时因为引入了mock所以这么多次都无果,一直是乱码如果还是不ok的话可以尝试修改 let blob = new Blob([res.data], {type: "application/vnd.ms-excel"}); excelDownLoiad() { var d = new Date();原创 2020-11-26 16:30:02 · 907 阅读 · 0 评论 -
v-echart中环形图中间添加文字
这里我将一个环形图做成了一个组件需要父组件传入要显示的数据 和 环形图中间的文字有时候环形图中间的文字一直没有办法显示需要注意需要将v-echarts全部引入,部分引入时会有问题,暂时不知道如何解决,就全部引入了考虑v-echart异步加载问题,在数据加载完成之后再去渲染组件,推荐使用v-if控制子组件的显示,数据加载完成之后再进行显示。<template> <div> <ve-ring :data="chartData" :原创 2020-11-20 14:16:23 · 9314 阅读 · 7 评论 -
vue-cli2、vue-cli3脚手架详细讲解
vue2.0项目介绍1、build 文件夹:webpack的一些相关配置;2、config 文件夹:项目开发环境和生产环境的一些相关配置;3、node_modules 文件夹 :这里存放的是安装包,比如webpack、第三方插件库、项目的依赖文件;4、src 文件夹:我们将要写的代码放在这里面,打包上线时会进行编译、压缩等操作。5、static 文件夹:这里存放的是一些静态文件比如图片、css文件、不需要进行压缩的js文件,打包时这个文件夹将原封不动的放到dist(打包时自动生产的文件夹)转载 2020-11-20 14:05:01 · 169 阅读 · 0 评论 -
element el-date-picker时间控制
参考链接https://blog.csdn.net/dave_hz/article/details/89183829 <el-date-picker type="date" placeholder="开始日期" v-model="ruleForm.start_time" :picker-options="pickerOptions0"原创 2020-11-20 13:57:26 · 740 阅读 · 0 评论 -
vue中vuedraggable 拖拽列表的使用 vuedraggable踩坑之路
经历了一些奇奇怪怪的问题我终于从vuedraggable的各种坑中爬出来了!!接下来我来总结一下它的使用【想看官网的这里来】vue中draggable拖拽列表的使用https://github.com/SortableJS/Vue.Draggable官方示例:https://sortablejs.github.io/Vue.Draggable/#/transition-example-2https://david-desmaisons.github.io/draggable-example/原创 2020-11-20 13:41:29 · 14361 阅读 · 6 评论 -
vue中监听窗口大小,添加自适应样式
在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多个函数,迅速消耗CPU,浏览器会出现卡顿的情况所以在监听resize事件,需要在 mounted() 添加监听时间,然后在 destroyed() 钩子函数中将其移除mounted() { this.handleResize(); window.addEventListener("resize", t原创 2020-11-20 09:39:10 · 1124 阅读 · 3 评论