- 博客(42)
- 收藏
- 关注
RSS订阅原创 关于el-tree的一些处理
// 给树设置某个节点禁用 addAttr(data, id) { data.forEach(item => { if (item.adCode == id) { this.addAttrChildrens(item); } else { if (item.childAddress &&...
2022-02-25 17:13:51
1630
1
原创 elementui时间选择器进行时间限制
html部分<el-form-item label="作品完成日期" prop="complete_date"> <el-date-picker v-model="ruleForm.complete_date" type="date" placeholder="作品完成日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions2".
2021-10-22 11:03:57
321
转载 reduce的一些用法
一、 reduce定义reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。注意:reduce() 对于空数组是不会执行回调函数的。二、语法array.reduce(function(prev, cur, index, arr), init)prev （上一次调用回调返回的值，或者是提供的初始值（initialValue）） cur （数组中当前被处理的元素） in.
2021-08-17 17:04:42
13669
2
原创 vue中平时可能会遇到的过滤器（便于后续使用）
exports.getGender = val => { let gender = ""; switch (val) { case 0: { gender = "男"; break; } case 1: { g
2020-09-25 14:47:36
215
原创 vue通过路由跳转，页面刷新问题
Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可具体操作：html<router-view :key="key"></router-view>jscomputed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() }}即可实现刷新
2020-09-25 14:39:12
927
转载 获取url中参数的值
1，方法封装，只需要传url参数的名称，即可得到对应的参数值function getUrlParam(name) { //构造一个含有目标参数的正则表达式对象 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //匹配目标参数 var r = window.location.search.substr(1).match(reg); if(r != null){ re
2020-06-05 15:28:18
669
原创 vue项目中使用js-cookie存储数据
说明js-cookie是一个简单的，轻量级的处理cookies的js API。创建//创建简单的cookieCookies.set('name', 'value');//创建有效期为7天的cookieCookies.set('name', 'value', { expires: 7 });//为当前页创建有效期7天的cookieCookies.set('name', 'value'...
2020-04-30 16:19:35
3514
原创 axios封装即用
axios封装代码，拿来即用，为以后使用方便http.js文件import axios from 'axios';const baseUrl = 'https://xxx.xxxxxx.com';// const baseUrl = 'http://localhost:9227';// axios 拦截器axios.interceptors.request.use(config =...
2020-04-22 16:35:12
179
转载 阿里云OSS 图片处理
首先放个阿里云OSS图片处理接口文档 阿里云官方地址oss图片处理接口文档我们有时会抱怨用户上传的图文中图片文件大了（假如说3M的图片）。导致生成的网页打开速度慢，怎么办呢？问题分析：网页打开慢是因为网页资源下载的那张图片下载慢。只要能够改变用户上传的大小就能解决这个问题。方案一： 限制用户上传文件的大小？1、使用的用户并不懂程序，限制了大小用户是否会觉得体验感不好？方案二：图片上传后...
2020-04-22 16:19:24
1619
原创 vue中使用oss直传图片到阿里云
1.引入在index.html中引入 <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>2.上传我使用的是vant组件中的图片上传组件<van-uploader v-model.trim="item.fileList" :after-rea...
2020-04-22 16:02:08
1530
2
转载 前端面试的东西
一、算法1.全排列微信公众号：世界上有意思的事function permutate(str) {var array = str.split(’’);function loop(array, pre = []) {if (array.length == 1) {return [pre.concat(array).join(’’)];}let res = [];for (let i...
2020-04-20 16:05:28
326
原创 前端做微信支付（vue）
微信支付主要工作量在后端，前端就是调用后端给的微信支付接口，获取微信支付的相关参数：首先你的安装微信支付模块并引入它// npm install weixin-js-sdkimport wx from "weixin-js-sdk";接下来你需要后端给你一个接口文档类似于这样的在就是你调用接口了，看代码吧：1，点击立即支付的代码toPay() { //请求后台接口获...
2020-04-20 11:32:35
2816
原创 vant组件中图片上传对图片进行压缩处理
1.vant组件进行图片上传需要借助 <van-uploader v-model.trim="item.fileList" :after-read="uploadImg" :before-read="beforeRead" accept="image/*" ...
2020-04-20 11:04:41
7617
4
原创 js一些不为大多数人知的小方法
获取数组中最后一个元素Array.prototype.slice(begin,end)用来获取begin和end之间的数组元素。如果你不设置end参数，将会将数组的默认长度值当作end值。但有些同学可能不知道这个函数还可以接受负值作为参数。如果你设置一个负值作为begin的值，那么你可以获取数组的最后一个元素。如：var array = [1,2,3,4,5,6];console.log(a...
2020-01-06 11:41:55
182
原创 elementui使用upload上传被拦截处理方法
在项目中由于安全性考虑，后端对于接口的访问往往会进行拦截，前端往往需要在调用接口的时候传递一个token，在elementui中使用文件上传时，前端通常是这样的<el-upload action="/admin/file/uploadImage" :show-file-list="false" :on-success="uploadSuccess" :on-...
2019-12-16 17:33:59
5940
原创 js小方法
1，确保数组长度let array = Array(3).fill('');console.log(array);// ["", "", "", "", ""]2，获取数组最后一项let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(array.slice(-1)); // [9]3，数组去重 var array = [1,...
2019-11-22 16:15:39
155
原创 vue页面传递参数（常用方法二）
最常用的方式A页面跳转到B页面，传递参数（id和code）A页面触发跳转事件this.$router.push({ name: "ProInsur",//ProInsur路由的name值 params: { id: xxx, Code:xxx }});B页面接收参数 id：this.$route.params.id, code...
2019-11-21 11:20:44
323
原创 vue页面传递参数（常用方法一）
最常用的方式A页面跳转到B页面，传递参数（id和code）A页面触发跳转事件this.$router.push({ path: "/ProInsur", query: { id: xxx, Code:xxx }});B页面接收参数 id：this.$route.query.id, code: this.$route.query...
2019-11-21 11:04:32
482
原创 js判断一个时间（格式为xxxx-xx--xx）是否在某两个时间段内（格式为xxxx-xx--xx）
直接上代码function isMiddle(aa,bb,cc) { var dateBegin = new Date(aa); //将-转化为/，使用new Date var dateEnd = new Date(bb); //将-转化为/，使用new Date var dateNow = new Date(cc); //获取当前时间 var d...
2019-10-10 19:56:25
678
原创 js获取时间（当前时间的前后N天N月N年）
获取当前时间的N年前或者N年后function GetYear(year) { var time = new Date(); time.setFullYear(time.getFullYear() + year); var y = time.getFullYear(); var m = time.getMonth() + 1; var d = time.ge...
2019-10-10 19:43:21
1743
原创 compression-webpack-plugin报错问题
vue-cli项目中使用compression-webpack-plugin版本问题报错，查阅资料才知道是因为在执行npm install时安装了最新的版本，你只需要npm install --save-dev compression-webpack-plugin@1.1.12即可解决...
2019-09-25 17:07:30
8837
2
原创 vue中实现刷新当前页面（亲测有效）
业务场景：vue项目中遇到对当前页面进行数据操作时需要实时更新数据，页面需要刷新；在jquery里面可以使用location.reload()方法，刷新页面；在vue中，使用this.$router.go(0)也能实现刷新，但是会出现短暂空白，用户体验效果不好，所以可以尝试使用provide / inject 这对用例这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论...
2019-09-24 18:50:53
5303
原创 vue使用elementui实现表格中上下移动功能
html代码 <el-table :data="prodata"> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-button @click="upLayer(scope.$index,scope.row)">上移...
2019-09-24 18:32:19
5438
原创 JQ获取元素兄弟节点
$('#id').siblings() 当前元素所有的兄弟节点$('#id').prev() 当前元素前一个兄弟节点$('#id').prevaAll() 当前元素之前所有的兄弟节点$('#id').next() 当前元素之后第一个兄弟节点$('#id').nextAll() 当前元素之后所有的兄弟节点...
2019-09-19 14:07:15
9530
原创 移动端使用rem适配
移动端使用rem（页面使用px实际转化为rem）前提是需要一个转化插件——>postcss-pxtorem：转换px为rem的插件。第一步：安装插件 postcss-pxtorem；npm install postcss-pxtorem --save第二步：在src目录下新建rem文件夹，目录下新建rem.js文件；const baseSize = 32// 设置 rem 函数...
2019-08-27 11:28:50
181
原创 js判断是否为微信内置浏览器
function is_weixin() { //userAgent 属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值。 var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { ...
2019-08-21 09:51:23
450
原创 vue项目移动端用vant实现的头部组件
html部分<template> <div style="height:50px;"> <van-nav-bar :title="title" left-text="" left-arrow :z-index="999" @click-left="onBack" > <van-icon name="user-o" slot="right" @...
2019-08-21 09:40:51
6551
4
原创 vue做公众号网页时title的自定义问题
一般来说vue单页面应用的title在index.html中设置，但是一旦设置就是唯一了，对此有了以下需求：需要实现不同的页面对应不同的title，特别是微信公众号时，有了自带的头部栏，在vue2.0中可以使用vue-wechat-title解决问题1，安装vue-wechat-titlenpm install vue-wechat-title --save2，路由配置里加title，...
2019-08-20 17:45:07
3699
5
转载 axios封装
axios的封装前期在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文...
2019-08-20 17:22:20
184
原创 本地存储对象
一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式所以借助JSON.stringify()这个方法，来将JSON转换成为JSON字符串复制代码if(!window.localStorage){alert(“浏览器支持localstorage”);}else{var storage=window.local...
2019-08-20 16:42:04
1191
原创 vue移动端实现拨号功能（点击手机号就拨号）
vue移动项目中如何设置点击手机号码就可以打电话1， 在vue项目的index.html中添加如下代码：<meta name="format-detection" content="telephone=yes" />,2，在需要调起手机拨号功能的页面，写如下方法：callPhone (phoneNumber) { window.location.href = 'tel...
2019-08-20 16:06:20
8800
原创 vue项目中使用md5加密
1、npm安装npm install --save js-md52、第一种使用方法在需要使用的项目文件中引入：import md5 from 'js-md5';使用：md5('aaaaa')3、第二种使用方法在main.js文件中将md5转换成vue原型：import md5 from 'js-md5';Vue.prototype.$md5 = md5;在需要用到的文...
2019-08-20 11:36:52
6176
1
原创 移动端使用1px的css（给有需要的人用）
移动端1px的border@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border...
2019-08-15 17:53:50
122
原创 纯js实现文件上传
Html部分<div id="preview"></div><input type="file" onchange="preview(this)">Css部分（简单粗暴） #preview,.img,img { width:200px; height:200px;}#preview { border:1px solid #000;}Js...
2019-08-15 17:47:46
1138
原创 移动端的reset文件（给有需要的人）
移动端reset文件代码（留着用）@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp...
2019-08-15 17:33:40
229
1
原创 vue中使用全局过滤器（实战有用）
1，src下建立filter文件夹，index.js代码如下exports.orderType = (val) => { let typeName = ''; switch (val) { case 0: { typeName = '取消'; break; } case 1: { typeName = '正常'; break; } ca...
2019-08-15 17:22:13
1103
原创 vue中使用echarts（基础）
安装echarts项目依赖npm install echarts --save//或者npm install echarts -S使用国内淘宝镜像的则使用npm install -g cnpm --registry=https://registry.npm.taobao.org安装echartscnpm install echarts -S全局引入完毕后需要在src目录下找到m...
2019-08-15 17:08:28
187
转载 移动端项目搭建
首先新起一个项目vue init webpact projectName解决适配问题引入lib-flexible和px2rem-loader,打开build文件夹，编辑utils.jsexports.cssLoaders = function (options) { options = options || {} var cssLoader = { loade...
2019-08-15 16:23:43
1020
原创 vue移动端尾部组件
<template><div style="height:50px;"><van-tabbarv-model="active"style="background: #032E4D"><van-tabbar-item icon="wap-home" to="/Home" >首页</van-tabbar-item>...
2019-07-19 12:01:30
285
原创 vue移动端头部组件
<template><div style="height:50px;"><van-nav-bar:title="title"left-text=""left-arrow:z-index="999"@click-left="onBack"><van-icon name="user-o" slot="right" @clic...
2019-07-19 12:00:29
3283
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人