- 博客(32)
- 收藏
- 关注
RSS订阅原创 Unexpected token ＜ in JSON at position 2 while parsing near ‘ 解决方法
Unexpected token < in JSON at position 2 while parsing near ' 解决方法
2023-02-24 11:01:32
1036
原创 VUE pc端适配移动端H5
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem。直接安装postcss-pxtorem插件，报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
2022-09-06 11:15:16
2305
原创 vue + element ui中tabs页面组件切换数据更新
开发中遇到了一个问题就是我使用element ui中的tabs组件时候，每一个tab内嵌套了一个组件页面，但是我发现当切换之后，生命周期都没有走，页面的方法也没有触发5个tabs 中放了5个页面组件，第一次进来后，5个组件内的接口都全部请求了，点击切换tab将不再触发接口解决方法就是可以采用 tabs的name和每一个组件的隐藏状态同名，并且每一个组件的隐藏状态值都是tabsArr里面的值,并且放在tabsArr里面当切换之后 对应handleClick方法会判断当前点击的页面name和tabsArr
2022-06-09 16:28:52
3710
原创 原生js Html + video js 自定义视频播放器
创建一个html 引入video.js CDN<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /><script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>HTML 部分 (下边js部分效果需要最少两个Video 标签视频)<video id="my-video" ..
2021-03-29 17:21:17
984
1
原创 vue App 端防止页面键盘弹起 页面不下来
<input type="number" placeholder="请输入邮箱验证码" v-model="emailcodes" @blur="changBlur">// 加上失焦changBlur 这个方法// 页面弹起强制让页面高度归0changBlur () { setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || do
2020-07-23 17:05:43
737
原创 vue 页面禁止物理返回键返回跳转相应页面 App 浏览器通用
mounted () { if (window.history && window.history.pushState) { history.pushState(null, null, document.URL) window.addEventListener('popstate', this.goBack, false) } },methods: {goBack () {
2020-07-23 17:01:53
918
原创 如何正常使用ckeditor5图片裁剪功能
1 安装 npm install --save @ckeditor/ckeditor5-build-decoupled-document2 引入 import CKEditor from ‘@ckeditor/ckeditor5-build-decoupled-document’3 创建编辑器HTML <!-- 工具栏容器 --><div id="toolbar-container"></div> <!-- 编辑器容器 --><div
2020-07-14 10:43:04
1172
1
原创 vue vant组件实现的上拉加载下拉刷新样例
Html<section> // van-pull-refresh 下拉刷新 <van-pull-refresh v-model="downLoading" @refresh="onRefresh" success-text="刷新成功"> // van-list 上啦加载 <van-list v-model="loading"
2020-06-30 15:01:50
1880
原创 Vue防止按钮连续点击
在main.js 创建全局指令Vue.directive('throttle', { inserted(el, binding) { el.addEventListener('click', () => { el.style.pointerEvents = 'none'; if (!el.disabled) {...
2020-03-27 11:19:02
1849
原创 Vue科学计数法转换成小数 封装
首先 创建一个 filter.js 文件 在main.js 引入import * as filter from './common/filter';// 过滤器Object.keys(filter).forEach(key => { Vue.filter(key, filter[key])})在filter.js 贴上代码// 将科学计数法转换成小数export...
2020-03-26 11:28:34
2640
原创 前端使用crypto-js 的 aes 进行加密与解密，密码传输
前言项目中 经常有修改密码的功能，但是前端要求在密码传输过程中使用密文，使用明文展示。网上很多都不完整，这里写一下，我亲测有用的一个方法正文配置：crypto-js aes 加解密引入 crypto-js ，crypto-js 是一个纯 javascript 写的加密算法类库 ，可以非常方便地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散...
2020-03-06 16:06:14
848
原创 vue ES6 导入导出电话区号 export import
首先建一个 js 文件放区号 const cityJson={ "options":[{ "city": "中国大陆", "code": "86" }, { "city": "中国香港", "code": "852" }, { ...
2019-12-18 10:55:25
505
原创 订单倒计时（15 分钟 30 分钟 ...等等）
Vue 方法<p><span id="timer">{{msg}}</span></p>data（）{ creatime:'', // 开始时间 daoTim:'', // 倒计时时间 msg:'',} // 请求后台接口 获取他的下单时间‘2019-10-18 11:15:00 以及多长时间过期 ‘15/分钟 或者 30分钟...
2019-11-21 17:30:02
2431
1
原创 VUE 复制按钮的功能
小案例：直接上图：html：<p><input ref="code" value="GBBH111111111JBVJVGHJBNBNBMNB" readonly="readonly" /></p> <p @click="copygoogle">复制秘钥</p>js：methods：{ //复制秘钥 ...
2019-10-30 19:03:15
445
原创 使遮罩层底部禁止滚动
主要就是加上这个方法就可以了@touchmove.prevent <div class="mask-layer" v-show="showMask" @touchmove.prevent >
2019-10-30 18:57:55
331
原创 Vue路由懒加载（解决首页加载过慢）
Vue-router+webpack配合在路由中const aaa = () => import(/webpackChunkName : “随便名字”/ “@/view/index即路径”) webpackcName一样的会打包到同一文件中const bbb= () => import(/webpackChunkName : “随便名字”/ “@/view/index即路径...
2019-07-09 11:24:17
319
原创 sass和scss，less区别
scss是sass3.0升级而来的，主要的区别是，嵌套由缩进变成花括号less在客户端处理，sass在服务器处理，sass更快一些声明变量less使用@，sass用$sass有变量和作用域less容易上手less环境较为简单，sass需要安装ruby环境，less基于js，引入less.js就可以...
2019-07-09 11:22:43
151
原创 算法js题
标准排序： var arr = [5,8,3,6,9] for(var i=0;i<arr.length;i++){ for(var j=i+1;j<arr.length;j++){ var temp if(arr[i]>arr[j]){ temp=arr[i]; arr[i]=arr[j]; arr[j]=temp;...
2019-06-30 21:26:42
840
原创 原声js n秒后发送验证码
简单易学<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #ipt{height: 20px;width: 100px;border: 1px solid #868...
2019-06-30 21:10:45
107
原创 原生 js 双色球 大乐透
原生js 实现见得的双色球<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> span{width:40px;height:40px;display:block;...
2019-06-30 21:02:46
750
2
原创 原生js简单的二级联动
<!DOCTYPE html><html> <head> <title>JavaScript实现简单省市(NBA版)联动</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script...
2019-06-20 11:05:59
179
原创 原声js实现用户评论
效果图：html页面布局：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>用户评论</title> <style> *{margin: 0;padding:0; } li{list-style: none;}...
2019-06-19 09:34:36
390
原创 原生js点击图片放大
简单的点击图片放大效果代码如下建一个html网页即可，无需引入任何文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> ul,li{margin:0;pa...
2019-06-15 10:00:02
20629
3
原创 Vue一个loading组件
这个组件是为了避免白屏先创建一个vue页面<template> <div class="hello" v-show="show"> <!--引一个loading图片--> <img src="../assets/loading.jpg"/> </div></template><sc...
2019-06-13 14:58:48
227
原创 react 上传头像
import React from 'react';import axios from 'axios'export default class My extends React.Component{ constructor(props){ super(props); ...
2019-06-12 15:12:04
836
原创 react 轮播图
import React from 'react';import Swiper from 'swiper/dist/js/swiper.js'import 'swiper/dist/css/swiper.min.css' export default class Find extends React.Component{ constructor(pr...
2019-06-12 15:10:59
230
原创 react 购物车
import React from 'react';import axios from "axios"export default class Shou extends React.Component{ constructor(props){ super(props) this.state={ shopList:[], ...
2019-06-12 15:06:57
169
原创 promise 用法
<script> Promise.all([ $.ajax({url:"data/1.json",dataType:"json"}), $.ajax({url:"data/2.json",dataType:"json"}), $.ajax({url:"data/3.json",dataType:"json"}), ])....
2019-06-12 15:03:57
87
原创 零基础学习ES6(三)
ES6数组的一些常用方法1.filter 过滤 查找大于10的数 查找数组中复合条件的元素 会对数组中所有元素遍历，找到所有符合的，生成数组2.find 查找 找到符合条件的第一个元素findIndex 查找符合条件的元素的第一个下标 indexof 不能写条件4.includes（） arr.includes（8） 判断 arr 数组中是否有元素8 有的话返回...
2019-06-11 21:10:51
217
原创 ES6零基础学习(二)
一、数组去重set 是一个用来生成一个去除重复的数据var arr=[1,22,2,3,5,6,6,6,7,8]var a=Array.from(new Set(arr))console.log(a)二、对象的方法es6对象的属性中，可以直接写变量，这个对象的属性名就是变量名对象的两种表示方法： obj.key obj[“key”+变量]for（let i in obj）...
2019-06-11 21:02:53
149
原创 零基础学习ES6
欢迎来到ES6 ES6 简介ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6 作者是 阮一峰1、 let三个特点： let 拒绝变量的提升 let 不能重复定义， 可以把变...
2019-06-11 20:27:33
201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人