- 博客(33)
- 收藏
- 关注
RSS订阅原创 Vue3+Element Plus 按需加载loading以服务方式调用不生效问题
【代码】Vue3+Element Plus 按需加载loading问题。
2024-04-30 14:23:48
516
原创 TS实现设计模式——单例模式
单例模式的目的是限制一个类只能被实例化一次，提供一个全局的访问点。单例模式又被分为懒汉单例模式（懒加载）和饿汉单例模式（预加载），懒汉单例模式就是在第一次调用时实例化，饿汉单例模式是类加载时就实例化。懒汉单例模式（懒加载）export default class RouterUtil{ private static _routerUtil:RouterUtil static instance():RouterUtil{ if(this._routerUtil===undefine.
2022-03-17 11:01:14
3762
原创 JS——判断数据类型的方法
判断数据类型的方法JS中常见的几种数据类型：基本数据类型：字符串（String）、数字（Number）、布尔（Boolean）、空值（Null）、未定义（Undefined）、Symbol、BigInt引用数据类型：对象（Object）、数组（Array）、函数（Function）typeof常见方法。一般用来判断基本数据类型，如：string、number、boolean、symbol、bigint(es10新增一种基本数据类型bigint，具体介绍)、undefined等。typeo
2022-03-15 09:46:49
187
原创 JS——数组方法(详细总结～)
一、创建数组1.使用数组字面量方法//创建一个数组let arr=[]//创建一个包含1项数据为20的数组let arr=[20]//创建一个包含3个字符串的数组let arr=['a','b','c']2.使用Array构造函数//无参构造 //创建一个空数组let arr=[]//带参构造//1.传入一个数值参数，表示创建一个初始长度为指定数值的空数组//创建一个包含10项的数组let arr=new Array(10)//2.传入一个非数组的参数或者参
2022-03-09 17:21:08
858
1
原创 JS——遍历对象方法总结
遍历对象方法一、对象遍历方法1.==for...in==2.==Object.keys()==、==Object.values()==、==Object.entries()==3.==Object.getOwnPropertyNames()==4.==Object.getOwnPropertySymbols()==5.==Reflect.ownKeys()==一、对象遍历方法1.for…infor...in主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。语法如下：for
2022-03-09 10:43:29
19364
2
原创 JS——遍历数组方法总结
遍历数组方法一、数组遍历方法1.==forEach()==2.==map()==3.==for...of==4.==filter()==5.==some()==、==every()==6.==reduce()==、==reduceRight()==7.==find()==、==findIndex()==8.==keys()==、==values()==、==entries()==一、数组遍历方法1.forEach()forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值
2022-03-08 15:03:28
3376
1
原创 Element ui —— dialog 弹窗 设置点击空白处不关闭
element-ui 的dialog弹窗 ，默认的点击空白处也就是非弹窗区会关闭，有时候不太合适，所以要设置为不可关闭，它本身自带该功能：把这个属性设置为false即可<el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal="false"></el-dialog>...
2022-01-18 10:51:19
7167
原创 美化滚动条的一个插件 vue3-perfect-scrollbar
使用步骤：1.安装#npmnpm install vue3-perfect-scrollbar#yarnyarn add vue3-perfect-scrollbar2.使用#在main.tsimport { createApp } from 'vue'import App from './App.vue'//引入import PerfectScrollbar from 'vue3-perfect-scrollbar'import 'vue3-perfect-scrollbar/
2022-01-12 13:49:31
3133
1
原创 JS —— 判断一个数组中所有对象的某个属性全部相等
如何判断一个数组中所有对象的某个属性全部相等？这里会用到ES6中的every：let arrObj=[ {checked:false,name:'ccc'}, {checked:false,name:'ccc'}, {checked:false,name:'ccc'}]if(arrObj.every(item=>item.name===arrObj[0].name)){ console.log('全等')}else{ console.log('有不等的')}...
2022-01-05 15:54:54
2437
原创 ElementUI —— 隐藏组件滚动条scrollbar使用
pc端项目中，当页面内部出现滚动条，浏览器默认的滚动条又很丑，为了页面美观，可以进行优化滚动条样式。vue的elemnt ui官方文档上并没有放出滚动条相关的实例说明，但实际上是有这么一个组件的，可自行查看element源码，效果如下图左边所示：使用：<el-scrollbar></el-scrollbar>将会出现滚动的内容放到上述标签内就可以，之后的样式效果可自行调整...
2021-12-24 13:54:59
611
原创 JS —— 根据某个对象属性对数组进行类似Excel表头数据排序（A1，A10，B2）
假设：一个listData数组结构如图，要想根据数组对象中的name进行类似Excel表头数据排序（A1，A10，B2），用js如何实现？compare (name) { return function (s, t) { let a = s[name].toLowerCase(); let b = t[name].toLowerCase(); if (a.length === 2) { a = a.slice(0, a.le
2021-11-29 16:13:53
648
原创 Vue3 —— 语言国际化（i18n）
需求: 点击中文按钮，列表显示中文；点击english按钮，列表显示英文如下图，搭建vue3项目//使用vitenpm init @vitejs/app安装国际化依赖插件npm install vue-i18n@next创建i18n文件夹src/i18n/ch.tsexport default { message:{ one:'一', two:'二' }}src/i18n/en.tsexport default { messa
2021-11-22 17:11:19
3508
原创 Vue3+TS快速上手
文章目录一、TypeScript快速上手初识TypeScript安装TypeScript第一个TypeScript程序TypeScript常用语法基础类型接口类一、TypeScript快速上手初识TypeScriptTypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6+ 的支持，它由 Microsoft 开发，代码开源于 GitHub上安装TypeScript命令行运行如下命令，全局安装TypeScript：npm install -g typescript
2021-11-12 15:10:18
7957
原创 git —— 如何将主分支代码拉取到自己分支上
1.切换到主分支（master）git checkout master2.拉取远程仓库代码git pull3.切换回自己的分支git checkout 分支名称4.把主分支的代码合并到自己的分支上git merge master5.把代码上传到远程仓库自己分支上git push...
2021-10-20 15:01:25
3244
1
原创 babel-plugin-import实现按需引入
And Design Vue支持全部导入所有组件，会增加代码包的体积，因此不推荐这种做法babel-plugin-import 是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式1.安装npm i babel-plugin-import -D2.添加.babelrc文件{ "plugins": [ [ "import", { "libraryName": "ant-design-vue", "li
2021-10-13 10:38:21
710
原创 Typescript完全解读 —— 接口interface
接口interface基本用法interface NameInfo { firstName:string, lastName:string}const getFullName=({firstName,lastName}:NameInfo):string=>{ return `${firstName}${lastName}`}console.log(getFullName({firstName:'haha',lastName:'li'}))可选属性interfac
2021-10-12 11:13:30
429
原创 ES6精讲 一 Symbol
Symbol基础作为属性名属性名的遍历Symbol.for 和Symbol.keyFor11个内置Symbol值基础Symbol的值是独一无二的const s=Symbol('xt')console.log(s) //Symbol('xt')console.log(s.toString())console.log(Boolean(s)) //true作为属性名const s=Symbol('name')const info={ [s]:'xt', age:18, sex:'
2021-10-11 13:46:41
77
原创 TypeScript完全解读 —— 基础类型
基础类型布尔值let bool:boolean=falselet bool:booleanbool=false 数值//es6中可以使用数字的二进制、八进制、十六进制let num:number=123num=0b1111011 //二进制num=0o73 //八进制num=0x7b //十六进制字符串//es6中可以使用模板字符串let str:stringstr='abc'str=`数值是${}`数组//[1,2,3]//写法1let ar
2021-10-08 14:43:08
115
转载 Vue动态绑定class的几种方式
对象方法##最简单的绑定 （这里的active加不加单引号都可以，以下也一样都能渲染）:class="{'active':isActive}"判断是否绑定一个active:class="{'active':isActive==-1}"或者:class="{'active':isActive==index}"绑定并判断多个第1种：用逗号隔开:class="{'active':isActive,'sort':isSort}"第2种：放在data里面//可以把后面绑定的对象.
2021-09-23 17:17:45
6279
原创 vscode常用快捷键--mac/windows
vscode常用快捷键前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npi
2021-09-22 15:40:54
289
原创 Typescript入门（3）
Typescript入门（3）一.类型联合和类型保护二、Enum枚举类型三.在函数中使用泛型四.在类中使用泛型一.类型联合和类型保护interface Boy{ ispeople:boolean; say:()=>{}}interface Girl{ ispeople:boolean; skill:()=>{}}function Person(person:Boy | Girl){ //联合类型 if(person.ispeople){ (person
2021-09-17 10:28:06
43
原创 Typescript入门（2）
Typescript入门（2）一.类的概念和使用二、类的访问类型public 类的内部和外部都能访问二、使用步骤1.引入库2.读入数据总结一.类的概念和使用class Lady{ content="hi,帅比！" sayHello(){ return this.content }}class Xiaojiejie extends Lady{//类的继承 sayHello(){ return super.sayHello()+'去玩吗？'//super表示继承父类方法
2021-09-16 11:43:40
44
原创 Typescript入门 (1)
Typescript入门（1）一.Typescript开发环境搭建二、静态类型基础静态类型对象静态类型三.函数参数注解四.数组类型注解五.元组的使用和类型约束六.初识interface七.再识interface一.Typescript开发环境搭建下载Node.js//node官网https://nodejs.org/zh-cn/安装Node.js使用npm全局安装typescript//1.进入命令行//2.输入以下代码npm install typescript -g创建
2021-09-15 17:05:39
57
原创 微信小程序引入字体图标（阿里iconfont）
微信小程序引入阿里字体图标方法总结1 阿里iconfont官网选择自己需要的图标2 将.ttf格式的字体文件转换为base643 把转换后的.css文件和原来的.css文件中的代码拼接，复制到微信小程序相应的.wxss文件中方法总结1 阿里iconfont官网选择自己需要的图标阿里字体官网点击即可进入选择需要的图标下载至本地打开下载好的压缩包2 将.ttf格式的字体文件转换为base64转换base64点此进入下载转换好的文件至本地打开文件夹如下图3 把转换
2021-08-27 14:45:09
831
1
原创 elementUI级联选择器自定义定位，不随页面滑动
elementUI级联选择器自定义定位，不随页面滑动默认效果快捷定位自定义定位默认效果默认浮层显示在下方快捷定位添加placement属性：top、bottom、left、right<el-cascader :change-on-select="true" :props="defaultParams" :options="optionsArr" v-model="statusform.statu
2021-08-11 16:18:21
597
原创 ElementUI中switch开关--文字显示在按钮里
ElementUI中switch开关样式switch默认样式实现效果图具体步骤1）html 代码2）修改el-switch默认样式switch默认样式实现效果图具体步骤1）html 代码添加class=“switch”，避免全局样式污染<el-switch class="switch" v-model="switchvalue" :validate-event="true" active-text="新增
2021-07-15 12:57:47
2986
1
原创 Chrome安装vue-devtools
vue-devtools安装步骤Vue开发项目常用的一款谷歌浏览器插件安装步骤git地址官网地址：https://github.com/vuejs/vue-devtools.git（不好用￣ヘ￣）//这个可以~~https://gitee.com/zhang_banglong/vue-devtools.git文件夹如下图：打开终端，依次输入以下命令npm installnpm run build打开vue-devtools文件夹，找到shells文件夹打开
2021-07-07 14:41:42
198
4
原创 axios的使用
axios发起get请求发起带参数的get请求发起post请求发起并发请求axios的全局配置axios封装发起get请求<button @click='getReq()'>发起get请求</button>import axios from 'axios'export default { setup(){ //写法一 const getReq=()=>{ axios.get('url').then(res=>{console.lo
2021-07-07 10:54:56
240
原创 Vue-Router4.x
Vue-Router4.x两种模式hashhistoryrouter-link常用属性toactive-classreplaceJS实现路由跳转动态路由路由懒加载两种模式hash表现形式：有’#’hash通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则history表现形式：无’#’利用了HTML5 History Interface中新增的pushState（）和replaceState（）方法router-link常用属性to表示目标路由的链接当被
2021-07-06 14:02:30
472
原创 vue3.0
vue3vue3.0新特性介绍vue2.0和vue3.0响应式原理对比vue2.0响应式原理vue3.0响应式原理创建vue3.0项目使用vue-cli创建vue3.0项目使用vite创建vue3.0项目Composition API VS Options APIOptions API 选项apiComposition API 组合apiComposition API的使用setupreactivereftoRefsreadonlycomputedwatch生命周期钩子函数依赖注入vue3.0新特性介绍
2021-07-01 11:11:43
228
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人