vue
gardeniahui
这个作者很懒,什么都没留下…
展开
-
vue 实现锚点和滚动高亮效果
锚点和滚动高亮效果原创 2022-11-21 14:06:17 · 733 阅读 · 1 评论 -
前端生成图片
前端生成图片原创 2022-06-09 16:09:47 · 1046 阅读 · 0 评论 -
element el-select 数据太多导致卡顿解决方案
element el-select 数据太多导致卡顿解决方案原创 2022-06-02 20:00:17 · 1598 阅读 · 0 评论 -
几种常见的JSON数据格式化
一、格式化化后不可修改 <pre>{{ JSON.stringify(inputData, null, 4) }}</pre> <!--格式化json数据,inputData为json对象-->二、格式化后可修改数据 方式1:<template> <div class="content"> <el-button type="primary" size="mini" ...原创 2020-12-10 15:59:52 · 5512 阅读 · 0 评论 -
树形格式化显示JSON数据
有时我们需要在页面上展示json数据,如果直接显示出来效果不太好。下面演示如何在Vue.js项目中创建一个专门的Json数据格式化组件,并使用它进行展示。1,效果图(1)JsonView组件会自动对JSON数据进行格式化显示,同时具有语法高亮效果。(2)同时点击节点头部的三角箭头,还可以对该节点进行展开、折叠操作。2,组件代码(JsonView.vue)<template> <div class="bgView"> <di...原创 2020-12-10 15:15:46 · 1471 阅读 · 1 评论 -
vue的根文件main.js里的created和mounted执行两次(vue-wechat-title 动态设置网页标题造成加载两次)
有时项目需要设置标题,要是不设置的话展示的是访问的地址。未改前:最近的一个项目搭建的时候由于需要去监听路由并存储到本地。发现每次切换、刷新页面的时候都会出现加载三次的情况。bug处理:既然出现了问题,那么怎么解决呢?首先百度、google了一下vue多次加载mainjs和如何加载的问题。发现没有什么实际性作用。项目打包后在服务器预览也是没有任何问题。另外将谷歌开发者模式关闭手机模式后,通过网页预览,点击也是没有任何问题。在确保mainjs中的内容无误的情况下,去查看了app.vue,如下图:原创 2020-06-19 20:23:26 · 3437 阅读 · 0 评论 -
使用预渲染提升页面加载速度
弱网环境下,预渲染能更快地呈现页面内容,减少页面可见时间。Prerender SPA Pluginprerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此,该插件限定了你的单页应用必须使用 webpack 构建,且它是框架无关的,无论你是使用 React 或 Vue 甚至不使用框架,都能用来进行预渲染。prerender-s...原创 2020-03-25 14:27:25 · 662 阅读 · 0 评论 -
高度不足一屏时满屏设置同一颜色
当页面高度不足一屏时我们又需要设置统一颜色时可做如下处理:.login-contain margin: 0 auto width: 750px background: #fff box-sizing: border-boxmatchHeight() { let dh = document.documentElement.offsetHeight; let app...原创 2019-09-17 14:47:02 · 171 阅读 · 0 评论 -
H5进入后台运行导致定时器不能用的问题
当用户需要发短信时就用到了倒计时的功能,这时就要用到循环定时器setInterval(),但是当用户切换到后台运行时定时器就停止了运行,于是考虑使用系统时间来实现这个功能。var count = '';var timer = null;showTime() { var oldTime = new Date().getTime() / 1000; const TIME_COUNT...原创 2019-08-21 09:39:07 · 2645 阅读 · 0 评论 -
Vue.js项目更换皮肤,同时支持多套皮肤
需求改一些操作按钮的颜色方案一:1. 首先在main.js中引入公共css样式 import './assets/common/css/btnStyle.css';2. 对应的css样式.blueBtn{ background: #0074ff}.pinkBtn{ background: #ff4b4b}.yellowBtn{ background...转载 2019-05-06 14:28:33 · 1343 阅读 · 0 评论 -
vue项目开启Gzip压缩和性能优化
vue项目开启gzip自拍压缩和部署 nginx开启gzip优化性能1. 在vue项目中安装依赖(因为存在版本兼容问题,所以使用版本1.1.11):npm install --save-dev compression-webpack-plugin@1.1.112. 开启Gzip压缩:将config/index.js文件夹下的productionGzip改为true3. 开启 ngi...原创 2019-05-06 10:35:31 · 811 阅读 · 0 评论 -
vue-router总结
router-link router-link标签用于页面的跳转。 <router-link to="/01">to01</router-link> 点击这个router-link标签router-view就会渲染路径为/page01的页面。 注意:router-link默认是一个a标签的形式,如果需要显示不同的样子,可以在router-link标签...原创 2018-07-09 13:04:53 · 139 阅读 · 0 评论 -
vue项目中,使用默认图片替代异常图片
web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。使用require将图片进入,写法如下: data() { return { ...原创 2018-07-11 18:50:45 · 1216 阅读 · 0 评论 -
浅谈vue2.0设置网页title
Vue是单页面应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。推荐使用vue-wechat-title插件下载安装插件依赖 npm install vue-wechat-title --save在main.js...原创 2018-07-10 16:50:43 · 680 阅读 · 0 评论 -
vue2.0 px与rem转换问题
由于我们拿到的产品图标注都是px为单位的,为了不去计算px与rem的转换,我们使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值,这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦1、安装插件npm i postcss-px2rem --savenpm install px2rem-loader --save2、配置px2rembuild目录下vue...原创 2018-07-17 19:19:34 · 940 阅读 · 1 评论 -
如何去除vue项目中的 # --- History模式
使用vue-cli搭建的环境,在配置好路由之后,可以看到下面的情况: 但是不难发现#的出现真的很丑陋,并且也不知道这是什么作用? 所以就去Stack Overflow上搜索了,果然还有~ 看来Stack Overflow是真的强大,你在项目中遇到的问题实际上在so上都已经被问过并且解决了,这不: 这是最高票的回答,即在vue2中将mode模式设置为history,试过之后...转载 2018-07-11 18:54:41 · 301 阅读 · 0 评论 -
vue统一设置了背景色,单独改变某一页的背景色
有时我们会遇到单独改变某个组件的背景填充色,而我们已经在index.html中引入了公用的css样式(body中设置了背景色),由于单个组件没有body标签,于是要修改单个组件的背景色只需添加如下代码即可。beforeCreate () { document.querySelector('body').setAttribute('style', 'margin: 0 auto; widt...原创 2019-04-22 10:00:35 · 6280 阅读 · 0 评论 -
vue实现人民币金额过滤器
针对保留两位小数的数字进行过滤filters: { NumFormat: function (value) { if (!value) return '0.00'; var intPart = Number(value).toFixed(0); // 获取整数部分 var intPartFormat = intPart.toString().replace(/(\...原创 2019-05-08 11:17:46 · 3444 阅读 · 0 评论 -
vue解决安卓4.4不兼容的问题
虽然现在大部分情况下不用考虑兼容问题,pc和手机浏览器版本已经足够兼容vue,但是也有一些特殊情况需要做兼容处理,前几天我就碰到,电视机的安卓系统只有4.4,这样vue就不兼容了,因为不支持es6的语法。好在办法还是有的。1.npm安装npm install babel-polyfillnpm install es6-promise2.main.js中引入import 'b...转载 2019-05-06 09:37:15 · 1223 阅读 · 0 评论 -
vue 打包文件加版本号防止缓存文件不更新
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法:找到webpack .prod.conf.js 1.定义版本变量: const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ,也可以自己定义成别的如:1.1 2.修改要生成的js和cs...原创 2019-05-06 10:00:24 · 1807 阅读 · 0 评论 -
vue-cli build打包后CSS浏览器兼容前缀自动去除的问题
原本是很正常的一个兼容性渐变写法。 background: -webkit-linear-gradient(left top, #37c0f5, #1c6aff); background: linear-gradient(left top, #37c0f5, #1c6aff);结果npm run build项目时 background: linear-gradient(...原创 2018-07-08 16:09:28 · 354 阅读 · 0 评论