- 博客(60)
- 收藏
- 关注
RSS订阅原创 谷歌浏览器解决跨域问题
采取禁用浏览器的安全协议一、 C盘创建MyChrome文件夹；二、鼠标右击Google Chrome图标打开属性，设置目标；三、在目标末尾添加 --disable-web-security --user-data-dir=C:\MyChrome
2021-07-19 15:34:32
999
3
原创 es6数组以及数组对象去重
1. 数组去重let arr = [1, 3, 5, 6, 9, 1, 3, 2];new Set(arr) // 去重Array.from(new Set(arr)) // 将伪数组转换成真数组 并去重2. 数组对象去重方法一：let arr = [{ key: 'R', code: 520 }, { key: 'o', code: 521 }, { key
2021-04-09 16:10:28
1025
原创 金额补0操作
示例：this.fomatFloat(6,2);num: 金额n：保留几位小数fomatFloat(num, n) { var f = parseFloat(num); if (isNaN(f)) { return false; } f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂 var s = f.toString(); var rs = s.inde
2021-03-15 18:03:42
146
原创 展开折叠逻辑分写
// 以angular写法为例public unfold = true;public unfoldClickNum = 0;setSwitch() { if (this.unfoldClickNum % 2 !== 0) { // 折叠逻辑 this.unfoldClickNum = 0; this.unfold = true; } else { // 展开逻辑 this.unfoldClickNum = 1; this.unfold
2021-02-22 15:11:05
145
原创 angualr中使用定时器调后台接口
private timer:any; ngOnInit() { this.timer = setInterval(()=>{ this.getCount(); },1000 ); } ngOnDestroy(): void { clearInterval(this.timer); }
2021-01-28 17:30:17
145
原创 快速判断数组中每个对象同一属性值是否相同（3种方法）
此方法一般应用于全选多选的判断1、findIndex() 方法返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。let demoData = [ {checked:false,name:'royal'}, {checked:false,name:'royal'},]if(demoData.findIndex(target=>target.checked === true)==-1){ console.log('验证通过') }else { conso.
2020-12-08 16:45:25
11549
原创 vuex辅助函数用法
Vuex是实现组件全局状态（数据）管理的一种机制，vuex的出现是为了解决web组件化开发的过程中，各组件之间传值复杂和混乱的问题。使用vuex统一管理状态的好处：1.能够在vuex中集中管理共享的数据，便于开发和后期进行维护2.能够高效的实现组件之间的数据共享，提高开发效率3.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新1. 将想要全局存储的数据存放在state中state: { vuex_user:{ name:'oange', age: .
2020-11-30 20:59:47
1467
原创 将EXCEL表格的数据转化为数组对象形式的数据
使用xlsx.full.min.js读取excel表格数据excel 数据是这样的处理后数据是这样的代码如下，需要引入xlsx.full.min.js 下载地址<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalabl
2020-10-12 17:26:59
5315
1
原创 vue 通过下拉框选中的数据 去创建输入框
我用的是ui框架是Ant Design Vue<a-row> <a-row class="body"> <!-- 循环创建 --> <a-col :span="24" v-show="peopleItemArr"> <a-form-model-item :label="item.name"
2020-09-27 15:04:44
1097
原创 vue cli3 pc端适配（亲测有效）
对行内样式无效喔~npm下载依赖包npm i postcss-px2rem -Snpm install postcss-pxtorem -Snpm i px2rem-loader -S在工具栏文件夹下新建rem.js，并在main.js文件里面引入// rem等比适配配置文件// 基准大小const baseSize = 192// 设置 rem 函数function setRem() { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 const sca
2020-09-22 11:10:46
1774
6
原创 vue 监听页面滚动事件
<div class="tabBox" v-if="scrollTop<64"></div>data() { return { scrollTop:null,// 解决滚动问题 };}mounted() { window.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件},methods: { handleScroll (e) {
2020-09-02 21:42:10
1409
原创 vue 自定义步骤条样式
<!-- 顶部步骤条 --> <div class="createorder_top"> <div class="createorder_top_left"> <span class="createorder_left_set" :class="activeNum == 0 ||activeNum ==1||activeNum ==2?'activeSet':''" >.
2020-09-02 21:36:07
2351
原创 让div宽度自适应文字内容
直接用css3的fit-content：width:fit-content;width:-webkit-fit-content;width:-moz-fit-content;
2020-08-30 00:31:24
729
原创 Vue（echarts）中使用定时器setInterval和setTimeout
js中定时器有两种，一个是循环执行setInterval，另一个是定时执行setTimeout循环执行（setInterval）用法是setInterval（“方法名或方法”，“延时的时间”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔<template> <section> <h1>hello world~</h1> </section></template><sc
2020-08-29 23:41:08
4205
原创 vue 组件注册与传值
父向子传值：父组件通过属性绑定的方式进行传值，子组件通过props接收子向父传值：父组件通过事件绑定接收，子组件通过$emit传值兄弟组件传值：设置一个事件中心eventBus ，传递方通过$emit传值，接收方通过$on接收想要进行组件传值，那当然是先要 “注册组件” 啦。// 这里是全局注册组件 一般很少用 了解一下在main.js文件中import MenuPanel from "../components/menuPanel.vue";Vue.component('me
2020-07-31 16:31:26
338
原创 vue + openlayers鼠标移动获取地图经纬度格式化的两种方式
一：格式：经度:119.93 纬度:33.93import { format } from 'ol/coordinate';import MousePosition from "ol/control/MousePosition.js";//鼠标获取坐标控件const mousePositionControl = new MousePosition({ coordinateFormat: function (coordinate) { return format(coordin
2020-07-29 10:48:01
1805
原创 vue 点击按钮时切换图片改变文字颜色
<div class="home"> <ul> <li v-for="(item, index) in tabs" :key="index" :class="cutIndex == item.state ? 'home-hover' : ''" @click="handleMap(item.state)" > <img :src="cutIndex == item.s
2020-07-28 16:30:06
1560
原创 vue + openlayers 实现省市区的描边界与区域填充 (后续)
<div class="cityList"> <div :class="numIndex === i ? 'item tdSelected' : 'item'" v-for="(item, i) in cityList" :key="i" @click=" tabClick(i); childClick(item);"> {{ item.features[0].properties.name }}
2020-07-28 10:24:34
1363
原创 vue + openlayers 实现省市区的描边界与区域填充
npm install olgeoJson提供边界数据的网址，自行选择需要的区域的边界，下载json数据geo数据源将下载的数据源放到新建的province.json 文件里面，在最外层加上[] 数组，每一条需要展示的数据源为一个对象（以数组对象的形式存放）复制即可查看效果<template> <div class="demo"> <div id="Map" ref="map"></div> </div></te
2020-07-23 17:34:41
3174
3
原创 微信小程序复制粘贴功能
data: { mapCallbackTxt: '', }, doAuthor: function () { let _that = this; wx.setClipboardData({ data: _that.data.mapCallbackTxt, success(res) { wx.showToast({ title: "经纬度复制成功" }) } }) },&l
2020-07-22 17:34:53
2871
原创 h5页面禁止双击或者双指放大
大多情况下，为了省事，可以直接用但是存在个缺陷，就是如果页面需要双击放大，比如3D地图，就用不了了<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">也可以js控制，以在vue内部使用为例// 禁止ios10+页面缩放export const disabledScale = () => {
2020-06-19 10:51:21
3591
原创 微信小程序根据util获取当前日期
util.js中并没有获取当前日期的方法，所以模仿获取当前时间的方法formatTime()，写一个formatDate()方法获取当前日期。const formatDate = str => { const year = str.getFullYear(); const month = str.getMonth() + 1; const day = str.getDate(); return [year, month, day].map(formatNumber).join('-
2020-06-19 10:07:45
1359
原创 微信小程序点击事件传递参数
<view bindtap="getQuery" data-index="1">点击事件传参</view>getQuery: function(e){ // 传递的参数 let query = e.currentTarget.dataset['index'];}
2020-06-17 14:27:02
259
原创 微信小程序中使用腾讯位置服务，点击地图获取poi，或者是关键词搜索
1、插件申请接入：在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务地图选点” 申请，审核通过后，小程序开发者可在小程序内使用该插件。具体步骤可参考 【腾讯位置服务地图选点】插件的开发文档。2、引入插件包：（点击浏览插件最新版本查看信息填写）"plugins": { "chooseLocation": { "version": "1.0.4", "provider": "wx76a9a06e5b4e693
2020-06-14 21:16:17
2118
原创 微信小程序获取用户经纬度 和 详细信息地址
首先获取用户的经纬度<view class="container"> <button wx:if="{{canIUse}}" open-type="openSetting">授权设置页</button> <view style='margin-top:40rpx;'>地理位置的系统开关 {{locationEnabled}}</view> <view>允许微信使用定位的开关 {{locationAuthori
2020-06-12 17:00:50
1413
原创 react 底部tabBar组件封装（路由跳转）
route.jsimport Index from "./pages/Index";import TrulyIndex from "./pages/TrulyIndex";// exact精确匹配 使得路由的匹配更严格 为true时表示严格匹配，为false时为正常匹配// requireAuth是否需要身份验证const routes = [ { path: "/trulyIndex", exact: true, requireAuth: true, co
2020-06-11 23:50:58
1324
原创 js html页面跳转新页面对应的tab以及tab切换效果
点击跳转页<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>点击跳转页</title> </head> <body> <a class="page" href="./jc_traffic.html?type=0">跳转a11页面</a> <a class="page
2020-05-31 02:43:25
1205
原创 vue 日期与时间戳相互转换 获取某天对应日期格式的时间 得到某天23:59:59的时间戳
import { pastDate, unixToDate, setEndTime } from "路径";pastDate的使用方法：(需要哪天，传入数字即可)pastDate(7),得到当前时间七天后的 日期格式 时间pastDate(-7),得到当前时间七天前的 日期格式 时间unixToDate的使用方法：(传入时间戳即可得到对应日期)unixToDate(1590767999)setEndTime的使用方法：(传入想要格式的的时间的日期格式即可)setEndTime(2020/
2020-05-30 18:39:45
2064
1
原创 登录权限校验（暂未亲测）
在应用中，通常会有以下的场景，比如商城：有些页面是不需要登录即可访问的，如首页，商品详情页等，都是用户在任何情况都能看到的；但是也有是需要登录后才能访问的，如个人中心，购物车等。此时就需要对页面访问进行控制了。此外，像一些需要记录用户信息和登录状态的项目，也是需要做登录权限校验的，以防别有用心的人通过直接访问页面的 url 打开页面。此时。路由守卫可以帮助我们做登录校验。具体如下：1、配置路由的 meta 对象的 auth 属性const routes = [ { path: '/',
2020-05-15 17:44:54
298
原创 进度条效果
<div class="about"> <div class="progress"> <!-- 进度条 --> <div class="curProcess" style="width:95%"></div> </div> <div class="progress"> <!-- 进度条 --> <div class="curProces
2020-05-15 15:57:55
88
原创 不依赖任何插件的rem适配
新建rem.js，直接引入即可使用喔，可以适配，但是需要心算能力，不依赖任何插件// 设计稿自定义为375px 利用测量的px大小除以50 即可得到所需rem值// 设计稿自定义为750px 利用测量的px大小除以100 即可得到所需rem值(function () { remLayout(); function remLayout() { // 获取屏幕宽度 var w = document.documentElement.clientWidth;
2020-05-15 15:46:37
203
原创 vue cli3请求封装（结合vant ui 配置项目提示，赞！）
src文件夹下新建tools工具文件夹新建如下js文件：baseURL.js(分环境设置请求基准地址)https.js(请求封装)mixin.js(配置提示信息等公共方法)baseURL.js（分环境设置基准地址详细步骤：https://blog.csdn.net/qq_46003166/article/details/103906287）https.js(结合实际后台约定 进行配置)import axios from "axios";import baseUrl from "./setBa
2020-05-14 09:52:10
610
原创 vue cli3中使用postcss-pxtorem进行适配(亲测有效!)
温馨提示：对行内样式无效喔~下载依赖npm install postcss-pxtorem -Dpostcss.config.jsmodule.exports = { plugins: { // 兼容浏览器，添加前缀 autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 3
2020-05-13 16:00:18
19119
7
原创 微信小程序，表单预验证（正则）
在utils文件夹下新建RegEx.jsexport default function Reg(type, code) { console.log(code) // var phoneREG = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/; // 手机号 var phoneREG = /^1\d{10}$/; // 手机号 var idCardREG = /^\d{15}|\d
2020-05-13 09:47:16
706
原创 微信小程序，页面跳转传参且接收传过来的参数的方法
<view class="discount" bindtap="toExpiredDetails" data-id="{{item.couponid}}" wx:for="{{haveUsed}}" wx:key="index"></
2020-05-12 14:56:03
1224
2
原创 微信小程序 时间戳之间 相减得到相隔时间
在utils文件夹下新建humandate.wxs// 时间戳之间 相减 结束时间的时间戳 - 当前时间的时间戳function humandate(time1) { console.log(time1, time2) var time2 = Math.round(getDate().getTime() / 1000) //var time1 = Date.parse(new Date()) / 1000; var s = time1 - time2; if (s < 0)
2020-05-12 11:15:32
2126
原创 微信wxml页面 将时间戳格式化为日期格式 2020-5-12
在utils文件下新建filter.wxs温馨提示：wxs里面不支持js高级语法，所以new Date 替换为getDate()// 在wxml页面 将时间戳格式化为 2020-5-12function filter(unixtime) { var dateTime = getDate(parseInt(unixtime) * 1000) var year = dateTime.getFullYear(); var month = dateTime.getMonth() + 1; va
2020-05-12 09:39:33
1025
原创 JS计算两个时间戳相差月数、天数、时数、分钟、秒数
function humandate(time1, time2) { //var time1 = Date.parse(new Date()) / 1000; var s = time1 - time2; if (s < 0) { s = Math.abs(s); } if (s > 31536000) { return formatDate(new Date(time2 * 1000)); } else if (s > 2592000) {
2020-05-11 16:49:45
3025
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人