勤奋的代码搬运工-CSDN博客

1、首先进行下载模块我这里通过yarn add echarts，当然也可以使用npm i echarts2、然后在main里进行引入全局的3、组件内进行使用earchs创建实例注意：这里在虽然给绑定的数据进行创建变量便于切换，但是实例已经创建，所以需要进行销毁，否则会报下面这个错误4、接下来就是代码htmljavascriptcss...

2022-06-21 10:59:08 1334

原创前端以字节流形式下载pdf文件

前端以字节流形式下载pdf文件html内容写入点击事件，传入路径后端返回字节流格式<template> <el-button type="text" @click="saveEditIn(url)" >下载 </el-button ></template><script>// 点击下载操作 const saveEditIn = (e) => { api .downlo

2022-03-23 14:40:11 2112

Vue3通过公共状态VueX实现组件通信Vue3通过公共状态VueX实现组件通信Vue3通过公共状态VueX实现组件通信作用：对于组件之间的通信，除了父子间通过props，或者通过provide和inject，亦或者通过bus方式，我觉得公共状态的使用更加方便谁使用谁引用就可以首先src文件夹下新建store文件夹，内部index.js文件进行创建公共资源库import { createStore } from "vuex"; export default createStore({

2022-03-01 11:46:08 489

原创【vue 进行路由跳转，刷新页面后页面没有刷新】

vue 进行路由跳转，刷新页面后页面没有刷新vue 进行路由跳转，刷新页面后页面没有刷新vue 进行路由跳转，刷新页面后页面没有刷新项目实例：如点击歌手进行跳转歌手详情，或者点击歌手返回所以歌手列表等问题：vue-router提供了页面路由功能，可以用来构建单页面应用，在使用vue-router的动态路由匹配的时候，遇到了url变化了，但是页面却没有任何动静的问题动态路由匹配url变化了，但是组件没有变化是因为vue进行了组件复用，因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过

2022-02-09 14:43:19 6147

原创【Vue原生input输入框上传文件】

Vue原生input输入框上传文件Vue原生input输入框上传文件Vue原生input输入框上传文件<template> <div> <el-button type="primary"> <a href="http://xxx.xlsx">导入模板下载</a> </el-button> <el-button type="primary" @click="$refs.filesRef.click()"&

2022-01-19 17:36:06 1181

原创 Vue3中setup下的路由跳转

Vue3中setup下的路由跳转起跳页html<template> <div class="Page">  <button @click="tiaozhuan">点击进入详情</button>  <router-link to="detail">detail</router-link> </d

2021-12-31 17:38:55 4750

原创导航栏点击进入路由跳转详情页导航样式失效

导航栏点击进入路由跳转详情页导航样式失效el-menu解决导航样式失效的问题el-menu解决导航样式失效的问题项目问题：两个同级的导航栏页面，一个主页面(/text)，一个详情页(/detail 导航栏false隐藏)，当点击进入详情是路由跳转/detail，所以/text的导航样式失效解决办法：进行路由拦截判断，保留样式导航栏代码<template> <div > <el-menu class="sidebar-menu" :

2021-12-31 17:18:13 1227 2

原创禁止抽屉el-drawer点击内容区域外关闭

禁止抽屉el-drawer点击内容区域外关闭element组件禁止抽屉el-drawer点击内容区域外关闭element组件禁止抽屉el-drawer点击内容区域外关闭**只需添加方法 :close-on-click-modal=“false” **<el-drawer title="标题" v-model="data" direction="rtl" size="30%" :close-on-click-modal="f

2021-12-31 10:45:34 4229 4

原创 Vue项目封装管理api

Vue项目封装管理apiVue项目封装apiVue项目封装apiVue项目的开发会用到许多、且重复使用的api，所以合理的api管理会减少代码量，也便于后期的更改1、首先需要在src文件夹下新建一个http文件夹2、http文件下新建axios.js文件进行管理axios请求3、http文件下新建api.js文件进行管理api项目目录如下：axios.js代码// axios 需要下载模块npm i axios import axios from 'axios'// 创建axios的

2021-12-15 16:53:01 1215

原创 VS Code解决格式化后单引号变双引号，去除多余逗号

VScode解决格式化后单引号变双引号，去除多余逗号Vue报警问题Vue报警问题对于使用Vue-cli脚手架存在的一些格式规则上的报警问题报警代码如下1、Strings must use singlequote // 字符串必须使用单引号2、Extra semicolon // 额外分号 3、Unexpected trailing comma // 意外的尾随逗号4、Missing space before function parentheses //

2021-12-15 16:00:44 2341

原创 vue3.0父子组件的通信

vue3.0父子组件的通信Vue3.0组件通信Vue3.0组件通信vue3.0脚手架setup内部的组件通信1、父到子通过props父组件<template> <div > <Son data="currentRole.arr"></Son> </div></template><script lang="ts">import { defineComponent, reactive} from

2021-12-08 16:53:51 277

转载解决ElementUi树结构默认选中的事件

解决ElementUi树结构默认选中的事件解决ElementUi树结构默认选中的事件解决ElementUi树结构默认选中的事件一个后台管理系统，使用了ElementUi的el-tree组件，并且带有选中效果的，当对数据进行修改操作时，需要将原有的选中数据渲染到树结构中，data以及default-checked-keys的数据都是从后台获取的数据，所以在进行修改操作时，并没有按照预期的能把选中的效果体现出来，后来一想才发现，原来渲染el-tree前，就得拿到default-checked-keys的选中

2021-12-03 17:16:19 2858 1

原创 Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭

项目需求问题Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭Vue项目element-ui弹窗组件el-dialog、el-drawer，阻止点击遮罩层关闭在使用element-ui组件的时，根据项目需求，需要修改组件默认的属性值。今天根据需求需要组织点击遮罩层关闭组件el-dialog或者el-drawer<el-dialog :title="title" :visible.sync="open" width="500p

2021-12-02 17:15:34 3893

转载 Cannot read properties of null (reading ‘style‘)前端错误记录21/10/20

前端错误记录Vue报错Cannot read properties of null (reading ‘style‘)Vue报错Cannot read properties of null (reading ‘style‘)起因： Vue框架书写代码时，控制页面的显示隐藏使用到了 v-if并且在mounted中引用函数，判断并渲染这个v-if下面的元素了<div v-if="this.pageFunction==='distributeDetail' || this.pageFunction

2021-11-29 18:20:34 10630 2

原创 vue3.0获取dom节点

VUEvue3.0利用ref获取dom节点vue3.0利用ref获取dom节点vue2.0获取dom<div ref="myRef"></div>this.$refs.myRefvue3.0setup写法获取dom<template> <div ref="myRef">操作DOM节点</div></template><script>import { ref, onMounted } from 'vu

2021-11-19 17:59:01 873

原创 Git团队开发

团队开发GitGit的使用GitGit的使用1. 安装git2. 自报家门git config --global user.name "Your Name"git config --global user.email "email@example.com"3. git命令创建git可管理的仓库 git init添加+提交 git add . git commit -m “提交说明”撤销更改 git checkout . 撤销更改版本回退 git reset --hard

2021-11-19 11:43:09 151

原创 src与href属性的区别

标题src与href属性的区别src和href之间存在区别，可以混淆使用。src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在

2021-08-03 10:29:55 57

原创 DIV内容居中

DIV内容居中文字居中垂直居中，关键代码height:200px;line-height:200px；重点就是两个值要相等<div style=' height:200px;line-height:200px;' >文字垂直居中 </div> 横向居中，关键代码 text-align:center <div style=' height:200px;line-height:200px;text- align:center'> 文字横向居

2021-03-07 11:06:38 89

原创 HTML标签的三大类

HTML标签的三大类## 标题1、行内元素(也可称内联元素)2、行内块元素(也可称内联块状元素)3、块级元素它们可以相互转换　　display:inline: 转换为行内元素　　display:linline-block 转换为行内块元素　　display:block 转换为块级元素　　各自具备的特性:行内元素:　　1.无法设置宽高　　2. margin上下无效,只有左右有效果,padding都有效果,会撑大空间　　3.不会自动换行　　行内块元素:　　1. 不会自动换行　　

2021-03-07 10:46:36 194 2

weixin_51341210的博客

原创 Vue3实现文件预览word、pdf、excel、图片以及txt文件

原创 vue项目大屏项目点击全屏功能实现

原创 vue3让元素内容无限滚动

原创 ECharts图表对X时间轴时间戳转换为年月日

转载 elementui input输入框 Number类型限制长度

原创封装axios请求（拦截器）

原创纯CSS实现tab切换

原创【vite+vue通过@便捷引入路径的配置方法】

原创【vite+Vue3项目的创建以及配置项】

原创【vue3动态的切换earchs图表的数据】