- 博客(34)
- 收藏
- 关注
原创 vue3 项目初始化配置 安装 element-ui、sass、修改vue在setup中name属性
在vue3中使用vite脚手架,vue组件中name属性默认文件名称,导致vue文件名称无法和Router配置的name对应,在使用KeepAlive组件时不是太友好安装命令# NPM# Yarn配置vite.config.ts// ...plugins: [// ...],})使用// 在script 设置name
2023-08-29 17:14:38
450
原创 解决使用fastclick在ios输入框点击不灵敏,ios 软键盘关闭input失焦后页面上移点击不了问题
【代码】解决使用fastclick在ios输入框点击不灵敏,ios 软键盘关闭input失焦后页面上移点击不了问题。
2023-03-08 11:14:18
373
原创 微信小程序自定义键盘|仿微信支付数字键盘
实现效果简介点击金额模块区域,获取焦点。点击非金额模块区域,失去焦点且隐藏支付键盘。支持小数点两位数字。付款金额默认置灰,点击付款按钮无效。当输入付款金额后,付款按钮还原正常状态。删除按钮可以通过icon图标或者图片来替换,达到和微信数字支付键盘一样的效果。有更合适的实现方式或者代码不合理的地方,欢迎留言交流实现代码// index.wxml<view class="pay-container" catchtap="handleHiddenKey"> <
2022-02-24 12:56:41
4774
2
原创 Vue中Axios网络请求封装-企业最常用封装模式
1.通过命令安装axiosyarn add axios&npm install axios --save2.创建一个js文件// utils/request.jsimport axios from 'axios'import { MessageBox, Message } from 'element-ui' // 引入element-ui库import store from '@/store' // vuex// 创建一个axios实例const service = axio
2021-10-27 17:55:29
336
原创 Nginx安装及代理使用
Nginx1.window安装1.下载地址 http://nginx.org/en/download.html2.解压下载的文件3.启动nginx 3.1 双击nginx.exe 3.2 cmd 切换到nginx目录下,输入nginx.exe或者start nginx4.检查是否启动成功:地址栏http://localhost:80 cmd:tasklist /fi "imagename eq nginx.exe"5.nginx配置文件是conf目录下nginx.conf2.n
2021-10-23 11:09:45
1062
原创 Nuxt配置Element-UI按需引入-纯干货-亲试完全有效
当前使用的版本:Nuxt@2.15.7、Element-ui@2.15.2第一步 安装按需引入插件 npm install babel-plugin-component -D yarn add babel-plugin-component --dev第二步找到nuxt.config.js// 屏蔽或删除element-ui-css(按需引入会加载对应模块的css)css: [ // 'element-ui/lib/theme-chalk/index.css' ],// 添加-按需打
2021-07-29 17:17:51
1678
1
原创 vue路由跳转取消上个页面的请求
为什么会使用当一个页面的请求过长时,然后点击链接跳转到新的页面,会导致不必要的资源浪费,如果上一个接口出现报错情况,会误导用户导致体验感不好。怎么使用在axios设置import axios from 'axios'import store from '@/store'import { getToken } from '@/utils/auth'// 创建一个 axios 实例const service = axios.create({ baseURL: process.env
2021-07-26 14:57:24
886
原创 JS中如何让(a==1&&a==2&&a==3)同时成立
1. Object基础介绍Object.prototype.valueOfvalueOf方法的作用是返回一个对象的“值”,默认情况下返回对象本身。var obj = {};obj.valueOf() === obj // trueconsole.log(obj + 1) // '[object Object]1'Object.prototype.toStringtoString方法的作用是返回一个对象的字符串形式,默认情况下返回类型字符串。var obj= {};obj.toSt
2021-07-21 18:05:43
710
原创 Element-UI中el-cascader组件多语言切换文字同步更新
问题:在使用el-cascader组件进行中英文语言切换时,发现选中文字不进行语言模式同步。在网址上搜索了下当前问题,发现暂无解答,自己就结合官方文档实现了一种方案。实现思路<template> <!-- 通过cascaderState显示隐藏来重新渲染该组件 --> <el-cascader v-if="cascaderState" v-model="value" :options="options" :props="..
2021-07-03 12:33:30
914
1
原创 document.documentElement.scrollTop与document.body.scrollTop的兼容写法
场景分析document.documentElement与document.body输出DTD相关说明:页面具有 DTD或者说指定了 DOCTYPE 时,使用 document.documentElement。页面不具有 DTD或者说没有指定了 DOCTYPE时,使用 document.body。设置<!DOCTYPE html>效果显示:document.documentElement.scrollTop可以获取滚动的值document.body.scrollTop的值
2021-06-05 10:26:47
912
原创 Vue动态添加路由(addRoutes) 校验用户是否登录且排除白名单页面
Vue动态添加路由通过官方路由API router.addRoutes 实现。废话不多说直接上代码,欢迎留言交流!const whiteList = ['/login', '/reset-password'] // 可直接访问的白名单页面router.beforeEach(async(to, from, next) => { // 确定用户是否已登录 const hasToken = getToken() // 拿到用户登录的token if (hasToken) { if
2021-04-22 19:42:41
1044
原创 Promise对象详细描述,附项目例子
1. Promise 基本用法Promise:是异步编程的一种解决方案,比较传统的解决方案(回调函数)更合理和强大。有三种状态:pending(进行中)、fufilled(已成功)、rejected(已失败)function getDate(val) { return new Promise((resolve, reject) => { if (val) { resolve('成功') } else { reject('error') }
2021-03-21 15:28:45
235
原创 面试题:通过连写参数方式获取object的值
下面代码实现通过’a.b.c’连写的方式实现object的取值:getValue(obj, ‘a.b.c’ // {name: ‘Martin’})代码const obj = { a: { b: { c: { name: 'Martin' } } } }// 函数封装function getValue(obj, keys) { if (typeof keys !== 'string') { thro.
2021-03-03 15:26:36
879
2
原创 js中比较两个对象是否相等,模拟lodash的isEqual
本文章主要介绍了js中比较两个对象是否相同的方法1. 常规比较在两个相同数据的对象中比较值。s1保存一个堆的地址,s2保存一个堆的地址,这两个堆的地址是不同的,所以它们不等。const s1 = { name: 'Martin'}const s2 = { name: 'Martin'}console.log(s1 === s2) // false2. 原生js实现对象是否相等var obj1 = { name: 'Martin', age: 18, obj: { .
2021-03-02 18:21:59
1780
原创 Vue+Element中Table懒加载删除或编辑数据后不动态更新
1.问题的来源在Element中使用Table树形数据懒加载(设置 lazy 属性为 true)模式。框架会通过row-key指定的属性来缓存操作者异步请求的数据 ,所以我们进行删除或编辑操作后重新请求数据,框架会优先通过row-key指定的id来检查是否已存在,如果数据存在使用旧数据,如果数据不存在使用新数据,所以table中查看更新后的数据发生没有变化。下面是实际演示例子:代码:<template> <el-table ref="table" :dat.
2021-02-24 18:20:46
5660
1
原创 函数式编程01之纯函数、函数组合或饲养函数、结合律
1.什么是纯函数概念:相同的输入得到相同的输出,不依赖且不影响外部环境也不产生任何副作用。优点:易读/易维护。代码:不是纯函数:var a = 1;function test() { console.log(a); // 当a的值被改变后,下次在执行test()会得到不同的结果}test()纯函数:var a = 1;function test(num) { console.log(num);}test(a);2.函数组合或饲养函数概念:由若干个纯函数、偏函数.
2021-02-21 12:08:31
216
原创 JS运算符及显示隐式类型转换
1.加法规则布尔值和布尔值相加、数字和布尔值相加。布尔值默认会自动转成数值,然后相加。console.log(true + false) // 1console.log(2 + true) // 3两个字符串相加。这时加法运算符会变成连接运算符,返回一个新的字符串。console.log('abc' + 'def') // abcdef字符串与非字符串相加。这时非字符串会转成字符串,再连接在一起。console.log(123 + 'abc') // 123abc对象.
2021-02-21 12:06:47
192
原创 JS中的函数节流及实现
1.什么是函数节流概念:函数节流(throttle)是指连续触发事件,但是在n秒中只执行一次.2.什么时候会使用函数节流前端开发过程中有一些事件onresize,scroll,mousemove 等等,在短时间内会被频繁触发。如果不做限制的话有可能一秒之内执行几十次、几百次,那不仅会浪费计算机资源,还会降低程序运行速度,严重的话甚至造成浏览器卡死、崩溃,这种问题显然是致命的。所以需要我们去减少不必要的执行次数。3.代码实现/** * 节流 * @param {Function} f.
2021-02-21 12:05:09
1166
原创 JS中的函数防抖及实现
1.什么是函数防抖概念:函数防抖(debounce)是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。2.什么时候会使用函数防抖前端开发过程中有一些事件onresize,scroll,mousemove 等等,在短时间内会被频繁触发。如果不做限制的话有可能一秒之内执行几十次、几百次,那不仅会浪费计算机资源,还会降低程序运行速度,严重的话甚至造成浏览器卡死、崩溃,这种问题显然是致命的。所以需要我们去减少不必要的执行次数。3.代码.
2021-02-20 19:52:29
600
原创 Vue后台面包屑导航实现
1.基础知识$route.matched 类型: Array<RouteRecord>一个数组,包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。const router = new VueRouter({ routes: [ // 下面的对象就是路由记录 { path: '/foo', component: Foo, children: [ .
2021-02-20 17:33:37
889
原创 Vue2.x生命周期执行顺序
1.介绍vue每个组件都是独立的,每个组件都有一个属于它的生命周期。从一个组件的创建、挂载、更新、销毁,这就是一个组件的生命周期。2.生命周期图 本图来源于vue官网3.单组件执行顺序进入页面默认会自动执行beforeCreate -> created -> beforeMount -> mounted beforeCreate:在执行该函数时,$el、$data、methods、computed在this中【无法获取】 created:在执行该函数时,$.
2021-02-20 17:31:36
709
原创 vue-devtools安装
1.前言vue-devtools是用于调试vue应用,这可以极大地提高我们的调试效率。2.chrome商店直接安装vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。3.手动安装vue-devtools第一步:从git上clone vue-devtools地址git clone https://github.com/vuejs/vue-devtools.git第二步:安装依赖npm install 或.
2021-02-20 17:29:50
304
原创 vue引入ant-design-vue按需加载编译报错解决方案
vue引入ant-design-vue按需加载编译报错信息 error in ./node_modules/ant-design-vue/es/style/index.lessModule build failed (from ./node_modules/less-loader/dist/cjs.js):// https://github.com/ant-design/ant-motion/issues/44.bezierEasingMixin();^Inline JavaScript is
2021-02-20 17:27:56
3653
原创 Vue-cli3.0配置Bootstrap
第一步: 安装插件yarn 安装: yarn add jquery 或者指定版本:yarn add jquery@1.12.4 yarn add bootstrap 或者指定版本:yarn add bootstrap@3.3.7 yarn add popper.jsnpm 安装 npm install juqery --save npm install bootstrap --save npm install popper.js
2021-02-20 17:25:27
271
原创 Object-属性类型
ECMAScript中有两种属性:数据属性和访问器属性数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有4个描述其行为的特征。1.[[writable]]: 表示能否修改属性的值。默认值为 true2.[[Enumerable]]: 表示能否通过for-in循环返回属性。默认值为 true3.[[Configurable]]: 表示能否通过delete删除属性从而从新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。默认值为 true4.[[valu
2021-02-20 17:22:52
515
原创 javaScript encodeURL与encodeURLComponent区别
1. URL编码方式Global对象的encodeURL()和encodeURLComponent()方法可以对URL进行编码。有效的URL中不能包含某些字符串,例如空格。他们用特殊的UTF-8编码替换所有无效的字符,从而让浏览器理解。encodeURL()主要用于整个URL,而encodeURLComponent()主要用于对URL中的某一段。它们的区别在于,encodeURL()不会对本身属性url的特殊字符进行编码,例如“冒号、正斜杠、问号、井号”;而encodeURLComponent()则会对
2021-02-20 17:16:44
1109
原创 javaScript垃圾收集
javaScript具有自动垃圾收集机制,开发人员不用再关心内存的使用问题,执行环境会负责管理代码执行过程中使用的内存。垃圾收集器会按照固定的时间间隔,周期性地执行这一操纵。1. 标记清除javaScript中最常用的垃圾收集方式是标记清除。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后,垃圾收集器完成内存清除工作。销毁那些带有标记
2021-02-20 17:15:00
149
原创 javaScript简介
1.前言它是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它【不具备开发操作系统】的能力,而是只用来【编写控制其他大型应用程序】(比如浏览器)的“脚本”。它也是一种嵌入式(embedded)语言。它本身提供的核心语法不算很多,只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O(输入/输出)相关的 API,都要靠【宿主环境】(host)提供,所以 JavaScript 只合适嵌入【更大型】的应用程序环境,去调用宿主环境提供的底层 API。2.
2021-02-20 17:11:58
178
原创 Sql Server 2008数据库备份和还原
自动备份:管理---维护计划---维护计划向导---下一步---选择(备份数据库-完整-差异)---下一步---选择要备份的数据表---完成手动备份:数据库---任务---备份还原: 选择要还原的数据库---任务---还原--数据库--常规(选择备份文件)--选项--选择(覆盖现有数据)
2015-08-20 09:43:35
322
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人