- 博客(28)
- 收藏
- 关注
RSS订阅原创 el-date-picker 禁用当前日期时间之前的选项
<el-date-picker type="datetime" v-model="transshipmentTime" placeholder="请选择" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" // 在这里配置 @change="handle" // 如果选择时间小于当前时间时，默认显示回当前时间/>data中tran.
2022-05-16 15:26:50
1298
原创 文件类型的转换
1.http图片转file getImageFileFromUrl(url, imageName, callback) { // imageName一定要带上后缀 var blob = null var xhr = new XMLHttpRequest() xhr.open('GET', url) xhr.setRequestHeader('Accept', 'image/jpeg') xhr.r
2022-03-03 11:17:02
273
原创 vue keep-alive移动端详情返回列表记录滚动条位置
移动端详情返回列表页时，记录滚动条位置，踩了不少坑之后，终于有效解决，特此记录要用到keep-alive缓存，及缓存时用到的activated和deactivated两个生命周期函数1:首页在App.vue和路由中配置keep-alive缓存 <div id="app"> <!--根据keepAlive，判断页面是否需要缓存--> <keep-alive> <router-view v-if="$route.meta.kee
2020-11-14 09:42:02
1383
原创 el-table自定义指令实现表格触底加载
新建directive.jsimport Vue from 'vue'// 自定义指令的格式，名字Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 0 cons
2020-10-26 13:45:50
1083
原创 js常用时间函数的封装
1、获取当前时间并整理成固定格式：兼容Mac调用方法：let today = fomatTime(new Date(), 'yyyy-MM-dd') // 2020-09-23function fomatTime (now, mask) { let d if (typeof (now) === 'string') { d = new Date(Date.parse(now.replace(/-/g, '/'))) } else { d = new Date(now)..
2020-10-23 08:43:43
180
原创 vue使用animate.css动效，并自定义动画时间
animate.css网址：http://www.animate.net.cn/1：安装，推荐安装3.7.2版本，最新版本的动画无效果，不清楚原因是什么npm install [email protected] --save2.在main.js中全局引入import animated from "animate.css"Vue.use(animated)3.在标签上加上animated及动画名称，亲测duratioin无效果，<div class="totalItem..
2020-10-14 10:55:40
2629
原创 vue注册全局组件，避免每个页面都引入一遍，以数字动画组件为例
当我们写了一个通用组件，用的页面较多时，可以注册为全局组件，直接调用，不必每个页面都import一遍。文件结构如下：countTo.vue是一个写好的数字动画的组件<template> <div class="countToComponents"> <count v-if="resetCount" :startVal='startVal' :endVal='endVal' :duration='2000'> </count>
2020-10-12 15:23:05
713
原创 vue移动端项目H5+扫码功能组件封装，可直接用
<template> <div class="scanQrcodeComponents"> <div id="bcid" v-show="show===0"></div> <div class="scanCode" @click="startRecognize"> <van-icon name="enlarge" class="scanImg"/> <div class="scanTe.
2020-09-30 08:50:43
1540
原创 百度地图点击marker换图标的两种方式
首先在页面把要替换的图标引入import newIcon from "../../../../static/image/startIcon.png"第一种方式：使用百度地图api，setIcon，简单两步就可以实现marker.addEventListener("click", function (event) { // 设置新的地图图标 let lightMyIcon = new BMap.Icon( newIcon, new BMap.Si
2020-09-27 17:59:07
3380
3
原创 pdfh5.js实现移动端简单预览
1.安装：npm install pdfh5 --save-dev2.引入：import Pdfh5 from "pdfh5"import "pdfh5/css/pdfh5.css"3.在data中绑定pdfh5：null4.写template<div class="pdf-container" v-show="pdfShow"> <div id="demo"></div></div>5.实例化：要注意pdf的地址不能跨.
2020-09-04 18:00:02
1033
5
原创 vue项目中移动端，pc端，实现pdf预览和分页
目前项目中，移动端和 PC端都有pdf预览的需求，个人建议PC端用vue-pdf，能很好地实现分页的效果，移动端建议用pdfh5.js，一次性加载，滑动查看，先记录下vue-pdf1.安装：npm install --save vue-pdf2.引入：import pdf from 'vue-pdf'components: {pdf}3.写template<div class="pdf" v-show="fileType === 'pdf'"> <p cl
2020-09-04 17:52:27
1908
原创 vue中调接口下载流文件的excel表
this.$axios({ method: 'post', url: `${config.proxy}/excel/out`, responseType: 'blob', // 接收格式设置 data: param // 参数 }) .then(res => { // console.log(res) ...
2020-05-26 15:14:46
493
原创 记录vue项目中用vue-socket.io实现实时通讯
1.安装：npm install vue-socket.io --save2.引入main.jsimport VueSocketIO from 'vue-socket.io'let vueSocketIo = new VueSocketIO({ debug: true, connection: 'http://106.75.105.96:18888'})// 监听connect事件，设置isSuccessConnect为truevueSocketIo.io.on('con.
2020-05-20 11:19:05
1174
原创 vue中封装一个axios拦截器，统一管理所有接口请求
1.下载安装axiosnpm install axios -S2.新建文件夹api，新建http.js文件3.在http.js文件中引入需要用到的库import axios from 'axios'import Vue from 'vue'4.创建拦截，配置接口路径，请求头// 配置接口路径const http = axios.create({ //baseURL: process.env.baseUrl, baseURL: 'http://192.168..
2020-05-14 10:39:46
496
原创 在vue中实现根据鼠标点击位置展示对应的内容
原理：获取鼠标点击的位置，动态地给div框赋宽高值1.给元素绑定动态样式style<div class="dialog_wrapper" v-bind:style="styleObject"></div>
2020-05-09 09:46:10
2765
1
原创 el-input点击添加一行和点击删除一行
原理：通过操作数据的增加和删除来操作1.外面包一层div，写一个循环的el-form-item <div v-for="(item, index) in attrArr" :key="index" > <!--prop属性一定要按这个规则来写--> <el-form-item label="属性值" :p...
2020-05-06 13:31:28
1171
原创 不点击图片，直接实现el-image的大图预览功能
el-image的大图预览功能是一个小组件image-viewer，它的props如下：props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: {...
2020-04-29 12:14:04
4670
6
原创 vue项目中使用自定义指令directive实现鼠标拖动功能
1.在util文件夹下新建directive.js文件import Vue from 'vue'// 自定义指令的格式，名字Vue.directive('drag', { bind (el) { let dragBox = el // 获取当前元素 dragBox.onmousedown = e => { // 算出鼠标相对元素的位置 ...
2020-04-29 11:31:55
343
原创 react生命周期的理解
组件的生命周期 1.什么是生命周期？ React的生命周期其实就是组件的生命周期，是指组件从创建到销毁的一整个过程。 分为三个阶段： 1.初始化期 2.存在期 3.销毁期 2.生命周期函数 在生命周期中每个阶段都有一些固定的函数，就叫生命周期函数，系统会在适当的时期自动执行，只...
2020-01-10 15:12:42
150
2
原创 react入门概念的理解
1.什么是React？ React是一个前端框架，来自于facebook，适合于大型项目，效率高，基于组件化的方式开发。 React是一个基于组件化开发的前端框架，是facebook于13年5月开始开源的一个框架，效率非常高， 适合于大型项目，用于制作单页面SPA应用。2.React环境搭建 1）传统<script>标签引入资源（适合初学者入...
2020-01-10 15:11:16
104
原创 elementui导航菜单高亮问题
1.在标签上设置 :default-active="defaultUrl"2.绑定到data中3.获取路由赋值给defaultUrl，可以直接赋值this.defaultUrl = this.$route.path也可以把路由进行拆分，取中间某个词赋值4.让el-menu-item标签中的 :index与defaultUrl值相同，任何情况下，高亮都是显示正常的...
2019-09-19 19:22:52
1231
原创 mock模拟get，post请求方式
1.模拟get请求//模拟get请求Mock.mock('/api/getGoods','get',{ status:200, message:'获取列表成功', //随机生成5-8条数据 'data|5-8':[{ id:'@increment()', //生成自增的id //'id|+1':1, //也是模拟自增的id name:'@cword(3,5)', ...
2019-09-02 16:09:10
8013
原创 vue 配置mockjs
1、下载安装mockjsnpm install mockjs2.在src目录下新建mock文件夹，在文件夹下新建index.js文件3.打开index.js，引入mockjsimport Mock from 'mockjs';定义mock，例如：Mock.mock('/api/getGoods','get',{ status:200, message:'获...
2019-09-02 14:08:18
216
原创 基于vue+elementui的省市区选择器插件v-distpicker
github地址： https://distpicker.pigjian.com/
2019-07-16 09:37:24
5290
1
原创 vue刷新页面丢失store中的数据
在App.vue中插入如下代码，created() { //解决刷新页面时丢失store中的数据问题 //在页面加载时读取sessionStorage里的状态信息 if(sessionStorage.getItem("store")) { this.$store.replaceState(Object.assign({}, this.$store.state, JS...
2019-07-16 09:34:11
329
原创 vue-cli2脚手架初始化项目
一、安装node.js下载路径：http://nodejs.cn/download/ 一路下一步就好检查是否安装成功 node -v npm-v二、vue-cli 脚手架安装地址栏输入cmd执行命令 npm install -g vue-cli如果是vue-cli3，则执行npm install -g @vue/cli三、初始化项...
2019-07-12 18:11:46
315
原创 Duplicate keys detected: '总览'. This may cause an update error.
在使用vue时出现以下错误原因：v-for循环里，key值可能重复了，所以会报这个错。解决方法：找到使用v-for的地方，修改成如下：
2019-07-12 14:31:12
708
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人