随笔分类 - Vue
摘要：使用swiper插件实现图片预览总是有这样那样的问题，这次用element自带的组件 方便 快捷 好用！ 要实现的功能如下： 功能1 功能2 都是需要大图预览 使用的方法不一样 功能1：使用element UI自带的大图预览 项目代码如下： <div v-if="picNum > 0"> <el-d
阅读全文
摘要：最近做项目有个需求：vue pc端需要嵌套移动端页面 涉及到将px转化为rem来实现移动端的适配问题，两步解决！绝绝子教你哈 1.index.html页面放入：px转rem公共的方法 (function () { function resizeBaseFontSize() { var rootHtm
阅读全文
摘要：普通传参格式如下： 想要的formData参数格式如下： 首先封装参数（对象）转换为formData格式 getFormData(object) { const formData = new FormData(); Object.keys(object).forEach(key => { const
阅读全文
摘要：需求：文章添加分享功能（包括微信、微博、QQ空间） 如下图所示： 点击图标分别跳转到如下界面：（实现效果如下） 话不多说直接代码（可以封装成组件） <template> <div class="shareBox"> 分享到： <span class="hover-pointer" @click="s
阅读全文
摘要：1.下载 npm install qrcode --save-dev 2.引入（在所需要的页面中引入） import QRCode from “qrcode”; //引入生成二维码插件 3.生成二维码 <canvas id="QRCode_header" style="width: 280px; h
阅读全文
摘要：项目需求：到截止日期一些功能不可以再使用，那么需要判断当前时间与截止时间进行比较，记录一下吧 注意： 1.橙色字体的代码换成你自己的变量 2. .valueOf()其实就是将中国时间转为时间戳 3.截止时间要加上 " 23:59:59" 4.开始时间要加上 " 00:00:00" // 当前时间 l
阅读全文
摘要：举例：只能选今天或者今天之后的时间（如下图） <el-date-picker clearable v-model="form.limitTime" type="date" :readonly="isDetail" value-format="yyyy-MM-dd" :picker-options="
阅读全文
摘要：代码如下： router.afterEach((to, from, next) => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }); 作者：微微一笑绝绝子出处：https://www.cnblogs
阅读全文
摘要：直接上代码： //多图表自适应 window.addEventListener("resize", function () { myChart.resize(); }); 作者：微微一笑绝绝子出处：https://www.cnblogs.com/wwyxjjz/p/16350879.html本博客文
阅读全文
摘要：1.安装 npm install echarts --save package.json中有此项，代表安装成功（注意自己的版本） 2.引入全部组件 在main.js中引入： // 引入echarts import echarts from 'echarts' Vue.prototype.$echar
阅读全文
摘要：报错如下： 查了很久，最终发现是这里的问题 解决如下： 上代码： itemStyle: { // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { // offset: 0, // color: "#348fe6", // },
阅读全文
摘要：想要的效果如下 ： 高德地图 && 信息窗体 步骤一： 申请高德key 高德开放平台 | 高德地图API (amap.com) （可参考博客： [996]如何申请高德地图用户Key_周小董的博客-CSDN博客_高德开发者平台申请key） 步骤二： npm安装 npm install vue-amap
阅读全文
摘要：效果如下： 代码如下： <div class="flex"> <p :class="{'active' : curTop == index}" class="tc text-18 hover-pointer" v-for="(item, index) in topTab" :key="index"
阅读全文
摘要：:style="{'backgroundImage': 'url(' + item.img + ')'} 作者：微微一笑绝绝子出处：https://www.cnblogs.com/wwyxjjz/p/15935847.html本博客文章均为作者原创，转载请注明作者和原文链接。
阅读全文
摘要：目前多个图片是这样的: 想要的效果：轮播 + 预览 （一次轮播一张） 1.首先要下载swiper 备注:swiper 的坑 坑1 以前只需要安装vue-awesome-swiper就够了 现在需要weiper一起安装才行 坑2 按官网教程操作后vue会报错 找不到swiper.css 因为版本不同
阅读全文
摘要：1.全局引入 Vue.mixin({ methods: { setData: function (obj, callback) { let that = this let keys = [] let val, data Object.keys(obj).forEach(function (key)
阅读全文
摘要：想要的效果：（时间动态显示） 1.在data中定义一个变量，存储时间 2.创建一个文件放入封装好的js --主要是使用定时器，每秒调用，最后清除定时器 export function formatDate(date) { // 格式化时间为 YYYY-MM-DD HH:MM:SS var year
阅读全文
摘要：项目npm run dev报错如下： 解决方法： 尝试用 ::v-deep 替换 /deep/ ，成功解决了问题。 效果如下图所示(完美解决~) 某些预处理器（例如Sass）可能无法>>>正确解析。 在这些情况下，可以用/deep/ 如果/deep/报错，可以使用::v-deep 组合器-两者都是它
阅读全文
摘要：前面写过一版Vue Elements手机号校验（https://www.cnblogs.com/wwyxjjz/p/15137394.html） 除IE外的其他浏览器都没有问题，IE不兼容怎么办呢？当然是有办法解决的啦~~ 首先你要知道"InvalidCharacterError（无效字符错误）"
阅读全文
摘要：这次绝绝子要放大招了 。。。 地图点线面默认效果： 想实现的效果： 功能一：点线面渲染数据 功能二：点、线段、面积 坐标及图形颜色 跟左侧图例保持一致 功能三：选择（右下）自定义样式 改变地图背景颜色（切换主题色） 后台返回数据格式如下： 实现功能一： 1.模拟数据代码如下（将这段代码直接放进项目
阅读全文
