Lei_zhen96-CSDN博客

原创近期笔记

近期笔记一. js判断数据类型Object.prototype.toString.call(arr); //返回 [object, Number] / [object,Array] / …arr.constructor; //返回arr的构造函数arr instanceof Array; //更适用于引用类型的检测typeof arr; // typeof 只能检测出string，boolean(true

2021-01-04 17:07:57 212

原创 vscode eslint配置避免运行终端warning

//.eslintrc.jsmodule.exports = { root: true, env: { node: true }, extends: ["plugin:vue/essential"], parserOptions: { parser: "babel-eslint" }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", .

2020-05-25 14:52:56 2249

原创 echatrs 用法

chart.setOption({ tooltip: { trigger:'item', formatter:'{a} <br /> {b} : {c} ({d}%)' }, legend: { ....//一些常规参数 formatter: function(name) { ...

2020-03-11 13:52:11 355

原创搭建vue项目配置

// baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL。 // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL // process.env.API_ROOT是配置的不同环境的api，详情可看另一篇文章：Vue配置开发，测试，生产环境api // timeout 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 timeout 的时间，请求将被中断————————————————

2020-03-05 15:41:31 301

原创父级的onclick点击事件导致子元素的input checkbox的点击无效

给input添加一个onclick事件，加上window.event.cancelBubble=true;可以阻止冒泡到父级的点击事件。

2019-08-29 11:51:46 1438

原创 ios系统的微信浏览器中 h5页面整体可以拖动的Bug修复

因为做一个底部是固定的导航，头部是固定标题(全为absolute定位，ios系统下的fixed布局有bug)，中间是内容页。首先这三部分保持在同一个层级，内容部分因为有下拉刷新的功能，所以页面是有垂直滚动条的。在ios系统中发现，当touch位置在比较偏上或者偏下的情况下，手指拖动整个页面，会导致整个页面整体被拖动，然后内容页的滚动部分会发生...

2019-07-24 20:22:25 3877 1

原创 js 读取图片路径并预览图片

写一个input type为file类型的格式接受为图片格式，当选择好之后，获取这个file文件。然后转换为base64格式，将图片的src替换。 var reads = new FileReader(); var file = document.getElementById('file').files[0]; formData.append...

2019-07-24 20:06:17 6108

原创 swiper的使用以及切换过程中的内容高度留白问题

初始化组件mySwiper = new Swiper('.swiper-container', { autoplay: false,//可选选项，自动滑动 on:{ slideChange: function(){ //当swiper切换时,下面是项目里需要用到的js nowTabIndex = this.activeIndex;...

2019-07-24 20:00:47 2580

原创 z-index在ios失效问题解决方案

z-index并不是通过数值大小来判断是否在上一层；只有在两者在同级的情况下，z-index大的数值就会在另一块的上级。在微信浏览器的ios系统中出现了这个bug，android没有发生，所以将两者改为同级，需要在上一层层级的元素的定位为absolute，该Bug解决。...

2019-07-22 09:15:22 3797

原创 vue awesome swiper的使用 slidesPerColumn的排版顺序

设置swiperOption 参数时，如果需要分页slidesPerColumn:2, 则为两行；slidesPerView: 4,为一行显示的个数默认的排列顺序是 12 | 34 | 56 | 78 如果想横向排序 1234 | 45678 则设置slidesPerColumnFill : 'row',则横向排版而不是竖向 swiper...

2019-05-08 11:02:45 3642

原创解决laydate在移动手机端界面的点击失效闪退问题

pc端引入layui的css与js后，初始化时渲染出laydate，layui.use('laydate',function () { var laydate = layui.laydate; laydate.render({ elem: '#startDate', }); laydate.render({ elem: '#endD...

2019-04-29 14:21:34 2546

原创 vue 组件监听鼠标滚动事件

当需要组件模块化来渲染一个页面时，如果要监听当前组件的scroll事件，使用window.addEventListener('srcoll')是无效的，所以对当前组件采用监听滚动事件。如给当前div ref来获取当前的dom元素，<div class="bd" ref="viewBox"></div>在mounted中，监听当前的滚动事件，然后进行相应的操...

2019-04-15 15:25:28 6932

转载 vue 插槽的使用

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制用 <slot> 元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符，用户可以使用自己的标记来填充。1.默认插槽父组件:...

2019-03-29 16:53:14 144

原创微信小程序小结

1.循环语句里 wx:for='{{ data}}'wx:key="*this"wx:key='*this' 代表保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，否则会有警告...

2019-03-25 19:41:08 207

原创 vue

day01:Vue自定义函数挂到全局方法方法一：使用exports.install + Vue.prototype自定义一个fun.js函数，写需要全局调用的方法,export default { install(Vue) { Vue.prototype.getNowDate = function(){ //方法 }...

2019-03-21 18:29:14 141

原创 css截取图片显示部分

1.方法一 (定位)html代码<div class="top"> <img src="./ex.png" alt=""></div><div class="bottom"> <img src="./ex.png" alt=""&amp

2019-02-28 18:25:01 4593

原创 h5 百度地图API的使用

1.头部导入百度地图js<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>html 建立一个div 并赋予宽高用于存放地图<style> html { height: ...

2019-02-28 17:54:28 662

原创 h5嵌套app 安卓和ios方法交互

1.h5传递数据给ios和Android前端方法名最好和ios需要调用的方法名称一样比如点击事件的方法名为interactionCallinteractionCall(){ this.$dialog.confirm({ title:'联系客服', message: '13123935666', confirmB...

2019-02-27 10:22:58 2510

原创创建一个react 项目

1.安装nodejs(安装cnpm、yarn)2.安装脚手架工具npm/cnpm install -g create-react-app3.创建项目create-react-app reactdemo(项目名)4.运行项目npm start(运行)npm run build(打包) ...

2019-02-26 11:14:48 145

原创 append后forEach循环需要用到参数的写法

CPAdata.forEach(function(i,j) { $('.content').append( "<div class='hole_product_content' onclick=getDetails('"+`${i.productname}`...

2019-02-22 18:09:48 801

原创 md5、clipboard、jquery、flexible、vue CDN

2019-02-22 10:17:57 901

转载 target与currentTarget的区别

MDN中对target的解释为，一个触发事件的对象的引用，当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。举个例子来说明。事件冒泡阶段<!DOCTYPE html><html><...

2019-01-12 10:51:45 1806

原创 uniapp开发遇到的问题以及解决方案

1.导入md5.js 加密通过npm导入md5,在文件根目录:npm install md5使用用法：在需要使用到的js页面首先导入md5import md5 from 'md5';用法：var a = '1';var md = md5(a);console.log(md) //c4ca4238a0b923820dcc509a6f75849b ...

2019-01-08 14:36:22 11844

转载 H5移动端弹出键盘时遮挡输入框

记一次，解决移动端文本框弹出键盘遮挡输入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。使用方法： var input= document.getElementById("input");...

2019-01-07 16:23:51 2488 1

转载 vue refs的用法

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了用法如下:...

2018-12-11 10:29:20 293

原创 react 报错this.setState

ES6中 this 只能在构造函数中使用了,因此this.setState()这个函数也就不能直接调用了。import React, { Component } from 'react';class Home extends Component { constructor(){ super(); //需要在构造函数中用bind方法传入this ...

2018-12-06 15:10:26 527

原创前端将两张图片合为一张

原理是使用canvas画布。在页面加载前 mounted方法里： setTimeout(() => { this.changeimg();}, 1000);changeimg( )方法： changeimg(){ var self = this; var imgsrcArray = [ ...

2018-12-04 14:58:26 6786

原创前端base64加密

1.导入jquery.base64.js文件，可自行搜索2.在vue项目的main.js中引入这个文件加密：var basepsw=$.base64.btoa(this.phonepass);btoa是jquery.base64.js的方法，在此js文件中Plugin.btoa = Plugin.encode = function(plain, utf8encode) ...

2018-11-22 10:31:14 1279

转载 vue 常用ui组件库

vux github ui demo:https://github.com/airyland/vuxMint UI项目主页:http://mint-ui.github.io/#!/zh-cndemo:http://elemefe.github.io/mint-ui/#/github地址:https://github.com/ElemeFE/mint-ui中文文档地址:http://m...

2018-11-15 11:39:03 180

原创 taro小程序开发

安装配置官网 https://nervjs.github.io/taro/1.先全局安装@tarojs/clinpm install -g @tarojs/cli2.之后我们初始化一个名为myApp的项目:taro init myApp3.在微信小程序客户端运行:npm run dev:weapptaro-ui官方文档:https://taro-ui.aotu.i...

2018-10-17 18:28:29 1313

转载如何禁止浏览器自动填充

给登录表单的<input>标签，增加autocomplete="off"无效 autocomplete 设置其他参数autocomplete 除了 on、off 之外，还有很多参数：name、email、username、new-password、current-password、street-address 等等；当 input type 为 password 但 ...

2018-10-16 11:18:28 671

原创 vue导入echarts

1.首先安装echartsnpm install echarts --save2.在mian.js中使用echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts3. <template> <div> <div id="main" st...

2018-08-27 15:47:43 733

转载 vue项目使用markdown编辑器

1.安装mavon-editor$ npm install mavon-editor --save2.需要使用Markdown编辑器的页面js中： import { mavonEditor } from 'mavon-editor' import 'mavon-editor/dist/css/index.css' export default { compone...

2018-08-24 17:44:28 2971

转载 vue中使用vue-quill-editor富文本编辑器

1.安装Vue-Quill-Editornpm install vue-quill-editor --save2.在需要使用富文本编辑器的页面js中importimport 'quill/dist/quill.core.css';import 'quill/dist/quill.snow.css';import 'quill/dist/quill.bubble.css';i...

2018-08-24 16:49:20 731

原创选择并预览图片

html:<input id="file" @change="changeImg($event)" type="file" class="file" accept="image/png,image/jpeg,image/gif">js:changeImg(event){ var files = $(event.currentTarget)[0].files[0

2018-08-23 18:31:24 568

原创前端动态生成二维码与条形码

二维码1.导入qrcode.jsvue项目：在main.js中引入导入的qrcode.js文件import '../static/js/qrcode.js'在需要显示二维码的页面<div> <div id="qrcode"></div></div>js:mounted(){ var qrcod...

2018-08-23 16:50:30 1597

转载 ajax中文乱码问题

有中文乱码是因为Javascript页面和action类中使用的编码方式不一致造成的，可采用如下两种方法解决：1.前端js使用两次encodeURI，两次解析之后会变成英文的字节码，不会造成乱码，后台则用utf-8转换成中文格式。2.前端js使用一次encodeURI，在服务器端做一次ISO-9959-1和UTF-8转码。...

2018-08-22 18:37:20 259

原创 vue 环境搭建引入stylus

1.使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：(首先查看电脑是否安装，如果有，则不需要安装) npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl...

2018-08-22 14:28:55 309

原创 vue 导入element组件库以及jquery

1.项目安装npm i element-ui -S2.项目的main.js文件import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI,{size:'small'}); 即可使用 3.引入jQueryn...

2018-08-20 16:06:29 1557

转载 React开发环境搭建

1.首先安装node.js和npm命令行查看是否安装node -vnpm -v2.新建一个文件夹，在编译器下安装react环境npm install -g create-react-app //全局安装create-react-app脚手架工具create-react-app my-new-app //my-new-app 为项目名称3.生成的文件目...

2018-08-20 15:09:27 147

空空如也

空空如也