vue
易de
日积月累
展开
-
$attrs,$listeners
通过$listeners在c组件触发了A组件的方法。'通过$listeners触发父组件的事件''这是父组件的方法''这是子组件的方法''这是孙组件的方法'原创 2023-08-31 15:54:56 · 380 阅读 · 0 评论 -
provide/inject
Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现。在父组件中,我们可以通过provide选项来提供数据,这些数据可以是任何类型的JavaScript对象。在子组件中,我们可以通过inject选项来注入这些数据,然后在子组件中使用它们。使用provide/inject的好处是可以避免props层层传递的问题,同时也可以让我们更方便地在组件树中共享数据。需要注意的是,provide/inject不是响应式的,也就是说,如果提供的原创 2023-08-31 14:03:22 · 111 阅读 · 0 评论 -
vue 引入 jquery
vue中引入jquery安装jquery包npm install jquery --save配置vue.config.jsconst webpack = require('webpack');module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "win原创 2022-01-21 11:13:52 · 4590 阅读 · 1 评论 -
vue+echarts5 实现中国地图
vue + echarts5.0 实现中国地图原创 2022-01-17 18:05:11 · 7493 阅读 · 1 评论 -
根据不同的值表格单元格显示不同的背景色
<el-table id="table" :data="tableData" border style="width: 100%;height: 100%;" :header-cell-style="{ color: '#333', 'font-weight': '500'原创 2022-01-05 18:00:31 · 1499 阅读 · 0 评论 -
pdfjs-dist加载不全的解决方案
首先说版本问题,我用的2.1.226版本,会有长文章加载不全的问题,看了网上好多人说的,说是2.2.228版本的最稳定;可以看https://www.cnblogs.com/baisong11/p/13731436.html解决方案方案一:修改源码https://blog.csdn.net/s_y_w123/article/details/108869862方案二:线上或本地资源包https://www.cnblogs.com/KingJames/p/11763590.html我最开始使用了线原创 2021-09-16 19:00:05 · 7824 阅读 · 1 评论 -
提高PDF预览的清晰度
核心代码let devicePixelRatio = window.devicePixelRatio || 1;console.log(window.devicePixelRatio) let backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRa原创 2021-09-08 16:57:18 · 3472 阅读 · 0 评论 -
el-select去掉滚动条
主要原因是下拉框el-select-dropdow和app是同级,所以写在局部样式里面没有效果。未来不全局污染,select组件中,提供了一个popper-class属性(element-select),所以给select组件加上这个属性,就可以咋这个类下修改样式了。<el-select v-model="type" popper-class="remove-scrollbar" placeholder="请选择" > <el-option转载 2021-09-08 15:53:33 · 2598 阅读 · 1 评论 -
初识canvas
MDN参考<canvas id="cvs" width="300" height="300"></canvas><script> //获取canvas对象 var cvs = document.getElementById('cvs'); //获取画笔 //(参数2d,表示建立一个二维渲染上下文,从页面的左上角开始,向右为X轴,为正,向下为Y轴,为正) var ctx = cvs.getContext('2d'); //画一条线段 //设置笔触样式原创 2021-09-05 22:38:18 · 76 阅读 · 0 评论 -
使用pdfjs-dist实现PDF预览
<template> <div> <div id="the-canvas"></div> </div></template><script>import PDFJS from "pdfjs-dist";import { TextLayerBuilder } from "pdfjs-dist/web/pdf_viewer";import "pdfjs-dist/web/pdf_viewer.css"原创 2021-09-01 17:12:40 · 3820 阅读 · 6 评论 -
前端vue实现PDF预览
一、使用a标签<a href="http://xxx.xx.cn/test1.pdf">pdf</a>注意,href地址必须是文件的绝对位置,相对位置不可以。也就是说url写为"…/assets/pdf/test1.pdf",这样访问不到PDF文件。点击链接在新窗口打开预览PDF文件,和使用浏览器输入文件地址打开文件一样。二、使用iframe标签<div class="iframe-pdf"> <iframe src="http://xxx.xx.c原创 2021-09-01 10:50:19 · 1320 阅读 · 0 评论 -
el-upload 文件上传
<div class="upload-active"> <el-upload name="file" accept=".docx" action="/api/file" ref="uploadref" :multiple="false" :auto-upload="true" :show-file-lis原创 2021-07-23 17:58:28 · 3696 阅读 · 0 评论 -
vue element 中 select 和 button 的回车事件
按回车时隐藏 element 中 el-select的下拉框<el-select ref="selectref" v-model="reportType" placeholder="请选择" @visible-change="visibleType"> <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"原创 2021-07-22 19:48:23 · 3724 阅读 · 2 评论 -
element中navMenu结合路由使用
路由使用NavMenu做为导航菜单,实现的不好会出现点击菜单跳转到新页面的情况。如果想要实现本页跳转,菜单导航页的路由要作为其它菜单页的父路由。现有菜单导航页:home.vue,图表页:echart.vue。如菜单导航页的路由为/home,要想实现本页面路由跳转,则图表页的路由为/echart是不可以的,路由应为/index/echart,必须是菜单导航页的字路由。import Vue from 'vue'import VueRouter from 'vue-router'import Home原创 2021-07-13 10:36:06 · 3722 阅读 · 1 评论 -
el-upload上传文件,显示上传进度
el-upload上传文件,显示进度条deviceFile.vue<el-upload class="upload-demo" ref="upload" action="donothing" :http-request="fileUpload" :multiple="true" :show-file-list="false" :file-list="fileList"> <el-button原创 2021-04-24 13:11:50 · 10102 阅读 · 0 评论 -
vue表格增删改查
记录一次特别的坑的传参这两处拿到的scope不一样第一处拿到的scoped是正常的每行的数据,但是第二处拿到的scoped是最后一行的数据,不知道为什么。。。。。原创 2021-04-19 10:32:45 · 170 阅读 · 0 评论 -
a标签的download属性实现静态文件或图片下载
前端使用a标签的download属性实现静态文件或图片下载需要知道的是,如果下载的是浏览器不能识别的(例如:.exe,.zip,.doc等)内容,浏览器会直接进行下载,但是如果下载的是浏览器可以识别的(例如:.png,.jpg等)内容,浏览器不会进行下载,而是进行打开预览。下载内容为不能识别1.1 直接使用download属性,属性值为下载文件的名字。<a href="./企业综合信息系统插件的副本.zip" download="xxx.zip" >压缩包下载</a>&原创 2021-04-06 16:29:45 · 5206 阅读 · 2 评论 -
axios拦截器
请求拦截interceptors 拦截器this.$axios.interceptors.request.use(config=>{ // 发生请求前的处理 return config },err=>{ // 请求错误处理 return Promise.reject(err); })//或者用axios实例创建拦截器let instance = this.$axios.create();instance.interceptors.r.原创 2020-12-09 10:32:45 · 2603 阅读 · 1 评论 -
Vue实现用户登录导航守卫
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token6、后端判断请求头中有无token,原创 2020-11-30 22:32:18 · 2308 阅读 · 0 评论 -
编程式导航传参
如果路由跳转使用path,必须使用query方式传参,如果使用name跳转,query和params都可以传参,建议使用query方式传参,query方式传参,参数在地址栏,当刷新页面后,参数还可以通过地址栏获取。path跳转,query传参this.$router.push({ path : '/main', query : { userName : this.ruleForm.name } }) 跳转到的页面:{{this.$route.que原创 2020-11-28 17:55:26 · 1252 阅读 · 0 评论 -
echarts入门(通过axios请求数据)
echarts入门(axios请求数据)1. npm 安装 EChartsnpm install echarts --save2. 下面的是基本结构,里面的数据是静态的(写死的,不是通过接口请求到的)<template> <div> <div id="echart" style="width : 80%;height : 300px"></div> </div></template>原创 2020-11-22 19:18:10 · 6223 阅读 · 6 评论 -
node+express+axios实现单文件上传
node+express+axios实现单文件上传1.安装依赖2.后端代码3.前端代码1.安装依赖在node服务端安装依赖cnpm i multer --save2.后端代码var express = require('express');var router = express.Router();//上传商品图片var multer = require('multer');var fs = require('fs');var path = require('path'); //原创 2020-11-19 22:34:09 · 306 阅读 · 0 评论 -
Vue入门案例---ToDoList
ToDoList功能展示1.初始页面2.在输入框输入内容,按回车,添加到正在进行的列表3.点击文本,变为输入框,可以对内容进行修改4.文本框失焦,变为修改后的值5.点击“x”,删除内容6.点击正在进行的列表的内容前面的复选框,事件从正在进行的列表添加到已经完成的列表7.点击已经完成的列表的内容前面的复选框,事件从已经完成的列表添加到正在进行的列表仿ToDoList官方功能展示1.初始页面2.在输入框输入内容,按回车,添加到正在进行的列表3.点击文本,变为输入框,可以对内容进行修改4.文本框原创 2020-11-15 16:33:11 · 360 阅读 · 0 评论 -
Vue使用elementUI实现一个后台管理
Vue使用elementUI实现一个后台管理功能效果功能分析1.安装2.main.vue3.App.vue4.views(1) Home.vue功能效果初始界面添加商品分类修改分类删除分类功能分析1.安装(1)首先创建一个vue项目,创建过程我之前的博客有写过。该后台是基于element UI组件库。(2)安装element ui npm -i element-ui -S(3)全局引入,参考element-UI官网引入下面的代码到mian.jsimport Ele原创 2020-11-15 16:14:41 · 4361 阅读 · 2 评论 -
Vue必备面试题
1.vuex的作用?vuex是专门为vue.js应用程序开发的状态管理模式,状态就是结果,样式,数据等,实现了对应用中所有组件的状态的全局管理。vuex的几个核心概念store,全局状态管理,主要包括state,mutations,actions,modules,getters五大属性。state : 用于存储数据,数据是全局的,都可以通过$store.state.名字来使用。mutations:用于操作state中的数据,是同步操作,通过$store.commit来触发。actions:用于原创 2020-11-15 14:42:55 · 664 阅读 · 0 评论 -
Vue组件化(组件通信,自定义组件)
Vue组件化自定义组件1.创建.vue文件2.在父组件中引入自定义组件3.在父组件中注册子组件4.在父组件中使用子组件组件通信1.父组件向子组件传值2.子组件向父组件传值封装自定义组件1.封装输入框组件2.封装按钮组件3.使用自定义的样式组件自定义组件1.创建.vue文件<template> <div class="nav-body"> <div class="navs"> <div>首页</div>原创 2020-11-08 15:40:27 · 307 阅读 · 0 评论 -
Vue工程化项目
Vue工程化项目脚手架安装与项目创建脚手架安装与项目创建安装cnpm i -g @vue/cli创建项目vue create 项目名称创建项目过程的选项(1)自定义安装(2)选择安装的模块(按空格选中,按回车下一步)...原创 2020-11-08 15:06:02 · 353 阅读 · 0 评论 -
Vue基础选项
Vue基础选项1. el2.data3.methods4.computed5.watch6.filter1. el挂载点,用于挂载要管理的数据2.data定义数据3.methods定义vue对象中的一些方法上面的三项是最基本的选项,有了他们就能有如下结构,一定要注意各个选项之间要用逗号隔开。<div id='app> {{ msg }} </div><script>el:{ "#app",},data:{ msg : 'hello'原创 2020-11-06 21:26:55 · 465 阅读 · 0 评论