前端
关注
分享
扫一扫
文章平均质量分 50
白马湖小龙王
我在修仙
展开
-
vue3 为什么要使用composition函数式编程
vue3除去一堆零敲碎打的优化更新之后最让我觉得眼前一亮的就是composition组合式组件以及其对应的函数式写法了。首先，我们先看下composition组件的用法。其实如果从光从写法上来看和option配置型写法区别不大只不过是换成了函数式，切需要在新的hook setup() 中注册返回一下具体写法export default { setup() { // 相当于data,需要用ref生成reactive对象，对其value值赋值触发依赖收集访问 const count原创 2021-03-29 16:26:43 · 1039 阅读 · 1 评论 -
mpvue上拉刷新，下拉加载
第一种重点：不要用scroll-view效果main.json{ "navigationBarTitleText": "", "enablePullDownRefresh": true,//开启下拉刷新 "backgroundTextStyle":"drak",//显示刷新三个点 "backgroundColor": "#fff"}js原创 2018-11-20 15:27:43 · 3869 阅读 · 4 评论 -
webpack将文件打成压缩包
英文好的直接看文档https://www.npmjs.com/package/filemanager-webpack-plugin引包npm install filemanager-webpack-plugin --save-dev修改配置文件 ./build/webpack.dev.conf.js// 引包const FileManagerPlugin = require('file...原创 2019-06-19 10:43:07 · 1328 阅读 · 0 评论 -
clearTimeout无效
如图所示clearTimeout接受id作为参数，所以检查一下是否传入的不是id因为默认情况下setTimeout方法是会返回id但有时候会返回一个setTimeout对象比如使用vsCode 开发的同学在使用setTimeout时会自动引入timer对象，此时setTimeout就会返回Timeout对象，此时只需要将对应的id传入即可或者直接将引用注掉...原创 2019-10-22 15:40:10 · 7805 阅读 · 0 评论 -
h5移动端页面适配填坑（持续更新中）
一.安卓键盘弹起挤压ui1，在页面加载时即计算出页面的高度并保存this.viewHeight = document.body.clientHeight;2，在input框获取到焦点时将该值赋给最外层div即可document.getElementById("main_box").style.setProperty("height", this.viewHeight + "px");二..原创 2018-12-27 09:08:29 · 328 阅读 · 0 评论 -
vue eventBus实现原理，你没看懂算我输
刚开始拿到eventBus的时候很幼稚的想，用一个全局vue对象充当数据容器，那为什么不用一个全局的map就可以window.busMap = {}组件apd: window.busMap.a,<template> <div>{{pd}}</div></template>组件b created () {原创 2018-12-13 21:14:17 · 12191 阅读 · 2 评论 -
JS 银行卡格式输入框
JS 银行卡格式输入框效果http://www.oujin.fun/webPage/inputTest/index.html#/代码<template><div class="content row-center"><div class="boxStyle4 borderStyle row-center"> <input @input="l...原创 2018-12-05 16:09:25 · 682 阅读 · 0 评论 -
canvas文本绘制自适应以及自动换两行
自适应1算出文本宽度，后面的文本位置加上前面的宽度 // 获取字符串长度 getStrWidth(ctx, str) { var lineWidth = 0 for (let code of str) { lineWidth += ctx.measureText(code).width } ret...原创 2018-11-27 19:18:32 · 2711 阅读 · 0 评论 -
vue element table 表格列进行再排序
示例展示http://www.oujin.fun/webPage/dragTable/index.html#/用法https://github.com/oujin-nb/column_element_dragtable源码<template> <div> <el-table v-on="$listeners" v-bi...原创 2019-02-27 14:08:23 · 9087 阅读 · 0 评论 -
axios使用protobuf进行通讯
https://github.com/protocolbuffers/protobufhttps://github.com/dcodeIO/protobuf.js#pbts-for-typescriptProtocol Buffers 是一种轻便高效的结构化数据存储格式，可以用于结构化数据串行化，或者说序列化。它很适合做数据存储或 RPC 数据交换格式。可用于通讯协议、数据存储等领域的语言无关...原创 2019-04-04 19:39:17 · 2252 阅读 · 1 评论 -
element动态更换主题
未完待续原创 2019-04-09 11:36:30 · 2756 阅读 · 1 评论 -
快速上手indexedDb进行业务开发
这篇文章不是对indexedDb进行详细介绍，只是我在上手使用中发现完整介绍怎么使用indexedDB的资料实在太少，大部分就是为了混个阅读量简单介绍一下，所以整理一些我在使用过程中的经验方便大家在业务压力下快速上手传送门：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_APIhttps://dexie.org/docs/...原创 2019-05-30 14:20:01 · 466 阅读 · 0 评论 -
梳理所有前端异步解决方案
众所周知js是单线程，从头跑到尾然后不停的事件循环，但是浏览器是多线程的，所有前端所有的异步可以归纳为，js的事件循环在根据标准不停的前后执行不同异步线程的回调其实现在js对于异步的所有解决方案不管是async 还是 promise 还是监听什么的归根结底都是回调触发，而我们至今为异步所作的所有努力不过是让异步回调写的更加像同步一些目前前端对异步的处理大致经过这三个阶段1 纵向无限回调，比如...原创 2019-05-27 19:06:03 · 289 阅读 · 0 评论 -
echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步： 生成中国地图第二步： 定义点击事件根据反参生成省级地图所需要的参数第三步： 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts 2下载各省地图json 传送门// 引用初始化所需的中国地图import echarts from "echarts";import china from 'echarts/map/j...原创 2019-07-25 11:44:30 · 11285 阅读 · 16 评论 -
mpvue解决同一页面组件反复进入数据被覆盖的问题
问题当同一个页面组件被反复进入时由于在mpvue中他们用的是一套vm，所以后面渲染的数据就会将前面页面的数据覆盖，这样在我们回退时就不会有以前页面的记录，一直会是最后一张页面的记录思路每次当我们对同一页面组件进行跳转的时候将该页面的数据this.$data push进数据栈中，当在该页面组件执行回退事件unload是将最后放入的数据弹出，也就是前一个页面的数据，再将数据栈中的最后一个数据复制给t...原创 2018-11-23 14:46:13 · 5119 阅读 · 0 评论 -
微信小程序局部刷新触发整页刷新效果
效果图如上图所示，头部的选项栏时固定的（fixed），下部的信息栏是滚动的, 由于头部是fixed所以无法实现下拉刷新的效果，如果去掉fixed当我们上拉的时候，选项栏又无法固定，所以我们需要监听页面下拉的状态随时改变选项栏的状态1获取滚动状态 onPageScroll(e) { this.scrollTop = e.scrollTop },2信息栏监听下拉状态的改变而改...原创 2018-11-21 14:47:50 · 2253 阅读 · 0 评论 -
webpck -webkit-box-orient: vertical
/*! autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */信大哥的，没错原创 2018-11-21 14:30:55 · 333 阅读 · 0 评论 -
vue父子组件通讯--在组件内使用v-for
Vue组件化开发通过一个表格渲染的例子来讲 首先最终的效果是这样的，通过http通讯拿到后台数据然后通过vue父子组件通讯将数据传到子组件，最后通过v-for结合表格将数据加载出来首先拿到后台数据 然后将response复制给数组 //vue生命周期钩子 :组件实例创建完成dom未生成 created () {原创 2018-01-19 10:20:53 · 3553 阅读 · 0 评论 -
Vue实现前台页面组件化路由跳转
Vue.js 是一套构建用户界面的 渐进式框架。它非常容易与其它库或已有项目整合，而无须从头开始重构整个项目；另一方面，Vue 完全有能力驱动采用单文件组件来开发的更为复杂的单页应用。也就是说只需要一个页面就可以搞定很多复杂的功能，组件化 就跟小时候玩的乐高一样，每一个最基本的小组件再拼起来一个个大组件，然后以前页面与页面的切换变成组件与组件的切换，也就说，页面始终是不变的，就相当于一个容器，...原创 2018-02-09 12:21:34 · 10787 阅读 · 0 评论 -
js倒计时器可自定义时间和暂停
js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时 分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释）css html,body{width:100%;height:100%;}.content{height:100%;width:100%; }.row-center{display:flex;flex-原创 2018-02-06 11:05:14 · 4001 阅读 · 0 评论 -
bootstrap按钮下拉框可显示所选内容
我们知道 bootscript的按钮下拉框的按钮是不显示所选内容，只剩触发所选内容的点击事件， 所以在这里用原生的JS控制，做一个可以显示内容的下拉框 效果如下： H5 div class="btn-group"> button type="button" class="btn btn-primary dropdown-toggle" d原创 2018-02-07 14:39:46 · 1983 阅读 · 0 评论 -
css绘制自定义数据仪表盘
效果如下： 指针可以随自定义数据的改变而改变，H5 <body> <div class="dial_father"><!--表盘 --> <div class="dial_box"> </div> <!-- box -->原创 2018-02-28 14:12:54 · 3556 阅读 · 0 评论 -
webpack4搭建react项目实现前端模块化
webpack4搭建react项目实现前端模块化首先，你得把node.js,npm装好，然后新建一个文件夹app1cmd到这个文件夹下输入指令npm init -y这时，app 下会生成一个 package.json 文件2项目中安装 webpack npm install -D webpack -D就是–save-dev 这样安装的包的名称及版本号就会...原创 2018-03-26 11:08:52 · 6525 阅读 · 1 评论 -
React实现百分比布局
之前百度，各位大佬说 react各种不能进行百分比布局。都推荐使用rem布局，说是 react组件之间插入了一些div，导致百分比设置高度失效了，但是按照这种思路 我在根元素那里给他设置百分比不就行了吗<html><head lang="en"> <meta charset="UTF-8"> <title></ti原创 2018-04-02 15:05:28 · 7104 阅读 · 0 评论 -
React的Web端自适应布局（rem+flex）
React的Web端自适应布局（rem+flex）搭好react项目后开始画页面的时候才发现react不支持百分比布局，mmp! 后来经过一系列的调查后，决定使用rem自适应布局， rem（font size of the root element）是指相对于根元素的字体大小的单位。原理 通过js代码换算出各个屏幕的字体大小，然后1rem会等于换算出的字体大小，从而达到自适应...原创 2018-03-27 14:44:09 · 18012 阅读 · 0 评论 -
React map遍历点击获取key
React map遍历点击获取key值在使用react的时候不免需要遍历循环出dom,这时候可以通过点击过去产生的的每个dom的标识来操作首先准备一个需要遍历循环的集合，可以是键值对，也可以是数组， const fromIndex=[1, 2, 3, 4, 5];JSX允许在大括号中嵌入任何表达式，因此可以 内联 map() 结果所以新建一个对象，作为map结果的载体以便插...原创 2018-04-11 10:09:47 · 14187 阅读 · 1 评论 -
react实现通讯录效果
业务描述：通过react实现一个类似通讯录的页面，并可以通过点击侧边首字母跳转到对应的用户 大致效果 步骤 1，先造一批假数据 const users = [ [ {id: 0, name:"a",imgUrl:white}, {id: 1, name:'ahat',imgUrl:sy...原创 2018-06-11 15:08:36 · 3594 阅读 · 1 评论 -
HashRouter Cannot read property 'push' of undefined
场景 在子组件使用history跳转时失败this.props.history.push(a); Cannot read property ‘push’ of undefined原因 Router 组件的后代里头才有可能有 this.props.history 而我跳转方法所在的组件是后代组件的子组件，所以undefined了解决 将history对象...原创 2018-06-07 14:33:44 · 2694 阅读 · 0 评论 -
React点击切换子组件
业务描述 在如上图所示的页面上我需要分别点击底下的三个图标将中间内容部分分别替换成对应的组件，也就是在一个大组件中分别切换三个小组件思路 通过控制css属性display:none来控制三个页面是谁来显示，中间主要是组件之间的通讯值得一说实现 1 首先简单写好三个子组件/*通讯录*/class PageChatContent extends React.Component{...原创 2018-06-07 17:04:55 · 6115 阅读 · 0 评论 -
vue随滚动条滚动而改变属性
vue随滚动条滚动而改变属性scrollTop： 滚动条卷起的高度clientHeight： 滚动条可视高度scrollHeight： 滚动条总高度原创 2018-09-19 21:03:59 · 1413 阅读 · 0 评论 -
前端axios下载excel文件(二进制)的处理方法
示例 downExcel(){ var d=new Date() this.$http({ url: "", method: 'get', responseType:'blob', params: { ...原创 2018-10-18 17:18:14 · 1439 阅读 · 2 评论 -
canvas绘制多张网络图片
为了解决多重回调，所以采用promise第一步 新建一个方法接受网络图片url返回一个promise对象 // 新建promise对象 downfile(url) { return new Promise(function (resolve, reject) { wx.downloadFile({ url: ur...原创 2018-11-19 10:16:04 · 1787 阅读 · 0 评论 -
Js与BootStrap实现简易计算器
Js与BootStrap实现简易计算器 页面展示主要用到了Bootstrap的样式和布局 源码如下<div class="container"> <div class="row"> <button class="col-xs-4" id='Show' ></button> </div> </div><div class="container"> <div clas原创 2017-09-12 16:24:36 · 1939 阅读 · 0 评论