Vue
Mr-K
人生是一本书,阅读需要人生
展开
-
Vue tinymce富文本回显问题
问题:对列表的富文本框进行编辑的时候,发现 v-model 无法有效显示,或者说出现空白等bug,不然就是富文本框内的内容是上一次的文本,并且常用的设置方法都无效。富文本框通过赋值方法可以展示,但不具稳定性,通过标签添加 ref 进行绑定后,通过.setContent 方法进行赋值。原创 2022-11-03 15:27:58 · 3610 阅读 · 6 评论 -
Vue 实用小插件
vue实用插件原创 2022-09-28 16:24:02 · 725 阅读 · 0 评论 -
vue 引入svg无法修改颜色
使用svg-icon标签来渲染图片,希望通过hover去改变图片颜色,手动设置color失败<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1616753856802" class="icon" viewBox="0 0 1024 102原创 2021-05-31 11:43:18 · 1668 阅读 · 0 评论 -
Vue 引入字体文件使用图标
伪类元素如何通过字体文件图标的Unicode渲染页面通过阿里矢量图下载需要的字体文件 1.1 选中需要的图标:购物车—添加到项目—调整图标颜色及样式或者unicode编码(为了防止多个图标文件,图标的unicode编码冲突) 1.2 下载项目,到vue项目中新建文件夹讲压缩包中解压到文件夹中 1.3 在iconfont.css文件中调整文件的当前路径 可以全局引入,也可以当前页面引入,这里全局引入 在页面通过content使用字体图标,不是iconfont.css的文件中的一个字体编码就够的.原创 2021-05-24 16:00:56 · 224 阅读 · 2 评论 -
Vue 导出csv文件
//安装依赖npm install json2csv -s//导入import json2csv from "json2csv";//数据格式,只能导出对象下的基础类型,数组,对象无法导出data(){ return { list:[ { name:'xxx', old:'xxx', } ] }}//csv导出methods(.原创 2021-04-07 18:14:53 · 950 阅读 · 1 评论 -
vue 引入全局scss
1.安装依赖npm install sass-loader@7.3.1 --save-dev //新版本会报错npm install node-sass --sava-devnpm install sass-resources-loader --save-dev2.在webpack.base.conf.js 添加配置参数resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'v原创 2021-03-18 10:41:50 · 169 阅读 · 0 评论 -
Vue 下载文件需要token设置
平时下载文件访问后台给的下载链接点击自动下载即可,因文件需要验证身份信息,所以需要在Request headers中塞入token作为身份验证既然链接直接打开不行,那就只能通过ajax访问的时候设置Request headersajax访问成功以后,返回的并不是我们想要直接下载的结果,返回的直接是文本内容,并且没有触发下载,例如既然文件已经能访问到了,那就手动下载吧,/* 1 ajax文件格式是.text,下载用的是Blob文件流,所以手动修改请求的responseType的返回格式类原创 2020-12-16 10:17:49 · 3544 阅读 · 3 评论 -
Vue vue-awesome-swiper使用
1.Vue搭建项目需要用到轮播图,就去查了一下Vue的插件vue-awesome-swiper,看似简单实则深藏不露各种问题层数不穷,记录一下方便诸位和自己安装vue-awesome-swiper依赖,导入文件npm install swiper vue-awesome-swiper --save//components单独引入,只有个别地方需要,这里不做全局引入<div v-swiper:mySwiper="swiperOption"> <div class="s原创 2020-12-06 11:16:38 · 8352 阅读 · 0 评论 -
Vue项目通过注入刷新当前页面
通过provide和inject的使用,实现看起来单页面刷新功能1.在app.vue页面中通过控制<router-view>的隐藏和展示,实现当前页面的刷新<div id="app"> <router-view v-if="isRouterAlive"/></div> export default{ name: 'App', provide(){ return{ reload:this.reload }原创 2020-07-22 15:29:14 · 358 阅读 · 0 评论 -
时间过滤器(时区)
1.标准时间转换指定时间格式Date.prototype.format = function(demand) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this原创 2020-07-21 16:45:24 · 1969 阅读 · 0 评论 -
Vue viewer插件使用
项目开发中使用图片放大是常用功能,通过Vue中 viewer 插件可以方便快捷的实现目的1.安装viewerjsnpm install viewerjs2.项目中引入viewerjsimport Vue from 'vue'import Viewer from 'viewerjs';import 'veiwerjs/dist/viewer.css';3.对viewerjs进行修改全局默认配置项目Vue.use(Viewer, { defaultOptions: {原创 2020-05-08 18:38:55 · 5007 阅读 · 0 评论 -
Vue 数组嵌套中循环数组改变值未响应
Vue中数组的动态替换和变更存在不及时相应的问题,根据官网给的方法可以解决vm.$set(vm.items, indexOfItem, newValue)项目开发中碰到了,数组循环数组,遍历展示数组中数组,进行手动分页,分页完成后发现DOM结构没有及时响应,根据排查发i西安数组内的数组没有及时响应,于是用了上面的方法,可是数据依旧没有被响应,问题出在了数组外还有一层数组,导致你不能对数组...原创 2020-03-26 19:52:50 · 2004 阅读 · 0 评论 -
Vue Echarts世界地图
1.绘制世界地图如下:2,开始绘制地图//安装Echartsnpm install echarts --save3.在Main.js中引入word.js世界地图import '../node_modules/echarts/map/js/world.js' // 引入世界地图4.在组件中绘制地图<template> <div class='...原创 2020-01-20 10:03:28 · 7477 阅读 · 6 评论 -
Vue v-html渲染后的DOM,操作当前页面的方法
问题出现原因: 为了帮助文档能够及时修改和更新,所以帮助文档在第三方官网上,通过后台获取,前端通过v-html渲染成页面1.样式问题用全局样式即可处理,为了全局样式不冲突,建议创建一个父级ID或者class,避免样式的冲突2.事件问题,对v-html内的某个元素绑定了事件,由于后台获取的页面不包含Vue,所以Vue直接调用的方法不能处理,具体待了解,用了一个笨方法,通过获取当前父级下...原创 2019-12-26 09:57:00 · 2508 阅读 · 1 评论 -
Vue 传递参数
父子组件传参 props//父页面<column-chart :column-data="columnData"></column-chart>//子页面 使用props接收参数//无需再data中再次定义cloumnData,直接通过this.cloumnData使用即可props:{ charData:{ //字符...原创 2019-12-06 11:06:00 · 199 阅读 · 0 评论 -
Vue props传参时候报错Use prop default value instead.
1.使用Vue props传递参数时候遇到这个问题根据上图,说是columenData已经被定义,希望你使用他的默认值,经过排查问题出在data()中 props:{ columnData:{ type:Object, default:() => {} }}, data() { return { chart:...原创 2019-12-06 10:51:25 · 6482 阅读 · 0 评论 -
Vue 引入G2图表
安装G2依赖npm install @antv/g2npm install @antv/data-set vue-ge在Vue main.js文件中引入G2import G2 from '@antv/g2'Vue.use(G2)模板中使用完整代码(柱状图)<template> <div id="c1"></div></...原创 2019-11-27 16:38:12 · 4859 阅读 · 0 评论 -
Vue 添加第三方图标(阿里矢量图)
1.阿里矢量图官网,创建项目阿里矢量图2.创建项目后,前缀这里在配置中需要用到,注意3.选择需要下载的矢量图标,选择Font class,下载到本地4.解压后获得以下文件5.到Vue项目下,找个地方存放以上所有文件,直接复制粘贴即可6.打开iconfont.css文件,对其进行一些配置,这里的icon就是你项目当时配的后前缀!![class^="icon"], [class*...原创 2019-11-26 17:33:51 · 884 阅读 · 0 评论 -
Vue,POST请求头'Content-Type':'application/json;',data上传方法
transformRequest 方法说明axios中文文档原创 2018-09-19 17:29:22 · 44380 阅读 · 1 评论 -
Vue 手风琴el-collapse绑定事件
<el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="一致性 Consistency" @click.native="aaa()"> <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;&a原创 2019-03-01 15:41:37 · 12475 阅读 · 5 评论 -
Vue Element table动态生成列,并赋值
//根据数据需求格式,完成数据过滤//pageData是数组,也是总数据,数据要求=> 类型:数值//ChartsTabData 是分类的数组,你总共有哪类HTML------<el-table :data="pageData" border style="width:100%;margin-top:20px" v-loading="tableLoading"> ...原创 2019-03-20 18:53:35 · 18014 阅读 · 1 评论 -
Vue Echarts通过v-if来控制图表切换的问题
Vue调用Echarts做数据统计是常态,为了更好地看出效果,通常会会出现柱状图,折线图之间的切换v-if 切换后图表无数据的问题v-if 之有条件满足才会渲染!!!这里图表作为模板引入的,先展示的折线图,故此柱状图为false,当切换时,柱状图无数据,是因为DOM结构生成是有时间差的,可以通过 this.$nextTick()方法解决...原创 2019-03-20 19:19:20 · 6541 阅读 · 0 评论 -
VsCode卸载删除插件及文件残留
快捷键 win + R打开运行 %appdata% 回车删除当前目录下的 Code 和 Visual Studio Codewin + R 输入 %userprofile% 回车删除当前目录下 删除 .vscode 文件夹原创 2019-09-12 10:37:03 · 11286 阅读 · 0 评论 -
vue-cli本地环境代理设置
vue-cli本地环境API代理设置及解决跨域1.这里说一下http跟https的代理是存在一定差异的,若是代理的是htpps的请在proxyTable下添加两个参数pathRewrite: { //避免出现找不到路径,给予一个标识(类似于导盲犬) '^/letuadmin': ''}, secure: false, ...转载 2018-09-19 12:02:08 · 868 阅读 · 0 评论