![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
前端开心果
哈喽,我是一个前端程序媛,专注于前端技术的学习、分享与交流,包括web前端基础知识、进阶技术、学习资料、工具技巧、视频教程、面试题等信息。让我们在前端的学习道路上一起进步吧!
展开
-
vue实现不预览PDF的情况下打印pdf文件
前景:默认情况,实现打印需要根据预览的内容进行打印。但是当只有打印按钮存在,不预览文件内容的情况下,实现打印的话,可以通过后端接口返回服务器上PDF的地址,前端通过隐藏的iframe标签中src可实现预览功能。原创 2024-06-19 15:17:04 · 414 阅读 · 0 评论 -
vue上传文件拿到File,下载文件到本地
【代码】vue上传文件拿到File,下载文件到本地。原创 2024-06-19 12:36:43 · 311 阅读 · 0 评论 -
表格单列相同字段值合并
用specName(el.specName === row.specName)和id的区别(el.id === row.id),使用id的时候id是唯一值,判断的时候不会出现重复情况,使用specName的时候,如果有重复的值,会出现合并错位的情况。解决方案:先按照specType进行排序,然后按specType的值进行分组,合并的规则是每一个分组的第一列进行合并{原创 2024-04-15 09:10:41 · 241 阅读 · 0 评论 -
highcharts的甘特图设置滚动时表头固定,让其他内容跟随滚动
效果图:最左侧的分类列是跟随甘特图滚动的,因为这一列如果需要自定义,比如表格的话可能会存在行合并的情况,这个时候甘特图是没有办法做的,然后甘特图的表头又需要做滚动时固定,所以设置了甘特图滚动时,让指定元素跟随滚动。原创 2023-12-26 16:40:09 · 1252 阅读 · 0 评论 -
vue中预览pdf的方法
vue中预览pdf原创 2023-12-13 10:03:23 · 1276 阅读 · 0 评论 -
vue中对pdf文件和路径的处理
地址栏输入url可以直接预览的pdf,这种我们可以直接使用vue-pdf进行预览。原创 2023-12-07 14:38:06 · 1132 阅读 · 1 评论 -
iview的input输入框修改输入值后输入框中的值不更新的问题
iview的input输入框修改输入值后输入框中的值不更新的问题。原创 2023-10-20 13:44:31 · 602 阅读 · 0 评论 -
vue中打印指定dom元素
和`window.print()`效果一样,调出打印窗口,只是当前使用的插件是`vue-print-nb`原创 2023-09-11 16:48:07 · 878 阅读 · 0 评论 -
vue中使用tailwindcss
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类(class)名,然后生成相应的样式代码并写入 到一个静态 CSS 文件中。原创 2023-08-31 11:30:37 · 936 阅读 · 0 评论 -
每隔5分钟调用一次接口
【代码】每隔5分钟调用一次接口。原创 2023-08-15 15:39:37 · 537 阅读 · 0 评论 -
解决iview的poptip组件内使用datePicker组件,在选择时间后会关闭poptip组件
`poptip`组件内使用了`datePicker`组件,在`datePicker`组件选择时间后关闭时间弹框的同时也会关闭`poptip`的弹窗。原创 2023-08-03 16:39:56 · 416 阅读 · 0 评论 -
vue中使用原生的table合并行
vue中使用原生的table合并行原创 2023-07-22 21:33:18 · 871 阅读 · 0 评论 -
iview的表格添加筛选功能需要注意的问题
tabletable。原创 2023-07-19 14:59:27 · 744 阅读 · 0 评论 -
iview的表格行内编辑,input和select组件使用方向键切换输入
核心是在输入框和下拉框上添加按键监听事件,监听按键对应方向应该要完成的操作,比如当前在。列的第一行,按向左键的话,需要鼠标光标在第一行的。表格中输入框和下拉框实现方向键切换选择,效果图。原创 2023-07-10 13:02:58 · 766 阅读 · 0 评论 -
使用iview旧版本的modal设置draggable如何控制拖拽不拖出屏幕边缘
iview的4.6.0版本之前使用modal的dragable属性是不能控制是否能拖出屏幕边缘的,如果想要在拖拽过程中设置不能拖出屏幕边缘,效果如下图所示:控制台查看元素,可以发现,iview的Moda在l拖拽时的class是,且是通过改变这个className元素的left和top属性。那么我们可以使用用来监听元素的属性变化、用来获取指定元素的top和left值,用来获取指定元素距离浏览器窗口的位置。原创 2023-05-31 16:46:28 · 658 阅读 · 0 评论 -
vue中动态使用本地图片
执行后使用动态组件,动态组件中使用了本地图片,那么可以在项目中增加一个图片组件,动态使用本地图片。图片应用场景:如果我们的页面代码是从后端接口返回的,然后使用。中使用图片地址,不能直接使用变量,需要带字符串拼接。,然后图片的地址是动态变化的,在。中动态使用本地图片,使用。原创 2023-05-12 12:31:33 · 1322 阅读 · 0 评论 -
highcharts中gantt甘特图的使用
highcharts甘特图的使用原创 2023-01-09 13:38:38 · 2610 阅读 · 5 评论 -
vue中内嵌iframe的src更新页面未刷新问题
vue中内嵌iframe的src更新页面未刷新问题原创 2022-11-25 17:07:03 · 4119 阅读 · 0 评论 -
js数组对象中根据某个相同的字段找到其他对象中有值的数据
js数组对象中根据某个相同的字段找到其他对象中有值的数据原创 2022-11-03 14:03:04 · 1057 阅读 · 0 评论 -
使用vue自定义实现Tree组件和拖拽功能
使用vue自定义实现Tree组件,拖拽功能,右键菜单原创 2022-09-30 15:20:19 · 2850 阅读 · 1 评论 -
vue中将tree组件水平放置
自定义水平位置tree组件原创 2022-09-30 14:39:24 · 515 阅读 · 0 评论 -
iview的表格实现单元格行编辑功能
iview的表格单元格行编辑功能:分页批量编辑并保存,输入框支持上下键换行编辑。原创 2022-09-19 12:45:21 · 1661 阅读 · 0 评论 -
js比较时间日期大小和获取月份最后一天日期
js比较时间日期大小原创 2022-09-06 20:16:32 · 720 阅读 · 0 评论 -
iview的table动态合并行列的完整示例
iview的table合并行/列原创 2022-06-02 16:39:23 · 2800 阅读 · 4 评论 -
vue子组件接收父组件方法并获取返回值
子组件接收父组件方法并获取方法返回值原创 2022-06-02 15:41:38 · 4151 阅读 · 0 评论 -
mocano editor中使用代码比对功能
mocano editor中使用代码比对功能环境:vue2.x + typescript使用前提请先看:vue2.x中monaco-editor的基础使用效果图:创建代码公共组件codeDiff.vue<template> <div class="editor" :id="id"></div></template><script lang="ts">import CodeDiff from "./codeDiff";ex原创 2022-04-24 11:09:46 · 2294 阅读 · 0 评论 -
vue-property-decorator的基础使用实践
@Ref的用法<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld ref="helloComp" msg="Welcome to Your Vue.js + TypeScript App" @change-data="changeData"/> </div></template>&l原创 2022-04-14 16:28:16 · 3435 阅读 · 0 评论 -
vue2.x中monaco-editor的使用
vue2.x中使用monaco-editor安装注意两个库的版本指定npm install monaco-editor@0.30.1 --save-devnpm install monaco-editor-webpack-plugin@6.0.0 --save-dev配置vue.config.js中配置const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')module.exports = { configu原创 2022-04-13 22:42:02 · 2623 阅读 · 2 评论 -
解决monaco-editor在vue中回显时没有宽高和自动格式化代码
解决monaco-editor在vue中回显时没有宽高 // 初始化编辑器 this.editor = Monaco.editor.create(code, { value: '', language: 'html', tabSize: 2, scrollBeyondLastLine: false, automaticLayout: true // 添加这行代码,表示自动布局 });...原创 2022-04-11 10:08:57 · 3617 阅读 · 0 评论 -
vuex-module-decorators装饰器的使用
vuex-module-decorators官网安装npm install vuex-module-decorators# oryarn add vuex-module-decorators字面意思理解就是 vuex的模块装饰器,一般结合TypeScript使用,使用这个库,可以以另一种方式编写模块。主要功能就是用装饰器和Typescript来写vuex。好处多了类型提示初体验// /store/modules/foods.tsimport { VuexModule, Module,原创 2022-04-10 21:08:52 · 1001 阅读 · 1 评论 -
el-tree 只展示选中值
主要是利用filter-node-method来过滤 <el-tree :data="data" show-checkbox default-expand-all node-key="code" ref="tree" highlight-current :props="defaultProps" :expand-on-click-node="false" :check-on-click-node="tru原创 2022-01-27 17:02:58 · 1618 阅读 · 0 评论 -
element中对el-input 自定义验证规则
element中对el-input 自定义验证规则首先明确要使自定义校验生效的话,必须 prop 和 rules 的 键对应,如示例:(prop="description"在 rules 中有对应的键 )<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"> <el-form-item label="描述:" prop="descrip原创 2021-11-16 13:44:36 · 9853 阅读 · 0 评论 -
vue上传文本文件后读取文本文件中的内容,并用js-yaml处理数据
vue上传文本文件后读取文本文件中的内容使用场景:当需要上传文件时,我们前端需要读取出上传的文件中的内容,然后处理成一个json列表的格式,传给后端。文本文件都可以读取(可以用.txt打开的文件),如 .excel,.yaml 文件等读取文件// 读取文本文件内容 async readFile(file) { const reader = new FileReader() const promise = new Promise((resolve, reject) => {原创 2021-11-10 18:37:52 · 3753 阅读 · 0 评论 -
vue项目中使用ttf字体
前提:在 vue 项目中使用 ttf 字体1.引入字体文件将已有的字体文件xx.ttf 放入项目的assets 目录下然后创建 fonts.css 文件,文件内容:@font-face { font-family: 'design-title'; src: url('./design-title.TTF'); font-weight: normal; font-style: normal;}在 main.js 中引入字体的 css 文件import '@/asset原创 2021-11-04 11:29:14 · 2124 阅读 · 1 评论 -
el-selete改变值后选中的内容不变
问题场景:默认下拉框选中了值,切换下拉框选中的值,值改变了,但是视图未改变解决方法:$forceUpdate()<el-select v-model="alarmForm.week" placeholder="请选择" @change="$forceUpdate()"> <el-option v-for="(item, index) in timeRange.weeks" :key="index" :label="item.label" :value="item.value">原创 2021-10-28 16:21:00 · 1148 阅读 · 0 评论 -
tab栏切换,列表参数改变触发2次请求的问题
问题场景:比如两个可切换的tab栏,两个内容框里面用的同一个请求列表的接口和同一个组件,请求列表的参数,除了公共参数之外,(tab2比tab1多两个参数)。现在遇到的问题1是:在每次切换tab的时候请求列表的接口都会调用两次,理想的情况是对应的tab栏只调用一次。解决问题1的思路是:在tab里面的列表组件上添加 v-if:activeName,因为 el-tab本身内部是使用 v-show 来显示与隐藏 el-tab-pane的,所以在每次切换tab的时候接口会调用两次。问题2:在子组件中修改父组件原创 2021-10-15 13:32:54 · 4213 阅读 · 1 评论 -
input上传图片
<div class="content-logo" @click="modifyLogo"> <el-tooltip class="item" effect="dark" content="修改logo" placement="right-start"> <el-image style="width: 100px; height: 100px;border-radius:50%;" fit="cover" :src="logo" ref="reportlogo"&g原创 2021-08-31 13:45:45 · 617 阅读 · 0 评论 -
vue中自定义v-model表单组件
使用场景:当在父组件中定义好了表单元素,想实时查看表单元素,比如涉及到组件包含上一步、下一步等步骤时,需要返回上一步查看填写的表单内容,就需要使用 v-model 来实时查看表单数据了父组件<template v-else-if="active === 2"> <role-form ref="roleInfo" v-model="roleInfo" /></template>...roleInfo: [{ name: '', time: '',原创 2021-08-26 15:30:27 · 447 阅读 · 0 评论 -
Vue给对象新增属性实现视图更新
经常遇到给对象新增属性,一般使用的方法有 Vue.$set() 和 Object.assign() ,当 Vue.$set() 方法不生效时,可以使用 Object.assign()Vue.$set()Vue.$set() 方法,既可以新增属性,又可以触发视图更新data() { return { personData: { 0: [] } }}...this.$set(this.personData, 1, [])...Object.assign()this.pe原创 2021-08-25 19:53:03 · 366 阅读 · 0 评论 -
使用Elementui元素动态增减表单组件
需求:动态增减表单组件动态表单组件模板部分<el-form :rules="dynamicRules" ref="dynamicForm" label-width="140px" class="demo-dynamic" :inline="true" v-for="(item,index) in dynamicInfo" :key="index" :model="item" > <el-form-item v-if="dynamicInfo.length > 1" c原创 2021-08-18 10:13:52 · 433 阅读 · 0 评论