超人不会飞2021-CSDN博客

原创 Vue中手写checkbox自定义复选框、单选全选

可以自定义各种样式的单选复选框，比一些组件用起来方便。Vue中手写checkbox自定义复选框、单选框。案例展示，样式就不多阐述了，自己根据情况写。

2023-07-21 15:09:23 796

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。如果需要马上应用最新版本，可以使用 wx.getUpdateManager 进行更新重启。解决办法：就是使用版本更新管理器wx.getUpdateManager()，在每次进入小程序时执行一遍版本检测、更新的代码。小程序发布后，若用户不是首次打开小程序，一般会出现不能立即更新到最新版本。微信开发者工具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试。

2023-06-14 11:39:26 1518

原创微信小程序组件scroll-view滚动到底部多次触发加载如何解决？

在 iOS 真机上，scroll-view 滚动时会多次触发 scrolltolower 事件的问题，可以设置一个“加载标识”（如 DisableTrigger）来避免重复请求下一页数据。在 onreachBottom 方法中，判断 DisableTrigger 是否为 true，如果是，则执行下一页数据的加载，否则不做任何操作。在 init()方法中，在请求数据前将 DisableTrigger 设置为 false，表示当前正在加载数据。

2023-05-23 11:13:07 2374

原创小程序页面滚动到指定位置

1.使用uni.createSelectorQuery().select().boundingClientRect()查询到需要滚动到的元素位置。微信原生也是一样的，使用wx.createSelectorQuery()和wx.pageScrollTo()2.滚动到目标位置: uni.pageScrollTo()

2023-03-31 10:59:48 2793

原创 vue 实现一键复制文字

【代码】vue 实现一键复制文字。

2022-09-05 11:11:11 464

原创 vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动

以下代码项目中直接使用即可，此种方法是通过鼠标拖拽进行滚动，滑动滚轮无效果。当然快捷键，shift+鼠标滚轮可以控制横向滚动，对用户来说体验不友好。

2022-07-20 13:29:42 10552 8

原创超简单js计算2个时间相差多少天

直接看举例：n1 = "2021-10-25 18:29:59"var dateBegin = new Date(n1); //可以把n1转化成“Mon Oct 25 2021 18:29:59 GMT+0800 (中国标准时间)”var date = new Date(); //获取当前时间var result = date.getTime() - dateBegin.getTime(); var joinTime = Math.floor(result / (24 * 3600 * 1000)

2021-11-26 12:44:10 1861 1

原创基于vue3封装一个分页组件

目的：封装一个统一的分页组件，方便复用。分页的本质：分批次查询数据（基于页码page和每页条数pagesize）,后端接收到分页参数后，会基于这些参数查询数据库，然后基于数据库进行分页：基于SQL语句（select * from user limit n, m）落的代码：<template> <div class="xtx-pagination"> <a @click='changePage(false)' href="javascript:;" :clas

2021-09-29 11:46:37 298

原创 Vue3组合API-provide和inject(依赖注入)

组合API-provide和inject(依赖注入)目标：掌握使用provide函数和inject函数完成后代组件数据通讯provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个。一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。父级组件使用provide向下进行传递数据；子级组件使用inject来获取上级组件传递过来的数据；使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共

2021-09-11 12:09:06 745

原创 vue3中ref属性的解释和使用方式

组合API-ref属性在vue2.x中，可以通过给元素添加ref='xxx'属性，然后在代码中通过this.$refs.xxx获取到对应的元素然而在vue3中时没有$refs这个东西的，因此vue3中通过ref属性获取元素就不能按照vue2的方式来获取。目标：掌握使用ref属性绑定DOM或组件获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开基于Vue2的方式操作ref-----数组场景<ul> <li v-for="(item, index)

2021-09-11 10:04:29 20755

原创使用Element组件Calendar日历标注当前日期和周六日

使用element日历插件，标注今日日期和周六日实现这种效果的代码如下：<template> <el-calendar v-model="value"> <template slot="dateCell" slot-scope="{ date, data }"> <div class="date-content"> <span class="text">{{ getDay(date) }}</sp

2021-09-08 12:34:47 5178 4

原创如何将世界标准时间格式“2020-04-30T04:16:26.000Z“转换格式

世界标准时间转换成日期对象代码 // 录入时间格式转换 fromTime(timer) { console.log(timer) var jsonDate = new Date(timer).toJSON() return new Date(new Date(jsonDate) + 8 * 3600 * 1000) .toISOString() .replace(/T/g, ' ') .replace(/\.[\d

2021-09-03 18:17:57 954

原创 Git如何修改远程仓库地址

Git 更改远程地址修改之前可以先查看下自己的远程地址git remote -v更换远程地址命令git remote set-url origin 新的地址按照此方法修改了远程地址，再次推送就会传到新的地址了

2021-08-30 14:07:47 149

原创 v-model双向绑定的原理分析及使用

vue中v-model使用v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：1. v-bind绑定一个value属性2. v-on指令给当前元素绑定input事件自定义组件使用v-model，应该有以下操作：接收一个value prop触发input事件，并传入新值一般来说我们用v-model是在input中常见用法如下：<input v-model="inputValue">其实v-model是一种语法糖，v-model 上面

2021-08-28 14:09:03 2468

原创 Vue中svg-icon组件的使用方法

svg-icon组件的基本流程：svg-icon是一个全局组件，在src/icons/index.js中定义并注册成立全局组件。在main.js中引入了它额外需要svg-sprite-loader@4.1.3的配合，及对应的vue.config.js中的配置。它的使用格式<svg-icon icon-class="文件名"/> 。这里的文件名就是在src/icons/svg下的文件名如何在新项目使用svg-icon组件步骤1.安装依赖npm i svg-sprite-loade

