- 博客(43)
- 收藏
- 关注
原创 近期笔记
近期笔记一. 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
238
原创 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
2297
原创 echatrs 用法
chart.setOption({ tooltip: { trigger:'item', formatter:'{a} <br /> {b} : {c} ({d}%)' }, legend: { ....//一些常规参数 formatter: function(name) { ...
2020-03-11 13:52:11
371
原创 搭建vue项目配置
// baseURL 将自动加在 url 前面,除非 url 是一个绝对 URL。 // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL // process.env.API_ROOT是配置的不同环境的api,详情可看另一篇文章:Vue配置开发,测试,生产环境api // timeout 指定请求超时的毫秒数(0 表示无超时时间) // 如果请求话费了超过 timeout 的时间,请求将被中断————————————————
2020-03-05 15:41:31
329
原创 父级的onclick点击事件导致子元素的input checkbox的点击无效
给input添加一个onclick事件,加上window.event.cancelBubble=true;可以阻止冒泡到父级的点击事件。
2019-08-29 11:51:46
1469
原创 ios系统的微信浏览器中 h5页面 整体可以拖动的Bug修复
因为做一个 底部是固定的导航,头部是固定标题(全为absolute定位,ios系统下的fixed布局有bug), 中间是内容页。 首先这三部分保持在同一个层级,内容部分因为有下拉刷新的功能,所以页面是有垂直滚动条的。 在ios系统中发现,当touch位置在比较偏上或者偏下的情况下,手指拖动整个页面,会导致整个页面整体被拖动,然后内容页的滚动部分会发生...
2019-07-24 20:22:25
3971
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
6140
原创 swiper的使用以及切换过程中的内容高度留白问题
初始化组件mySwiper = new Swiper('.swiper-container', { autoplay: false,//可选选项,自动滑动 on:{ slideChange: function(){ //当swiper切换时,下面是项目里需要用到的js nowTabIndex = this.activeIndex;...
2019-07-24 20:00:47
2599
原创 z-index在ios失效问题解决方案
z-index并不是 通过数值大小来判断是否在上一层;只有在两者在同级的情况下,z-index大的数值就会在另一块的上级。在微信浏览器的ios系统中出现了这个bug,android没有发生,所以将两者改为同级,需要在上一层层级的元素的定位为absolute,该Bug解决。...
2019-07-22 09:15:22
3829
原创 vue awesome swiper的使用 slidesPerColumn的排版顺序
设置swiperOption 参数时,如果需要分页slidesPerColumn:2, 则为两行 ;slidesPerView: 4,为一行显示的个数默认的排列顺序是 12 | 34 | 56 | 78 如果想横向排序 1234 | 45678 则 设置slidesPerColumnFill : 'row',则横向排版 而不是竖向 swiper...
2019-05-08 11:02:45
3700
原创 解决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
2607
原创 vue 组件监听鼠标滚动事件
当需要组件模块化来渲染一个页面时,如果要监听当前组件的scroll事件,使用window.addEventListener('srcoll')是无效的,所以对当前组件采用监听滚动事件。如给当前div ref来获取当前的dom元素,<div class="bd" ref="viewBox"></div>在mounted中,监听当前的滚动事件,然后进行相应的操...
2019-04-15 15:25:28
6973
转载 vue 插槽的使用
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制用 <slot> 元素将不同的 DOM 树组合在一起。Slot 是组件内部的占位符,用户可以使用自己的标记来填充。1.默认插槽父组件:...
2019-03-29 16:53:14
158
原创 微信小程序小结
1.循环语句里 wx:for='{{ data}}'wx:key="*this"wx:key='*this' 代表保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,否则会有警告...
2019-03-25 19:41:08
220
原创 vue
day01:Vue自定义函数挂到全局方法方法一:使用exports.install + Vue.prototype自定义一个fun.js函数,写需要全局调用的方法,export default { install(Vue) { Vue.prototype.getNowDate = function(){ //方法 }...
2019-03-21 18:29:14
150
原创 css截取图片显示部分
1.方法一 (定位)html代码<div class="top"> <img src="./ex.png" alt=""></div><div class="bottom"> <img src="./ex.png" alt=""&
2019-02-28 18:25:01
4636
原创 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
688
原创 h5嵌套app 安卓和ios方法交互
1.h5传递数据给ios和Android前端方法名最好和ios需要调用的方法名称一样比如点击事件 的方法名 为interactionCallinteractionCall(){ this.$dialog.confirm({ title:'联系客服', message: '13123935666', confirmB...
2019-02-27 10:22:58
2539
原创 创建一个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
169
原创 append后forEach循环需要用到参数的写法
CPAdata.forEach(function(i,j) { $('.content').append( "<div class='hole_product_content' onclick=getDetails('"+`${i.productname}`...
2019-02-22 18:09:48
826
原创 md5、clipboard、jquery、flexible、vue CDN
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script><script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script><scri
2019-02-22 10:17:57
928
转载 target与currentTarget的区别
MDN中对target的解释为,一个触发事件的对象的引用, 当事件处理程序在事件的冒泡或捕获阶段被调用时。而对于currentTarget,它指的是当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,它标识事件发生的元素。举个例子来说明。事件冒泡阶段<!DOCTYPE html><html><...
2019-01-12 10:51:45
1836
原创 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
11880
转载 H5移动端弹出键盘时遮挡输入框
记一次,解决移动端文本框弹出键盘遮挡输入框的方法: document.activeElement.scrollIntoViewIfNeeded(); 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 使用方法: var input= document.getElementById("input");...
2019-01-07 16:23:51
2530
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
301
原创 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
539
原创 前端将两张图片合为一张
原理是使用canvas画布。在页面加载前 mounted方法里: setTimeout(() => { this.changeimg();}, 1000);changeimg( )方法: changeimg(){ var self = this; var imgsrcArray = [ ...
2018-12-04 14:58:26
6849
原创 前端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
1289
转载 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
194
原创 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
1329
转载 如何禁止浏览器自动填充
给登录表单的<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
711
原创 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
749
转载 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
2982
转载 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
748
原创 选择并预览图片
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
579
原创 前端动态生成二维码与条形码
二维码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
1625
转载 ajax中文乱码问题
有中文乱码是因为Javascript页面和action类中使用的编码方式不一致造成的,可采用如下两种方法解决:1.前端js使用两次encodeURI,两次解析之后会变成英文的字节码,不会造成乱码,后台则用utf-8转换成中文格式。2.前端js使用一次encodeURI,在服务器端做一次ISO-9959-1和UTF-8转码。...
2018-08-22 18:37:20
273
原创 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
314
原创 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
1580
转载 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
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人