梦一场江南烟雨-CSDN博客

此次封装，我们实现了以下几点要求（1）指定参数名称，返回该参数的值或者空字符串（2）不指定参数名称，返回全部的参数对象或者 {}（3）如果存在多个同名参数，则返回数组（4）不支持URLSearchParams方法function getUrlParam(url, key) { let result = {} url.replace(/\??(\w+)=(\w+)&?/g, (str, keyname, val) => { if (result[keyna

2022-02-23 16:33:36 213

原创性能优化之创建文档碎片：document.createDocumentFragment

什么是文档碎片？，文档碎片可以干嘛？文档碎片就类似于一个小型的dom，插入到dom中时速度会更快在浏览器中，我们一旦把节点添加到document.body（或者其他节点）中，页面就会更新并反映出这个变化，对于少量的更新，一条条循环插入也会运行很好但是，如果当我们要向document中添加大量数据时(比如10w条)，如果像上面的代码一样，逐条添加节点，这个过程就可能会十分缓慢。为了解决这个问题，我们可以引入createDocumentFragment()方法，它的作用是创建一个文档碎片，把要插入的

2022-02-18 17:49:20 496

原创性能优化之请求动画帧requestAnimationFrame（）的使用

requestAnimationFrame是什么？requestAnimationFrame()即请求动画帧，是HTML5中提供的动画API，简称rAF。可以优化浏览器中并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。与setTimeout相比，requestAnimationFrame最大的优势是由浏览器来决定回调函数的执行时机，即紧跟浏览器的刷新步调。具体一点讲，如果屏幕刷新频率是60Hz，那么回调函数每16.7ms被执行一次，如果屏

2022-02-18 17:29:59 2642

原创关于vue中render函数的使用

可能大家都知道vue有个render函数，但是至于怎么去使用，很多人可能都还不会，所以很多项目里面几乎都没有用过render函数render函数跟template有什么区别？他们都是类编译器render函数就是template的下一步，当编好template后，vue就会通过render函数去调用createElement，createElement会根据模板来创建一个真实的dom接下来我就叫大家怎么使用render函数：例如：建立一个子组件button.vue:<script>

2021-11-04 12:18:40 755

原创用JS实现图片格式的转换

html代码： <div class="wrap"> <div class="wrap_info"> <div class="btn select_img"> 选择图片<input type="file" id="inputimg" /> </div> <div class="image_name"></

2021-11-04 11:50:20 3221 4

原创开发自己的npm模块包并进行发布、使用

首先你得注册一个npm的账号至于怎么注册npm账号就不用我多说了吧点击这里到npm进行注册：https://www.npmjs.com/signup创建项目例如创建一个格式化数组的项目：formatarray在formatarray文件夹下打开命令行窗口，然后执行以下命令：npm init输入npm init后按回车键，然后根据提示一步一步操作package name输入你想要定义的包名，例如我的包名就叫formatarray，如果不输入它会默认以你的文件夹名字为包名到descripti

2021-10-27 18:01:59 696

原创 vue开发自定义的全局公共组件

这里我主要介绍两种自定义全局公共组件的方法（1）第一种：首先在components中新建一个文件夹，我这里做的是全局加载动画组件所以命名的是Loading文件夹如图：其中index.js为组件加载文件，index.vue为组件模板文件index.js文件：// 引入组件import Loading from './index.vue'// 创建个空对象const obj = {}// 设置安装方法obj.install = (Vue) => { // 1. 创建组件构造

2021-08-20 17:50:52 4728 6

原创 vue输入框限制各种输入格式

（1）限制只能输入数字、带小数点的数字<el-input v-model="form.userName" @input="onInput('keyName', $event)"></el-input>// 限制只能输入数字、带小数点的数字、小数点保留5位，想要小数点后保留多少位，可将{0,5}中的5改为对应的位数，例如保留1位：{0,1}onInput(key, event){ this.form[key] = event.match(/^\d*(\.?\d{0,5})

2021-08-12 10:25:11 2259 2

原创给滚动条加个样式

我不喜欢废话，直接上代码~给以下body的滚动条加个样式<div class="body"> <div class="content">这是内容</div></div>我用的是scss预处理器，所以样式是嵌套的，可以自行拆解开来<style lang="scss" scoped>.body { height: 450px; overflow: auto; /*滚动条整体样式*/ &::-webkit

2021-08-10 16:01:44 206

原创在uni-app中使用element-ui

uni-app的相关UI组件库中可能会没有你想要的功能组件，自己去开发的话需要花很多时间，此时咱们可以将别的UI组件库给安装到uni-app中来，达到直接使用该UI组件库的功能组件，例如，安装element-uiuni-app使用element-ui需安装以下插件npm i element-ui -S按需引入组件需要装以下插件npm install babel-plugin-component -D当你安装完以上插件后，需要在main.js中进行引入，例如引入全部:import Vue fr

2021-07-21 15:22:42 23691 30

原创 vscode代码相关自动格式化配置

vscode：setting.json{ "editor.renderIndentGuides": false, "editor.codeActionsOnSave": { "source.fixAll": true }, "git.confirmSync": false, "launch": { "configurations": [], "compounds": [], "search.exclude": { "system/": tru

2021-07-09 17:04:16 1301 2

原创 vuex数据持久化处理

大家都知道在使用vuex时有一个弊端就是，就是一旦页面刷新，所有之前存储的状态就全部没了，这是因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存数据可以使用 localStorage 或者sessionStorage 存储在本地，保证刷新后数据不会丢失。但我们也可以使用插件实现刷新后数据不丢失在这里我推荐使用这两个插件vuex-pers

2021-06-01 14:34:33 2917 5

原创 vue非父子组件、兄弟组件之间的传值通信

一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用props来显示的声明父组件传递的属性，例如：子组件：<template> <div class="not-found"> {{ message }} </div></template><script> props: ['message'], export default {

2021-05-31 17:57:48 1120 4

原创如何使用命令行删除安装的所有node_modules

首先要全局安装一个工具npm install rimraf -g其次是在项目里运行以下命令rimraf node_modules搞定

2021-05-31 17:34:11 1008

原创 uni-app与H5页面的数据传递

最近用uni-app开发多端应用时候遇到这样一个问题：（1）uni-app需要向H5页面产地数据（2）H5页面也需要向uni-app传递数据这里我介绍的主要是H5页面向uni-app传递数据话不多说，直接上代码这里是uni-app里面代码注意： @message="getMessage"是监听H5页面传递的数据官方有文档：https://uniapp.dcloud.io/component/web-view<template> &l

2020-08-07 17:43:15 5486 1

原创 vue-cli4.x及vant搭建移动端项目（rem适配）

首先安装vue-cli4.x脚手架全局安装最新的脚手架npm install @vue/cli -g 生成项目vue create test_project回车键确认执行，空格键进行选择所需要的配置我一般习惯以下这些:Manually select featuresBabelRouterVuexCss Pre-processorsLinter/FormatterUse History (Y)SASS/SCSS (with node-sass) 或者 Less

2020-06-30 12:54:36 1469

原创生成二维码并下载二维码（兼容IE等浏览器）

由于项目需求要点击按钮后，生成二维码并把二维码下载到本地，于是找了大量资料都没能实现兼容IE浏览器的方法，最后终于发现file-saver能完美解决这个问题首先在index.html文件中引入file-saver的js文件，（也可以使用npm安装依赖，至于如何安装使用可百度，这里不做介绍）<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.2/FileSaver.js"></script>要生成二维码

2020-06-12 13:39:01 1776 2

原创 vue公众号配置动态加时间戳的链接

为了防止微信网页的缓存也是绞尽脑汁啊最近琢磨了一个动态为链接加时间戳的方法思路首先在项目根目录下加一个中转文件jump.html这个文件主要是用来跳转到项目真正的地址，放心–毫秒级跳转，不会占用太多时间，也没有明显的跳转视觉，测试了一下大概8，9毫秒的样子jump.html里面的内容是这样，根据自己项目实际情况来修改<!DOCTYPE html><html> <head> <script> // 将链

2020-06-03 18:31:23 1108

原创 vue实现输入密码时显示明文，过一秒变为密文

<el-form :model="changePassword" ref="ruleForm" label-width="100px"> <el-form-item label="新密码：" prop="password"> <el-input @input.native="onInput($event, 'newPassword')" ...

2020-05-28 21:48:51 2544 1

原创微信公众号页面禁止页面下拉查看网页来源

微信公众号页面禁止页面下拉查看网页来源应产品需求加一个禁止页面下拉查看网页来源的功能，网上看了下结合自己的情况完美实现，JS代码如下function noPullDown(selector) { //禁止页面拖动 document.querySelector('body').addEventListener('touchmove', function (e) { ...

2020-03-23 16:25:11 2057

原创 vue实现移动端靠边可拖动悬浮按钮

完整代码<template> <div class="float_button"> <div @click="onBtnClicked" ref="floatButton" class="float_info" :style="{'width': ...

2020-03-11 15:56:21 7884 2

原创对js中arguments的理解

export default function (target) { for (let i = 1, j = arguments.length; i < j; i++) { let source = arguments[i] || {} for (let prop in source) { if (source.hasOwnPr...

2020-03-06 11:58:31 276

原创公众号H5页面截屏并保存图片

直接贴代码html代码<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-...

2020-01-08 19:18:39 3447

原创 vue-cli2.x结合vant搭建项目vw为单位布局

1.安装vue-cli脚手架 npm intatll -g vue-cli 安装完毕之后可以检查安装版本即 vue -V2.创建一个项目vue init webpack YourProjectName3.接下来安装vw布局需要的插件我们需要安装7个插件（1）postcss-px-to-viewport （2）postcss-write-svg （3）postcss-cssnex...

2019-10-16 10:29:15 1828 2

原创 uni-app搭建项目

创建uni-app-----这里有教程（https://uniapp.dcloud.io/quickstart）vue create -p dcloudio/uni-preset-vue my-project可以安装less1、改变底部tabBar：uni.setTabBarItem({ index: 0, text: this.i18n.tabs.home...

2019-10-11 14:55:07 334 2

原创 mpvue搭建项目，小程序

1、安装脚手架npm install --global vue-cli2、创建项目vue init mpvue/mpvue-quickstart YourProjectName3、cd 到项目里面安装依赖cd YourProjectName4、安装依赖cnpm install5、安装lesscnpm install less less-loader --save然后在...

2019-10-11 14:43:33 123

原创前端滚动插件：better-scroll

better-scroll 是什么better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。better-scroll 是基于原生 JS 实现的，不依赖任何框架。它编译后的代码大小是 63kb，压缩后...

2019-09-22 16:24:59 989 1