纯CSS实现tab切换 点击tab切换方式有二一、通过a标签的锚点 + :target选择器缺点：锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。二、利用label和radio的绑定关系和radio选中时的:checked来实现效果以下为方法二CSS样式HEML...
【vue3动态的切换earchs图表的数据】 1、首先进行下载模块我这里通过yarn add echarts，当然也可以使用npm i echarts2、然后在main里进行引入全局的3、组件内进行使用earchs创建实例注意：这里在虽然给绑定的数据进行创建变量便于切换，但是实例已经创建，所以需要进行销毁，否则会报下面这个错误4、接下来就是代码htmljavascriptcss...
前端以字节流形式下载pdf文件 前端以字节流形式下载pdf文件html内容写入点击事件，传入路径后端返回字节流格式<template> <el-button type="text" @click="saveEditIn(url)" >下载 </el-button ></template><script>// 点击下载操作 const saveEditIn = (e) => { api .downlo
【Vue3通过公共状态VueX实现组件通信】 Vue3通过公共状态VueX实现组件通信Vue3通过公共状态VueX实现组件通信Vue3通过公共状态VueX实现组件通信作用：对于组件之间的通信，除了父子间通过props，或者通过provide和inject，亦或者通过bus方式，我觉得公共状态的使用更加方便谁使用谁引用就可以首先src文件夹下新建store文件夹，内部index.js文件进行创建公共资源库import { createStore } from "vuex"; export default createStore({
【vue 进行路由跳转，刷新页面后页面没有刷新】 vue 进行路由跳转，刷新页面后页面没有刷新vue 进行路由跳转，刷新页面后页面没有刷新vue 进行路由跳转，刷新页面后页面没有刷新项目实例：如点击歌手进行跳转歌手详情，或者点击歌手返回所以歌手列表等问题：vue-router提供了页面路由功能，可以用来构建单页面应用，在使用vue-router的动态路由匹配的时候，遇到了url变化了，但是页面却没有任何动静的问题动态路由匹配url变化了，但是组件没有变化是因为vue进行了组件复用，因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过
【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()"&
Vue3中setup下的路由跳转 Vue3中setup下的路由跳转起跳页html<template> <div class="Page"> <!-- 点击跳转 --> <button @click="tiaozhuan">点击进入详情</button> <!-- router-link跳转 --> <router-link to="detail">detail</router-link> </d
导航栏点击进入路由跳转详情页导航样式失效 导航栏点击进入路由跳转详情页导航样式失效el-menu解决导航样式失效的问题el-menu解决导航样式失效的问题项目问题：两个同级的导航栏页面，一个主页面(/text)，一个详情页(/detail 导航栏false隐藏)，当点击进入详情是路由跳转/detail，所以/text的导航样式失效解决办法：进行路由拦截判断，保留样式导航栏代码<template> <div > <el-menu class="sidebar-menu" :
禁止抽屉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
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的
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 //
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
关注
