- 博客(38)
- 收藏
- 关注
RSS订阅原创 vue中文件上传显示进度条的使用
文件上传显示进度条1、所用到的UI组件el-dialogel-uploadel-progress2、基础用法样式<el-dialog title="文件上传" :visible.sync="excelVisible" width="40%" :close-on-click-modal="false" :close-on-press-escape="false" center >
2022-01-19 10:59:13
11252
3
原创 vue中导出Excel文件
1、经常会用到导入导出，做个笔记给自己this.axios .post("/service",params,{ responseType: "arraybuffer" }) .then((res) => { let a = document.createElement("a"); let blob = new Blob([res.data]); let objectUrl
2021-12-29 15:12:31
282
原创 Vue中获取屏幕滚动高度及实现返回顶部滚动效果
Vue中获取屏幕滚动高度获取屏幕滚动高度 windowScroll() { // 滚动条距离页面顶部的距离 // 以下写法原生兼容 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; }返回顶部toTop() { let top = document.documentElement.scrollTop
2021-11-17 15:55:24
1132
1
原创 ElementUI中Upload上传的基本用法
1、我在之前的文章中有写过关于Upload上传中遇到的一些问题，本篇只讲述基本用法2、代码<el-dialog title="文件上传" :visible.sync="excelVisible" width="40%" center><el-upload style="text-align: center" :show-file-list="false" :on-error="handleError" :on-succ
2021-11-15 14:53:16
4040
1
原创 ElementUI的的动态增减表单及表单验证
ElementUI的的动态增减表单1、根据需求：做一个如下图的表单，当只有一列时，无法进行删除操作，且表单必须校验2、根据ElementUI的动态增减表单项，可得知通过v-for循环可动态增减表单通过:prop="'domains.' + index + '.value'"可进行验证3、data里的写法data(){return { ruleformPro: { list: [ { fbxBoxNoPro: "",
2021-11-15 14:15:54
3670
原创 ElementUI中的Empty空状态使用
ElementUI中的Empty空状态使用话不多说，直接贴代码<div slot="empty"> <div> <img src="../../assets/noQuotation.png" alt="暂无数据" width="300" height="138" /> </div> <p>查无结果，请检查订单号是否有误/p>
2021-11-01 17:49:48
4120
原创 Web端接入声网
Web端接入声网流程以及遇到的问题由于项目由腾讯SDK接入改声网SDK接入，我也不得不开始接入声网，不过我这一部分做的是通过复制app里面的链接到浏览器播放，所以我这边做web的接入流程1、通过声网官方文档声网官方文档，找到对应自己的产品和对应的平台2、下包 （我是直接下载的js文件，也可通过文档的获取sdk来引入）3、开始正式接入声网// 开始接入声网 var rtc = { // 用来放置本地客户端。 client: null, // 用来放置本地音视频频轨道对象。 lo
2021-07-20 13:46:56
1378
1
原创 ElementUI编辑行
对Vue+ElementUi项目中Table 表格行的编辑1、首先看效果图：详解：点击编辑按钮，对应的编辑行出现iuput框,可进行行内编辑2、使用v-if进行判断<el-table-column prop="orgName" label="组织名称"> <template scope="scope"> <div v-if="scope.row.id == currentData.id"> <el
2020-12-27 16:38:33
1216
原创 Vue项目部署在Nginx服务器上的系列步骤
Vue项目部署在Nginx服务器后404怎么解决小编对nginx确实不是很会，此处可参考该文章对nginx有所了解: 掘金-Nginx从入门到实践，万字详解1、首先根据后端给的接口，修改vue.config.js中的基地址和端口，如图：2、进行vue项目打包，把发布的文件上传到服务器指定目录 例如:/app/dist,此处我是使用的是xftp软件3、打开xshell 连上服务器，连接成功后输入一下指令：查看路径whereis nginx切换到安装目录并重启cd /usr/local/n
2020-12-23 22:58:29
640
原创 Vue数据格式化，:formatter的使用
在Vue中使用ElementUi表格，对数据进行格式化处理1、后端给我返回的格式如下，我要根据他提供的数据，将其转变为文字：2、我们可以在需要处理行里，加入:formatter方法，具体代码如下： <el-table-column prop="protocolType" label="协议类型" :formatter="formatProtocolType" > </el-table-column>3、在js中进行格式处理既可以使用if判断，也可使
2020-12-21 22:01:11
17035
2
原创 使用ElementUi中的Upload遇到的坑点
使用ElementUi中的Upload 上传遇到的坑点1、我使用的Ui样式是这个样式，为手动上传形式2、话不多说，上代码<el-upload v-model="ruleUserForm.logoUrl" class="upload-demo" ref="upload" action="aaa" :on-preview="handlePreview" :o
2020-12-19 15:25:44
4989
3
原创 在Vue中使用path-to-regexp的报错问题
在Vue中使用path-to-regexp的报错问题在页面引用path-to-regexp中出现错误，在VSCode终端中显示如下警告： WARNING Compiled with 1 warnings
2020-12-19 14:14:05
2596
6
原创 ElementUi中el-table表格操作记录
1、ElementUi中el-table表格根据需求，父级菜单拥有新增权限而子菜单没有该权限1、如图所示：2、HTML代码示例：<el-table :data="tableConfigInfo" style="width: 98%; margin-top: 20px" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren'
2020-12-17 22:12:31
1743
2
原创 Vue中使用互动粒子vue-particles
Vue中使用互动粒子vue-particles1、下包npm install vue-particles --save-dev2、在main.js中使用import Vue from 'vue'import VueParticles from 'vue-particles'Vue.use(VueParticles)3、在要使用的页面写入下面代码<vue-particles color="#dedede" :particleOpacity="0.7"
2020-12-17 21:45:12
310
原创 前端面试题收集(三)
1.用css的方式给按钮设置禁用disabled设置鼠标补课点击 cursor: not-allowed鼠标原有的事件不能实现 pointer-events:none2.hashchange 是什么当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)3.ssh协议SSH协议使用加密技术确保client和server之间的连...
2019-09-11 17:40:56
143
原创 this的四种指向以及箭头函数中this指向
1.普通函数 this指向是,window function sayHi(){ console.log(this) } sayHi();2.对象函数 this的指向是,当前对象 var obj={ name:'小花', age:18, sayHi(){ console.lo...
2019-09-11 16:27:38
655
原创 前端面试题收集(二)
1.打开浏览器,输入网址敲回车之后会发生什么浏览器将网址发送给dns,进行解析dns解析成为对应的ip地址之后,发送给浏览器浏览器接收后,通过ip地址,找到对应的服务器,像服务器发送请求这其中,进行了三次握手的过程服务器接收到请求后,找到对应的目录下得文件找到所有文件,将其进行打包将打包好的文件,发送给浏览器浏览器接收后,进行解析,生成dom树,对数据进行动态渲染当浏览器...
2019-09-05 17:37:11
186
原创 前端面试题收集(一)
1.cs3的新特性新增了一下边框样式border-imageborder-radiusborder-shadow背景样式background-imagebackground-sizebackground-origin (背景区域)文字效果text-shadowtext-warp过渡transition (属性简写)transition-pr...
2019-09-05 11:28:00
143
原创 mock.js的基本使用
1.是什么用来生成虚拟数据的工具2.有什么用mockjs 在开发过程中后端的接口还没有开发完成，但是前端已经完成了工作。可以使用它来生成一些虚拟数据，来替换后端的接口，等后端接口开发完成之后，再替换成真实的接口。3.怎么用用来直接生成虚拟数据可以拦截异步请求用法一:生成虚拟数据步骤：1.0 安装npm install mockjs2.0 使用// 引...
2019-09-05 00:01:41
182
原创 Vue中快速浏览页面以及父子组件的传值(props、$parent和$emit)
1.如何在不搭建脚手架的情况下,写一个vue后缀的文件,然后浏览呢?先安装一个全局的快速原型开发的功能 npm install -g @vue/cli-service-global然后在需要浏览的文件中在终端中打开,输入vue serve2.父子组件的传值a.父传子 关键字: props子组件定义 props属性 props:['num','age'.....]父组件使用子组件...
2019-08-27 17:21:22
1700
原创 Vue中双向绑定详解(defineProperty和Proxy)
1.首先复习一下我们平时是怎么写双向绑定的<div id="app"> <input type="text" v-model="msg"> <p> {{msg}}</p> </div><script src="https://cdn.jsdelivr.net/npm/vue"></script&...
2019-08-26 23:20:08
1282
原创 Vue学习笔记--项目部署(IIS)
1.通过npm run build命令打包2.命令执行完毕后,在任意盘建立一个文件夹,然后在里面创建一个新的文件夹(这样便于以后部署多个站点,便于管理–仅个人习惯),将打包后dist里面的件复制粘贴进来3.打开控制面板–程序和功能–开启或关闭Windows功能进行配置4.配置完成后,打开IIS管理器点击网站,右键-添加网站ip地址最好选择一下,否则显示为localhost,...
2019-08-24 23:41:47
205
原创 Vue中使用省市联动(vue-distpicker)
1.导包 npm install v-distpicker具体地址:https://github.com/jcc/v-distpicker或者在github中搜索 vue-distpicker2.用包(局部组件) import VDistpicker from 'v-distpicker'3.注册主键components:{ VDistpicker },4.在...
2019-08-24 20:48:27
473
原创 Vue中Echarts的使用以及解决留白问题(boundaryGap)
1.导包 npm install echarts --save2.用包 我是用的是局部组件 import echarts from "echarts";3.在官方实例中找到自己需要的表格然后复制到代码中4.坐标轴有两边留白策略,默认为true,所以我们可以把boundaryGap配置为false代码如下<template> <div class="my-ro...
2019-08-24 19:45:12
4843
原创 Vue中请求拦截、响应拦截和路由元信息使用
1.请求拦截在使用axios发送登入请求的时候,可以使用拦截器,给请求头加上自己的tokenaxios.interceptors.request.use(function (config) { flag=false config.headers.Authorization = window.localStorage.getItem('token'); return config;...
2019-08-21 18:09:36
1311
原创 Vue笔记第六天(设置cook、导航守卫、watch和filter的补充)
第六天1.axios发post请求axios .post( 网址,{传递给服务器的参数 }) .then(backData=>{})2.设置让axios发请求时默认带cookie原因:axios 跨域默认不携带cookie解决办法:axios.defaults.withCredentials = true;3.导航守卫①.全局导航守卫–作用：可以在跳转到另一个路由之前，帮你做一...
2019-08-12 20:21:20
225
原创 Vue笔记第五天(路由的使用和整合,全局axios)
第五天1.Vue路由基本使用a. 下包 npm i vue-routerb. 导包 import VueRouter from'vue-router'c. 用包①Vue.use(VueRouter )②. 路由规则1. 创建对应的组件xxx.vue③. 创建路由对象 传入规则④. 路由对象设置给Vue实例d. 设置导航栏和内容App.vuee. 组件的位置compo...
2019-08-11 22:00:25
205
原创 Vue笔记第四天(搭建脚手架)
第四天1.搭建脚手架-CLIa.建议使用npm 命令:npm install -g @vue/cli(这是一个全局命令只用安装一次就可以了)b.命令查看是否成功 vue --versionc.类似于这样的一堆err!安装失败了解决方案:更换安装的工具:a. 淘宝镜像:$ npm install -g cnpm --registry=https://registry.npm.ta...
2019-08-11 21:18:46
143
原创 Vue中平滑滚动插件-iScroll的使用
iScroll的使用平滑滚动插件 - iScroll使用步骤:a.准备一个3层嵌套的页面结构(标签可以随意,如下:),给要获取的元素添加ref属性，名字随便起：有意义即可b.最外层容器的高度要固定c.导入iScroll<script src="iscroll.js"></script>d.创建一个IScroll的对象即可,通过vue实例.$refs.属性名即...
2019-08-11 20:41:57
1768
原创 Vue中updated和watch的区别
Vue中updated和watch的区别watch:1.仅仅是数据发生改变的时候会侦听到2.只是会检测到你写在watch里的那些属性,没写的就不会触发updated:1.执行到它的时候时候是数据发生变化且界面更新完毕2.不能监听到路由数据(例如网址中的参数)3.所有的数据发生变化都会调用(消耗性能)4.每次触发的代码都是同一个...
2019-08-09 22:58:57
9334
原创 Vue中的computed、filters的异同以及应用场景
updated和watch的异同异:updated:1.当data中定义的数据有变化时就会加载updated方法,watch:1.侦听一个数据，当数据改变就会触发
2019-08-07 20:31:12
1666
原创 Vue笔记第三天
第三天1.axios-vue提供了一个轻量、便捷的新的数据请求工具使用方法:导包:用法:axios.get(’’).then( res=>{} ).catch(res=>{})注意事项:then和catch里面建议使用箭头函数,不会改变this的指向axios和ajax的区别①ajax使用的是success和err回调函数作为参数使用②axios使用的是链式...
2019-08-07 19:22:01
125
原创 Vue笔记第二天
第二天1.事件修饰符v-cloak 可以隐藏胡子语法v-once 只渲染一次prevent 阻止默认跳转2.Vue中的生命周期钩子函数breforeCreate： Vue实例（或组件）创建并初始化调用，但是此时data数据还没有挂载上来，所以在这里访问不到data数据created： 挨在breforeCreate的后面，但是在这个钩子触发的时候，data已经挂载上去了，就...
2019-08-06 23:35:00
115
原创 Vue笔记第一天
第一天1.导包(可以npm直接引入或者直接官网下载)2.初体验3.插值语法 {{}}4.指令系统:v-text {{}} 相当于原生js的 innerTextv-htnl {{}} 相当于原生js的innerHtmlv-if和v-showv-if如果为true 相当于appendChild如果为false 相当于removeChildv-show如果为true 相当于di...
2019-07-30 18:19:47
114
原创 构造函数(new与this的解释)
1.什么是构造函数？构造，就是初始化的意思构造函数，是指 结合 new创建对象 并 初始化对象里各种属性的 函数在 new 对象时，跟在 new 后面的函数 就叫 构造函数2. a.命名规范: 首字母都大写,且一般为名词b.用法:通过new关键字来调用(强调!)c.用法:为 new 关键字创建的空对象添加成员用new关键字的小秘密:通过 new 关键字来调用函数,期间有看不到的细节...
2019-05-30 23:46:17
4939
原创 函数作用域与局部变量
作用域:变量的可访问范围函数作用域:function 函数名(){ }大括号的范围就是 这个函数的作用域全局作用域:整个页面局部作用域:函数内部(大括号内)局部变量:声明在某个函数内部的变量，只能在函数内部使用全局变量:声明在所有函数外部的变量，可以所有地方使用例子:判断下面代码打印的值是什么:所以,肯定会有人问,为什么第32行的打印会报错?这里有一句话可以解答,而且非常适合新...
2019-05-30 23:03:41
743
原创 Js复习笔记
1.什么是变量?内存的一块空间使用方式:var 变量名;2.数据类型简单数据类型:数值型 字符串 布尔值复杂:Null Undefiened Null----空字符 Undefiened–未赋值的Null 等于 Undefiened(正确)Null 严格等于 Undefiened(错误)3.分支结构a.if () {}else if() {}e...
2019-05-29 13:02:32
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人