- 博客(25)
- 收藏
- 关注
RSS订阅原创 css实现时间线
效果：</div></li></ul>margin: 0;.tail {left: 0;.node {left: -2px;width: 6px;.wrapper {top: -6px;left: 8px;.times {.cont {
2024-03-18 10:36:58
599
原创 几种常见的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
5445
原创 树形格式化显示JSON数据
有时我们需要在页面上展示json数据，如果直接显示出来效果不太好。下面演示如何在Vue.js项目中创建一个专门的Json数据格式化组件，并使用它进行展示。1，效果图（1）JsonView组件会自动对JSON数据进行格式化显示，同时具有语法高亮效果。（2）同时点击节点头部的三角箭头，还可以对该节点进行展开、折叠操作。2，组件代码（JsonView.vue）<template> <div class="bgView"> <di...
2020-12-10 15:15:46
1351
1
原创 vue的根文件main.js里的created和mounted执行两次（vue-wechat-title 动态设置网页标题造成加载两次）
有时项目需要设置标题，要是不设置的话展示的是访问的地址。未改前：最近的一个项目搭建的时候由于需要去监听路由并存储到本地。发现每次切换、刷新页面的时候都会出现加载三次的情况。bug处理：既然出现了问题，那么怎么解决呢？首先百度、google了一下vue多次加载mainjs和如何加载的问题。发现没有什么实际性作用。项目打包后在服务器预览也是没有任何问题。另外将谷歌开发者模式关闭手机模式后，通过网页预览，点击也是没有任何问题。在确保mainjs中的内容无误的情况下，去查看了app.vue,如下图：
2020-06-19 20:23:26
3296
原创 使用预渲染提升页面加载速度
弱网环境下，预渲染能更快地呈现页面内容，减少页面可见时间。Prerender SPA Pluginprerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此，该插件限定了你的单页应用必须使用 webpack 构建，且它是框架无关的，无论你是使用 React 或 Vue 甚至不使用框架，都能用来进行预渲染。prerender-s...
2020-03-25 14:27:25
631
原创 高度不足一屏时满屏设置同一颜色
当页面高度不足一屏时我们又需要设置统一颜色时可做如下处理：.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
153
原创 H5进入后台运行导致定时器不能用的问题
当用户需要发短信时就用到了倒计时的功能，这时就要用到循环定时器setInterval(),但是当用户切换到后台运行时定时器就停止了运行，于是考虑使用系统时间来实现这个功能。var count = ''；var timer = null；showTime() { var oldTime = new Date().getTime() / 1000; const TIME_COUNT...
2019-08-21 09:39:07
2475
原创 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
3400
转载 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
1321
原创 vue项目开启Gzip压缩和性能优化
vue项目开启gzip自拍压缩和部署 nginx开启gzip优化性能1. 在vue项目中安装依赖（因为存在版本兼容问题，所以使用版本1.1.11）：npm install --save-dev [email protected]. 开启Gzip压缩：将config/index.js文件夹下的productionGzip改为true3. 开启 ngi...
2019-05-06 10:35:31
780
原创 vue 打包文件加版本号防止缓存文件不更新
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法：找到webpack .prod.conf.js 1.定义版本变量： const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1 2.修改要生成的js和cs...
2019-05-06 10:00:24
1720
转载 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
1146
原创 邮箱正则表达式
找了一些门户网站的邮箱格式：新浪：4-16个字符，可使用英文小写、数字、下划线，下划线不能在首尾。搜狐：4-16位，数字、小写字母、点、减号或下划线，小写字母开头。腾讯：由3-18个英文、数字、点、减号、下划线组成。网易：6~18个字符，可使用字母、数字、下划线，需以字母开头。谷歌：您可以使用字母、数字和英文句点，请勿使用除字母 (a-z)、数字和英文句号外的其他字符。央视：6...
2019-04-24 14:24:29
9550
原创 vue统一设置了背景色，单独改变某一页的背景色
有时我们会遇到单独改变某个组件的背景填充色，而我们已经在index.html中引入了公用的css样式（body中设置了背景色），由于单个组件没有body标签，于是要修改单个组件的背景色只需添加如下代码即可。beforeCreate () { document.querySelector('body').setAttribute('style', 'margin: 0 auto; widt...
2019-04-22 10:00:35
6224
转载 微信小程序使用icon图标
项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步：下载需要的字体图标第二步：转换ttf文件进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式。流程如下：点击下载，得到转换后的压缩包，名为transfonter...
2018-09-04 17:15:08
3992
原创 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
893
1
转载 如何去除vue项目中的 # --- History模式
使用vue-cli搭建的环境，在配置好路由之后，可以看到下面的情况： 但是不难发现#的出现真的很丑陋，并且也不知道这是什么作用？ 所以就去Stack Overflow上搜索了，果然还有~ 看来Stack Overflow是真的强大，你在项目中遇到的问题实际上在so上都已经被问过并且解决了，这不： 这是最高票的回答，即在vue2中将mode模式设置为history，试过之后...
2018-07-11 18:54:41
282
原创 vue项目中，使用默认图片替代异常图片
web项目中经常需要展示图片，很可能就会碰到图片地址无效的情况，比如图片地址不对，或者后台拿到图片地址后，该地址无效，或者数据库中没有该图片等情况。这时候，图片就会显示一个叉。 对于项目中出现的这种情况，我们也可以不做处理，但是比较影响美观，所以我们都会使用一个默认的图片来代替图片原来的地址。使用require将图片进入，写法如下： data() { return { ...
2018-07-11 18:50:45
1187
原创 浅谈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
641
原创 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
118
原创 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
326
原创 css布局
一、静态布局（static layout） 1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。2、设计方法 PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在...
2018-07-05 17:41:35
348
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人