vue
文章平均质量分 55
dearqz
欢迎交流与学习
展开
-
quillEditor 配置图片element自定义上传,包含粘贴图片和工具栏上传图片
本文主要关注粘贴图片上传,因为点击工具栏可以增加触发事件addHandler直接上代码:标签部分:<el-upload :action="photoUploadUrl" :show-file-list="false" :on-success="handleQuillImgSuccess" with-credentials accept="image/gif, image/jpeg, image/jpg, image/bmp, image/png".原创 2021-07-15 11:07:27 · 828 阅读 · 1 评论 -
前端利用qrcode设置二维码预览
一、文件引入标签引入<script src="qrcode.js"></script>npm引入cnpm install --save qrcodejs2二、使用方法DOM结构<div id="qrcode" ref="QRcode"></div>原生使用// 设置参数方式var qrcode = new QRCode('qrcode', { text: 'www.baidu.com', // 二维码地址,根据需要原创 2020-10-31 17:37:30 · 1455 阅读 · 0 评论 -
前端markdown解析器marked的使用与在ie中的兼容问题
最近在vue项目中遇到解析markdown格式文本的需求首先看一下接口返回的数据类型:是md格式的文本渲染有很多方式,我用的是 marked 插件,也是基于markdown-it,是一款比较受欢迎的解析器在vue中如何使用?为了使解析后的code样式能够高亮,我们结合highlight.js实现此效果首先 npm install --save-dev marked highlig...原创 2020-01-16 15:27:19 · 1558 阅读 · 3 评论 -
vue自定义日历,vue分时间段展示价格日历
需求最近遇到一个需求,根据不同时间段展示不同价格的日历:点击详情,后台返回时间段与时间段对应的价格,前端负责相关展示后台返回数据类型:前端展示效果:了解开始前我们先了解下获取日期的几个必要的知识点现在是12月,通过getMonth()获得的就是11,获取其它时间节点即是对应的数据获取指定日期的第一天和最后一天,知道上面的获取月份,现在我们想要获取4月份的第一天和最后一天:...原创 2019-12-30 11:19:34 · 2580 阅读 · 3 评论 -
vue实现自定义步骤条
首先看一下实现的效果:来看看实现过程:公共插件<!-- Step.vue --><template> <div class="stepOut"> <ul> <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index...原创 2019-11-19 17:26:01 · 9092 阅读 · 3 评论 -
vue 下载pdf文件
首先安装依赖npm install html2canvas jspdf --save封装方法:// pdfMethod.jsimport html2canvas from 'html2canvas'import JsPDF from 'jspdf'const generateResume = (el, name) => { html2canvas(el).then(canv...原创 2019-11-19 17:02:42 · 6848 阅读 · 0 评论 -
vue支付密码插件实现(可解决浏览器记住密码行为)
浏览器自动填充和记住密码行为是前端遇到最为头疼的问题之一,浏览器只要检查到password input框,就会匹配离他最近的text input框,autocomplete属性虽能解决自动填充的问题,但是也是支持有限,不能解决浏览器记住密码行为和提示密码行为要解决这种问题,可以从password input框入手,只要改变 input框的类型为text就可以解决此问题第一种:设置样式设置...原创 2019-11-11 11:44:56 · 833 阅读 · 0 评论 -
element联级选择器(获取省市地区)后台动态获取
如何根据后台接口数据动态展示联级选择器,本文章以获取省市地区为例进行说明通过点击省地区动态获取市地区首先,看一下element联级选择器长啥样:<el-cascader :options="options" v-model="value" clearable></el-cascader><script> export default { ...原创 2019-11-04 10:35:38 · 3762 阅读 · 0 评论 -
字体图标在ie兼容问题(element低版本icon)(图标在ie浏览器不显示)
在项目开发过程中,项目用到的是element组件,版本号是2.4.7,遇到了图标字体在ie浏览器不显示的问题,这是在同事电脑出现的bug,我电脑同样是ie,11版本和10版本都没有问题,但是在同事电脑哪个版本都显示不出来,纠结了半天看到ie里报的错误是这样的CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。在网上搜都是千篇一律的...原创 2019-10-18 19:10:49 · 5704 阅读 · 0 评论 -
怎样优雅的更改element中的样式
相信大家在写vue项目的时候大多都会用到element组件,这样修改组件自带默认样式也就成了前端工程师的主要任务之一了,这篇文章就怎样修改element中的默认ui样式进行说明以input输入框为例无论要修改哪种样式,都要先熟知或查看element自带的修改样式方式,如果element本身就自带了修改样式的属性,直接用即可,大部分标签也支持利用class命名更改标签样式,本文主要对没有提...原创 2019-09-30 11:31:52 · 7472 阅读 · 1 评论 -
vue根据后台字段动态显示图片
说明之前搜了很多,有通过把每个图片展示通过状态控制显示的有通过require每个图片通过状态控制显示的要是数量少还好说,数量多了这种方法肯定是要放弃的本事例就以银行图标显示为例,根据后台返回银行类型字段显示本地对应银行图标具体实现1、首先在模板写上图片标签,当然只写一个动态的就足够了<img :src="imgSrc" alt="银行图标">2、创建 js 文件处...原创 2019-09-30 10:25:37 · 3035 阅读 · 0 评论 -
vue 文件下载
文件下载流程本文章针对于前端基于Blob对象创建文件实现文件下载直奔代码:// 首先创建数据对象const data = {hello: "world"};// 创建Blob并指定mine类型const blob = new Blob([JSON.stringify(data)], {type: "text/plain"});// 文件名命名const fileName = `${...原创 2019-09-29 10:40:37 · 5065 阅读 · 0 评论 -
element 表格排序之远程排序去除默认排序
element表格提供了三种数据的排序方法:升序排序 ascending降序排序 descending默认排序 null如果是前端本地排序 可设置 sort-doders 属性为 ['ascending', 'descending'] 去除默认排序具体可参考 element文档远程排序即为后端排序,后端可按照前端参数(升序、降序、页码、数量)返回所有数据中的相应数据,看代...原创 2019-09-09 18:21:48 · 4114 阅读 · 1 评论 -
vs-code中用liveServer打开vue-cli打包后的html,模拟查看线上路径问题
首先在扩展搜索liveServer下载安装之后右键html就会出现liveServer命令我用的vue-cli版本是3.2,为防止路径问题,在vue.config.js中修改publicPath为module.exports = { publicPath: "./"} 完成重新打包在vscode 配置 setting.json 中配置liveServer { "live...原创 2019-05-13 14:48:22 · 4666 阅读 · 0 评论 -
npm时报错解决EPERM: operation not permitted, lstat
在使用vue-cli做项目时,曾遇到过npm run build打包时报错的问题,如下图当时遇到问题后试了好多方法都不行,dist文件夹也删除不了,然后各种搜索,有的让清除缓存,有的说是无权限访问,要用管理员身份访问,可能这样能解决一部分问题,但是我的问题却一直没有解决,因为我用的ide是VS code,当时开的本地server服务,索性就把VS code关了重新试了试,还成功了这...原创 2019-06-21 15:29:34 · 37597 阅读 · 4 评论 -
vue+node(express)+mysql部署阿里云服务器
一、购买服务器1 、进入阿里云官网,选择服务器ECS,我买的是学生的,当然你要是学生,可以通过身份购买学生专用优惠服务器,9.5一个月2、接下来会有个密码设置,这个密码会从始至终会用到哦3、购买成功后,实例就创建成功了,也就会有自己的服务器了4、在控制台中可以查看自己的实例,里面会有你所买的服务器的ip地址,且显示运行中,到此,就可以开始部署准备工作了二、下载安装putty和X...原创 2019-06-21 16:17:46 · 3469 阅读 · 2 评论 -
vue全局相关extend、compoment、keyCodes、extends以及mixins
说明整理笔记,希望帮到大家,主要包括extend、compoment、extends以及mixins的功能用法以及他们之间的执行关系1、全局给keyCodes设置自定义键名Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case ...原创 2019-06-12 12:10:34 · 547 阅读 · 0 评论 -
vue源码分析中的mvvm双向数据绑定模式
1、initData执行:通过getData函数调用vm.$options.data选项获取数据对象,并对传入类型做处理,对data和method传进来同名做警告。优先级关系:props优先级 > methods优先级 > data优先级2、调用 observe 函数将 data 数据对象转换成响应式3、observe(data, true /* asRootData ...原创 2019-06-12 12:28:22 · 105 阅读 · 0 评论 -
在vue项目中使用svg,并能根据需要修改svg大小颜色等样式
1、介绍考虑到一部分人还在用vue-cli 2.x,故本教程既包含2.x版本,也包含3.x版本2、安装依赖npm install --save-dev svg-sprite-loader3、把svg文件放入项目中如图所示:我把svg文件放入到了assets目录下的icons目录里面了4.1、vue-cli 2.x 配置在webpack.base.conf.js中配置允许svg依...原创 2019-06-26 17:39:38 · 24636 阅读 · 14 评论 -
element 日期选择器 date-picker 设置默认时间(当月1号到当前日期)
element 日期选择器结构,两个日期选择器定义开始和结束 <el-date-picker v-model="startTime" type="date" :editable="false" prefix-icon="el-icon-caret-bottom" value-format="yyyy-MM-dd" :clearable='...原创 2019-08-02 17:21:38 · 25322 阅读 · 5 评论 -
vue中分割线的实现
项目中,需要实现分割线的效果,如图:奈何 element 中的分割线用起来报错,无奈只好自己写,很简单,先说下原理:给一个高为1像素的盒子,盒子宽度根据要求设定,再设置盒子颜色,排列方式为相对定位,盒子里设置文字给左右padding,并进行绝对定位到中间即可实现看代码:<div class="tableTitle"><span class="midText"&...原创 2019-08-02 15:02:32 · 31317 阅读 · 1 评论 -
vue中标签自定义属性的使用
在 vue 中,尽量避免对dom的操作,通过对状态的管理实现需要的功能举个例子:vue获取dom元素可以使用 ref 要想获得自定义属性,可以通过设置 ref 实现<span data-num="21" ref="dataNum" @click="getData">55</span>getData:function () { console.log(thi...原创 2019-08-23 18:12:29 · 18280 阅读 · 0 评论 -
前端请求接口 token登录验证
在登录组件登录函数methods: { userLogin () { this.axios({ method: 'post', url: 'userLogin', data: this.loginData }).then(res => { console.log('登录成功') // 登录成功存储用户信息到本地存储,用户信息包含tok...原创 2019-08-13 10:52:46 · 10890 阅读 · 0 评论 -
vuex中遇到的坑,vuex数据改变,组件中页面不渲染
vuex数据改变,组件中页面不渲染相信许多vuex新手都会遇到这样的问题:vuex数据更新后,插件中使用数据的地方没有更新这样的代码data() { return { tableData: this.$store.state.AdminInfo }; }然后在 template 中使用 tableData<el-table :data="ta...原创 2019-05-06 18:25:59 · 16316 阅读 · 0 评论