vue 技术整理
vue 技术整理
@本宫微胖@
菜鸟一枚,分享经验
展开
-
手机APP内嵌H5上传文件问题
手机兼容性问题理想很丰满,现实很骨感。实际上由于手机平台兼容性问题,上面这套流程并不能全都支持。所以需要根据兼容性判断。经过试验发现:1.部分安卓微信浏览器无法触发onchange事件(第一步就特么遇到问题)这其实安卓微信的一个遗留问题。 查看讨论 解决办法也很简单:input标签 <input type=“file" name=“image” accept="image/gif, image/jpeg, image/png”>要写成就没问题了。2.部分安卓微信不支持原创 2021-11-25 16:24:50 · 2322 阅读 · 0 评论 -
【无标题】
Window.print()方法之前的打印功能,使用的是Window对象,print()方法用于打印当前窗口的内容。所以在vue代码中,我们需要做如下处理:首先,根据div标签ID拿到div中的局部内容。其次,把获取的 局部div内容赋给body标签, 相当于重置了 body里的内容。接着,调用打印功能。最后,重新给页面内容赋值。这样,通过id选择器来替换内容打印,再结合之前的分页打印,去掉页眉页脚文档,从而实现分页打印的功能。弊端:当调用该方法时.原创 2021-11-25 16:22:55 · 97 阅读 · 0 评论 -
Element UI - 打开弹出框(el-dialog)页面会抖动是什么原因
看一下页面的样式,发现 body 多了样式:padding-right: 5px 和 overflow: hidden。紧接着我就在全局设置 body 的 padding-right: 0 !important 就好了~原创 2021-11-25 16:07:25 · 478 阅读 · 0 评论 -
Jsonp在vue中的使用
Jsonp在vue中的使用安装插件: 在package.json中的dependencies中加入"jsonp":"^0.2.1" 2:npm install 即可。2:在工程utils中新增文件:jsonp.js,封装jsonp:3:在需要用到jsonp请求的api文件中进行调用。注意:这里的 "callback" ,和调用的 jsonp 的 url 中的 callback 值相对应。.vue文件中的使用:...原创 2021-11-25 16:01:01 · 1671 阅读 · 0 评论 -
HTML转Canvas工具 前端生成图片工具 屏幕快照 html2canvas 下载 或上传至服务器 使用方法
HTML转Canvas工具 前端生成图片工具屏幕快照 html2canvas 下载 或上传至服务器 使用方法 <!-- 如果需要显示照片--> <!-- <img :src="htmlUrl"> --><div class="app-container " ref="imageTofile" > <!-- 会把这一部分的图截下来 用ref 指引 --></div><button @click="toImage原创 2021-01-29 12:05:49 · 17885 阅读 · 1 评论 -
大屏可视化方案设计
原创 2020-12-03 17:28:30 · 17662 阅读 · 0 评论 -
vue-picture-preview 插件的使用
安装依赖:npm install vue-picture-preview --save.vue文件中引用:import vuePicturePreview from ‘vue-picture-preview’Vue.use(vuePicturePreview).html文件中router-view标签后引入:.vue文件中应用: 说明:v-preview:存放预览后大图的路径;preview-t..原创 2020-12-03 17:00:28 · 17688 阅读 · 0 评论 -
Element UI - 打开弹出框(el-dialog)页面会抖动是什么原因?
Element UI - 打开弹出框(el-dialog)页面会抖动是什么原因?然后我看了一下页面的样式,发现 body 多了样式:padding-right: 5px 和 overflow: hidden。紧接着我就在全局设置 body 的 padding-right: 0 !important 就好了~...原创 2020-12-03 16:58:33 · 18956 阅读 · 0 评论 -
vue项目实现国际化方案
报道指挥实现国际化方案目标:实现报道指挥多语言切换功能(直接通过网页链接获取参数切换中英文)。采用方式:使用国际化插件vue-i18n,同时需要手动编写语言(即:将项目中所有文字全部提出,增加其文字版本)。1. 安装依赖npm install vue-i18n2. 定义模板并编写语言包在项目中创建目录:i18n其目录存在于 src 目录下,与module目录并级。langs:目录存放语言文件。index.js 配置引用语言的关键字。 cht.js 繁体语言包。 zh.js 中文语言包。原创 2020-12-03 16:51:09 · 22127 阅读 · 0 评论 -
nginx 部署 vue 项目找不到js css文件的解决方法
很多时候npm run build之后,index.html文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件。vue-cli@3在 vue-cli@3 中你需要为你 webpack 插入到index.html中 的所有文件添加一个baseUrl. 你需要在项目的根目录新建一个vue.config.js, 添加如下内容:...module.exports = { baseUrl: isProd ?...原创 2020-06-24 13:12:18 · 22342 阅读 · 0 评论 -
npm i 问题 npm install 问题 cnpm i cnpm install 问题 处理方法
先清除缓存,npm cache clean -f然后继续npm i 或 npm install 或 cnpm i 或 cnpm install如果还不好,就把package-lock.json 删除 ,多半是版本冲突问题删除以后,继续npm i 或 npm install 或 cnpm i 或 cnpm install多半都会好的...原创 2020-06-19 10:28:01 · 19020 阅读 · 0 评论 -
ant-design-pro-vue-master 去掉权限 及配置
ant-design-pro-vue-master 去掉权限 及配置基于 Ant Design of Vue 实现的 Ant Design Pro。非常完善的开发后台系统,前台系统的代码样例。github地址:https://github.com/sendya/ant-design-pro-vue项目预览地址:https://preview.pro.loacg.com/user/logi...原创 2020-04-24 15:40:25 · 20057 阅读 · 0 评论 -
最新版的 vue-element-admin的跨域问题 改变 vue.config.js 不需要安装webpack,自带了一个
步骤1:修改vue.config.js步骤2:修改默认的API步骤3:如果接口的返回值与这个设定不一样,注释它步骤4:写接口步骤5:调用接口原创 2020-04-16 14:49:56 · 19226 阅读 · 1 评论 -
vue项目中 页面生成pdf并下载,vue 中页面转PDF
第一步、安装插件// 第一个.将页面html转换成图片npm install --save html2canvas// 第二个.将图片生成pdfnpm install jspdf --save 定义全局函数,创建一个htmlToPdf.js文件在指定位置.// 导出页面为PDF格式import html2canvas from "html2canvas"import JSPDF ...原创 2020-04-09 16:11:35 · 19236 阅读 · 1 评论 -
vue 导出html
<template><div class="contentsss" ref="test"><button @click="export2Excel">导出</button></div></template>export2Excel() {var a = document.createElement("a");v...原创 2020-04-09 15:53:57 · 18109 阅读 · 0 评论 -
滚动条样式修改
.left::-webkit-scrollbar{/*滚动条整体样式*/width:5px;/*高宽分别对应横竖滚动条的尺寸*/height:1px;}.left::-webkit-scrollbar-thumb{/*滚动条里面小方块*/border-radius:10px;box-sh...原创 2020-03-10 16:29:46 · 17703 阅读 · 0 评论 -
elementUi switch 文字显示
效果:官方:<el-switchv-model="hasOuters"class="switchStyle"active-color="#13ce66"active-text="内"...原创 2020-03-10 16:02:09 · 20888 阅读 · 2 评论 -
vue-cli项目搭建步骤详解
vue-cli项目搭建步骤详解使用vue webpack 模板搭建项目步骤:1. 安装 node.js(npm),因为会用到npm包管理工具下载项目依赖等2. 安装 webpack: npm install webpack -g3. 安装 vue-cli: npm install vue-cli –g4. 通过vue-cli,初始化vue项目: vue init webpack...原创 2020-03-01 19:04:22 · 20526 阅读 · 0 评论 -
vue-element-admin 中文 完整项目实例
项目运行地址:https://panjiachen.github.io/vue-element-admin/#/login项目地址:https://github.com/PanJiaChen/vue-element-admin项目地址:(国际化)https://github.com/PanJiaChen/vue-element-admin/tree/i18n项目介绍:https://p...原创 2020-03-01 18:59:32 · 24542 阅读 · 0 评论 -
vue 实现预览缩率图,点开是原图的插件 vue-picture-preview 使用
1. 安装依赖: npm install vue-picture-preview --save2. .vue文件中引用: import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)3. .html文件中router-view标签后引入: <lg-pr...原创 2020-03-01 17:56:41 · 18770 阅读 · 0 评论 -
vue 引用百度地图插件 Vue Baidu Map
插件:Vue Baidu Map安装:npm install vue-baidu-map --save难点:1:地图的引用2:地图上标记点的画法3:消息窗体的自定义画法4:自带的点显示的窗体的屏蔽全局注册:import Vue from 'vue'import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {...原创 2020-03-01 17:52:29 · 23767 阅读 · 1 评论 -
vue 无线滚动插件,
npm install vue-seamless-scroll –saveimport Vue from 'vue'import scroll from 'vue-seamless-scroll'Vue.use(scroll)//or you can set componentName default componentName is vue-seamless-scrollVu...原创 2020-03-01 17:45:08 · 20692 阅读 · 0 评论 -
less用法简单介绍
1、官方介绍Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。Less是一门动态CSS语言,使得CSS样式更加灵活地作用于Html标签。试想如果没有Less,我们要对样式做一些逻辑计算的时候只能依靠Js去实现,有了Less之后,可以方便地动态给H...原创 2020-03-01 11:13:41 · 17988 阅读 · 0 评论 -
vue 项目实现省市县级联效果
省市县级联效果选择插件:element-china-area-data,方便快捷。 安装插件:npm install element-china-area-data -S(如果该命令安装失败,则将-S去掉。) 在项目中引入该插件:import{provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlu...原创 2020-03-01 11:09:16 · 20080 阅读 · 0 评论 -
Vue.js基础知识整理
一、起步1、v-model(绑定数据)2、v-for(循环)3、v-on(绑定事件)4、data(数据)5、methods(方法)6、$index(索引)二、概述1、data(绑定 DOM 文本到数据)2、v-if(不满足条件的话则不会出现在dom中)3、v-show(不满足条件,则样式会设置成隐藏 display:none;)4、组件eg:<div id="ap...原创 2020-03-01 11:04:28 · 17689 阅读 · 0 评论 -
iconfont多色图标的使用方法
iconfont多色图标的使用方法Symbol 引用:支持多色图标了,不再受单色限制。1:去这里下载图片的相关文件https://www.iconfont.cn,具体步骤如下:2:在本地项目中引入import './icon/iconfont.js'1或者<script src="./iconfont.js"></script>...原创 2020-03-01 10:50:53 · 22150 阅读 · 0 评论