2021-08-23 19:51:52 1753

原创 element-ui表格table翻页如何让序号延续递增

在使用element-UI的el-table时，我们添加了type=“index” ，如果设置了 index 则显示该行的索引（从 1 开始计算）。但是每一页都是从1开始计算。当我们想要切换页码时，希望序号接着上一页的，实现表格翻页序号递增/延续。下面演示如何实现分页切换时序号递增，代码如下：结构<el-table-column label="序号" type="index" :index="indexAdd" width="50" />js<script>expo

2021-08-18 15:34:29 2739

原创 Element-ui Form表单校验-兜底校验-自定义检验规则

用户登录表单-数据双向绑定<template> <div class="form-container"> <el-form label-width="80px"> <el-form-item label="手机号"> <el-input v-model="form.mobile"></el-input> </el-form-item> <el-form-

2021-08-17 16:12:13 3794 1

原创 nodejs的介绍使用+npm的作用+淘宝镜像源+本地服务器

Node.js简介JavaScript 能否做后端开发Node.js 的出现，使得JavaScript有了做后端开发的能力。Node.js可以做什么Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和 API。然而，基于 Node.js 提供的这些基础功能，很多强大的工具和框架如雨后春笋，层出不穷，所以学会了 Node.js ，可以让前端程序员胜任更多的工作和岗位！基于 Express/Koa 框架(http://www.expressjs.com.cn/)

2021-08-13 13:17:54 1363

原创数组对象转换成树形结构如何在vue中封装复用

在工作中我们经常会遇到数组转为树形对象的需求，那么如何实现呢？// 思考题：数组转化成树(难点 - 难点 - 难点) const data = [ { id: "01", name: "张大大", pid: "", job: "项目经理" }, { id: "02", name: "小亮", pid: "01", job: "产品leader" }, { id: "03", name: "小美", pid: "01", job: "UIleader" },

2021-08-11 10:48:01 1296

原创 vue全家桶之vuex状态管理的入门速成秘籍

vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。组件之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间数据共享：EventBus$on 接收数据的那个组件$emit 发送数据的那个组件使用 Vuex 统一管理状态的好处Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。1、能够在 vuex

2021-08-08 21:58:54 868

原创 vue项目在打包时，如何一键去掉所有console.log输出

vue项目在打包时，去掉所有的console.log输出目的：希望项目上线后想让所有的打印失效分析如果自己删除, 那开发还得加回来, 注释也一样啊, 麻烦能否配置环境变量, 让代码自己来判断呢，配置好就不用我们在来回操作了那么接下来就是实现方式了：首先在项目根目录下配置文件(脚手架环境变量) 在.env.development (开发环境变量) NODE_ENV 变量名随便起, 值不用加引号就是字符串了 NODE_ENV

2021-08-05 21:44:58 9227 3

原创如何封装一个vue自定义指令自动获取文本框焦点

一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 1.新建一个文件，命名为directive.jsimp.

2021-08-04 20:43:00 1370

原创 vue开发环境怎么使用vue-cli代理服务器解决跨域

目标：解决跨域问题什么是跨域: 网页所在url的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有一个对应不上, 就发生跨域跨域是浏览器对ajax做出的限制例如我们演示用axios请求网易新闻地址, 发现跨域报错，请求不到数据 http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html 代理转发如果后端jsonp也不弄, cors也不弄, 就给你个接口地

2021-08-03 15:04:08 732

原创什么是axios拦截器？有哪些作用和使用场景

axios介绍及安装Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。官方资料和介绍从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求支持 Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF使用 npm安装:$ npm install axios或者直接使用 cdn:<script src="ht

2021-07-26 19:15:47 18115 2

原创 vant官网-vant ui 首页-移动端Vue组件库

Vant 是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/通过 npm 安装在现有项目中使用 Vant 时，可以通过npm或yarn进行安装：# Vue 2 项目，安装 Vant 2：npm i vant -S# Vue 3 项目，安装 Vant 3：npm i vant@ne...

2021-07-16 09:37:33 53159

原创 JavaScript宏任务和微任务、事件循环及经典案例

宏任务和微任务、事件循环JavaScript是单线程的，也就是说，同一个时刻，JavaScript只能执行一个任务，其他任务只能等待。为什么JavaScript是单线程的js是运行于浏览器的脚本语言，因其经常涉及操作dom，如果是多线程的，也就意味着，同一个时刻，能够执行多个任务。试想，如果一个线程修改dom，另一个线程删除dom，那么浏览器就不知道该先执行哪个操作。所以js执行的时候会按照一个任务一个任务来执行。为什么任务要分为同步任务和异步任务试想一下，如果js的任务都是同步

2021-07-11 17:54:49 2393

原创如何将VSCode添加到鼠标右键菜单

Windows上面安装Visual Studio Code编辑器,常常会因为安装的时候忘记勾选等原因,没有将"Open with Code(右键快捷方式)"添加到鼠标右键菜单里,使用起来不便, 下面将解决我们如何手动把VSCode添加至鼠标右键菜单之中.解决办法：首先：在桌面鼠标右键新建立一个文本文件(txt文件),然后将这个文件后缀改为: .reg, 文件名任意,例如:vscode123.reg，随意命名哦，后缀是.reg即可。然后鼠标右键用记事本打开，注意不要双击，已经不是txt文本了。打开之后

2021-07-07 14:32:09 7755 9

超人不会飞