- 博客(28)
- 收藏
- 关注
RSS订阅原创 页面全屏&退出全屏 React js
import React, { Component } from 'react'export default class FullScreen extends Component { toggleFullScreen() { if ( !document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenEl
2020-07-03 15:38:33
490
原创 antd react 邮箱地址补全
import React, { Component } from 'react'import { AutoComplete } from 'antd'const { Option } = AutoCompleteexport default class serach extends Component { state = { result: [], } handleSearch = (value) => { let res = [] if (!value
2020-06-28 17:45:11
899
原创 react 截取字符串自定义字符的前后内容
在上传附件的时候，有时候文件名会过长，需要处理一下，效果如下：import React from 'react'class Resume extends React.Component { state = { fileName: '请上传附件简历' } uploadFile = () => { let fileInputName = this.fileInput.current.files[0].name let name = fileInputName.rep
2020-06-28 14:49:19
3716
原创 获取滚动条位置（兼容Edge）
众所周知，要获取当前页面的滚动条纵坐标位置，用：document.documentElement.scrollTop;但是在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;正确的写法应该是 let scrollTop = document.body.scrollTop let top = document.documentElement.scrollTop if (scrollTop >
2020-06-10 09:33:37
577
原创 wangEditor3 React 上传图片
官网地址： https://www.kancloud.cn/wangfupeng/wangeditor3/332599首先，在 React 项目中安装 wangEditor3 插件npm install wangeditor 封装的子组件import React, { PureComponent } from 'react'import E from 'wangeditor'import prefix from '../../config'class Editor extends .
2020-06-05 14:52:56
558
原创 vue打包时背景渐变失效
vue打包时会把谷歌的渐变兼容性过滤掉，需要加上下面的代码才不会被过滤。/*! autoprefixer: off */background:-webkit-gradient(linear, 100% 0, 0 0, from(rgba(67, 142, 254, 1)), to(rgba(0, 0, 0, 0)));background:-webkit-linear-gradient(le...
2019-05-14 14:47:44
470
原创 vue tab选项卡
选项卡在实际项目中还是会经常运用到的，非常简单，但也记录下。因业务上的选项卡内容还是比较多的，所以父组件引入子组件的方式来实现。首先新建一个父组件，如下：<template> <div class="service"> <ul class="tab-list"> <li v-for="(item ,index) ...
2019-05-08 15:56:12
870
1
原创 vue 下载文件
<templete> <span @click="download(contract.filePath)">下载</span></templete><script>module.exports = { methods: { download(filePath){ var self = this; ...
2019-03-20 16:32:16
1265
原创 vue-swpier 实现三级联动选择省，市
项目中需要用到三级联动选择省份+城市。因项目中已用到swiper组件，遂选择了swiper来做三级联动功能，避免重复赘余，节省代码量。话不多说，直接上代码。如有不明白的地方，可留言。看到会回复的，望对诸位有所帮助。1.安装swipernpm install vue-awesome-swiper --save2.组件(SelectAddress.vue)&amp;lt;template&amp;gt; ...
2019-03-01 14:29:16
572
原创 关于地址栏的一些小事
获取地址栏的链接document.location.hrefz获取地址栏的域名document.location.host或者location.origin获取地址栏的域名下的相对路径location.pathname
2018-11-15 15:29:00
132
原创 判断ios和安卓系统，pc和手机端
判断ios和安卓系统 var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? ...
2018-10-24 12:01:47
641
原创 基本校验
isTelPhoneNum: function (tel) {//校验手机号码return /^1\d{10}$/.test(tel);},isPhone:function(tel){//校验电话 return /(0[1-9]\d{1,2}-)?[1-9]\d{6,7}/.test(tel);},isBankCard: function (cardNum) {//校验银行卡号...
2018-08-07 17:43:45
226
原创 vue 微信分享
vue 微信分享参考资料微信JS-SDK说明文档前期工作1.安装微信开发者工具 为方便以后开发debug，可以安装微信开发者工具 这里会显示微信分享的回调，如有错误可对应解决2.获取公众号appid和设置IP白名单 登录微信公众平台 目录：开发&gt;基本配置 3.设置JS接口安全域名 此txt文件必须与分享链接目录相对应，例如分享链接是https://...
2018-07-30 14:00:59
2380
6
原创 vue手机端底部导航栏
业务逻辑： 由于项目不只是主页需要导航，还有一些子页面也需要用到导航，所以不能用绑定router来实现导航的状态，故在引入组件的时候带个值（page）过去判断navBar页面<template> <ul class="nav"> <li v-for="(item,index) in arr" :class="item.add_link">..
2018-07-05 09:23:44
8120
原创 vue环境搭建
详情请参考vue官网需安装git，node，cnpm，vue等环境。1.安装git从git官网中下载安装包，并安装，一直点next即可。2.安装node从node官网中下载安装包，并安装，一直点next即可。 安装完毕，可在命令行工具中输入node -v，查看node的版本号，我们下面要用的npm已经在node的集成包里了，所以直接输入npm -v即可看到npm的版本...
2018-03-25 18:14:06
233
原创 图片放大镜
效果 所需图片 pic为同一张图<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf
2018-03-20 17:15:56
237
原创 css绘写勾勾跟叉叉
勾勾原理： 右边框+下边框，顺时针旋转45deg效果： <i class="icon_true"></i>.icon_true{ display:inline_block; width: 6px; height: 10px; border-bottom: 2px solid #999; border-right: 2...
2018-02-26 15:48:40
1721
原创 删除&添加行列
效果 htmldiv class="g-clr"> table class="table_dimension"> tr> td>尺码td> td>维度1td> td>维度2td> td>维度3td> td>维度4td> t
2018-01-17 12:16:36
197
原创 用rem兼容手机端页面
移动端设计稿为750px*1134px:html { font-size: 312.5%;}@media screen and (max-width: 359px) and (orientation: portrait) { html { font-size: 266.67%; }}@media screen and (min-width: 360px) and
2018-01-04 10:55:16
394
原创 three.js 创建一个立方体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="js/three.js"></script><script> var scene = new THREE.Scene(); //创建场景 var
2017-12-04 15:24:14
1523
1
原创 倒计时--距离开抢和开抢后
html<p id="t_d">00</p><p id="t_h">00</p><p id="t_m">00</p><p id="t_s">00</p>js function GetRTime(){ var EndTime= new Date('2017/11/12 00:00:00'); //结束时间 var StartTime= new Date('201
2017-11-07 18:04:32
284
原创 jq选择canvas
刚接触canvas时，直接用jq的选择器$(“#id”)，发现没有效果。 后查了下资料，发现原来jQuery()返回的是jQuery对象，而jQuery对象是没有getContext方法的，需要把jQuery对象转换成Dom对象，官方文档推荐的方法如下述代码，其实jQuery对象就是类数组，用数组下标可以取得Dom对象。var c = $("#change").get(0),ctx = c.ge
2017-10-24 15:18:29
1473
原创 canvas画图模糊问题
使用canvas画图时，会遇到图片模糊的问题。 1.可以使用hidpi-canvas-polyfill； 举个栗子var getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio ||
2017-10-24 15:12:00
1336
原创 websocket--简易版
一、搭建环境（node环境下） 命令：npm install nodejs-websocket https://github.com/sitegui/nodejs-websocket二、运行var ws = require("nodejs-websocket");//引进模块var PORT = 3000;// Scream server example: "hi" -> "HI!!!"va
2017-10-20 17:39:38
404
原创 手机端选择照片和调用摄像头，录音，文件类型
<input type="file" accept="image/*"><!--*可改为图片类型，如jpg，png等，中间用逗号隔开，image/ jpg,image/png---><!--*调用摄像头---><input type="file" accept="image/*" capture="camera&q
2017-10-18 17:12:12
614
原创 判断PC端与移动端的访问
判断PC端与移动端的访问代码 if(window.location.toString().indexOf('pref=padindex') != -1){ }else{ if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMS
2017-04-19 11:33:52
500
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人