随笔分类 - Vue.js
摘要：之前项目超时判断是后台根据token判断的,这样判断需要请求接口才能得到返回结果,这样就出现页面没有接口请求时还可以点击,有接口请求时才会退出 现在需要做到的效果是:页面超过30分钟未操作时,无论点击页面任何地方都退出到登录页 代码app.vue <template> <!-- 添加点击事件 -->
阅读全文
摘要：为了图片安全性,有时候上传图片后后台不会直接返回图片地址,会返回文件流的数据格式,这种格式需要处理下才能展示在页面上 // 使用axios请求上传接口 axios({ method: 'get', url: url, // 请求地址 responseType: 'blob' // 设置接收格式为bl
阅读全文
摘要：使用vue-cli搭建的项目,启动报错 You are using the runtime-only build of Vue where the template compiler is not available. 解决方法 在vue.config.js文件中配置 再次启动就OK了
阅读全文
摘要：有时候用element-ui el-cascader级联选择器添加分类时会遇到最多添加几级的限定.看了文档,只要给需要禁止选择的选项添加disabled属性就可以.但是使用一层一层循环遍历数据感觉很麻烦,自己写了个遍历的方法,纪录下,方便以后使用 贴代码 cascader.vue<template>
阅读全文
摘要：最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/viewerjs 在git上看了下,有很多功能,不过我的项目只需要做个图片旋转功能,引入这个组件感觉大材小用
阅读全文
摘要：最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion包 npm i image-conversion --save template <template
阅读全文
摘要：需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法: 需求: 点击复制按钮,复制一个链接 在GitHub上找到一个clipboard组件,功能比较齐全 使用方法: 安装 npm i clipboard --save HTML <template
阅读全文
摘要：效果图: 我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnify"> <!-- 左边产品图片区域 --> <div class="left_contaner"> <div class="midd
阅读全文
摘要：进度条效果: 话不多说,上代码 使用css动画实现,看到一篇博客的启发,稍微修改了下, css实现的原理是用两个半圆一开始隐藏,再分别旋转180度,最后成为一个整圆 半圆效果,一开始右边的半圆在盒子左边 加上动画,实现右边进度条效果 代码: <div class="container"> <!--
阅读全文
摘要：最近写项目遇到一个需求,根据后台给的地址生成二维码,在网上找了下,qrcodejs2使用还是比较多,试了下也能实现需求,就整理下使用方法,方便以后使用 1. 安装包 cnpm i qrcodejs2 -S 2. 项目中使用 HTML: !-- 二维码弹框 --> <!-- 我的二维码是在弹框里,使用
阅读全文
摘要：vue-cli从2.x版本升级到3.x版本卸载包报错. 根据官网的指令输入: yarn global remove vue-cli 报错: error This module isn't specified in a package.json file.info Visit https://yarn
阅读全文
摘要：vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的过渡.加入过渡效果可以使元素的展示和隐藏更自然. 如果在vue中使用了<transition></transition>标签,vue会检测是否有应用
阅读全文
摘要：vue提供的混入对象mixin,类似于一个公共的组件,其他任何组件都可以使用它.我更经常的是把它当成一个公共方法来使用 在项目中有些多次使用的data数据,method方法,或者自定义的vue指令都可以放到mixin中,引入到各自的组件就可以使用,非常方便.这里写一下局部的混入组件使用,不建议在项目
阅读全文
摘要：表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果 HTML: <div class="table_box"> <el-button type="primary" class="submit_btn" @click="addTable">添加<
阅读全文
摘要：自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来 先看下项目的目录,这是用vue-cli生成的一个vue项目,主要是需要配置axios和写接口数据mock.js 首先需
阅读全文
摘要：这个组件是在一个githup项目上增加了一些功能 原项目地址:https://github.com/tower1229/Vue-Tree-Chart 建议把整个安装包下载下来,写成组件使用.这样方便定制自己的业务需求 原项目效果图 修改后效果图,主要是增加了添加,编辑,删除功能.以及样式上的修改 添
阅读全文
摘要：vue项目中,HTML页面打印功能.在项目中,有时需要打印页面的表格, 在网上找了一个打印组件vue-print-nb 本博客源码: https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com
阅读全文
摘要：使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <div class="image_tofile" ref="imageTofile"> <!-- 这里放需要截图的元素,自
阅读全文
摘要：在使用element表格合并后,发现鼠标只有移入第一个合并行时,合并的部分会高亮,移入其他行,不会高亮,这样效果看起来不是很好.查看了文档也没有直接的解决方法,就通过现有的方法处理了一下,解决了hover的问题 因为实际使用时,表格数据都是后台返回的,所以这里就只写一下后台动态返回的数据设置hove
阅读全文
摘要：element-UI里的table表格与多选框CheckBox的组合很常用,官网也给了很多参数,自己总结了一下,方便日后使用 本博客源码: https://github.com/shengbid/vue-demo 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个
阅读全文
浙公网安备 33010602011771号