- 博客(122)
- 收藏
- 关注
RSS订阅原创 Vue3通过 directive 实现 el-dropdown下拉菜单项最小宽度等于内容宽度
这两种方式设置最小宽度是需要提前知道内容宽度的值，那么就得在编码的时候限定一个值，限制性太大了。配置项是可以实现效果的，所以我们只需要解决内容宽度计算并且设置下拉框最小宽度即可。并不提供配置项让我们实现下拉菜单项最小宽度等于内容宽度，但我们能发现它提供了。渲染的时候进行自定义计算，获取内容宽度的同时设置下拉框选项的最小宽度。这个 API 可以让我们自定义指令，使。配置项来实现想要的功能呢？通过实现这个效果，学会了如何使用。这种形式进行最小宽度的设置？答案明显是可行的，但有个。，感觉还是很有收获的。
2023-09-12 11:34:57
1160
原创 element-plus 设置 el-date-picker 弹出框位置
概述：el-date-picker 组件会自动根据空间范围进行选择比较好的弹出位置，但特定情况下，它自动计算出的弹出位置并不符合我们的实际需求，故需要我们手动设置。存在的问题：element-plus 中文档中并没有提供明确的属性供我们设置弹出位置。解决方案：我们可以看到文档提供了属性供我们去定制。详情设置可阅读。
2023-08-31 17:42:53
3896
2
原创 Typescript - 将命名空间A导入另一个命名空间B作为B的子命名空间，并全局暴露命名空间B
最近相统一管理 ts 中的类型声明，这就需要将各模块下的命名空间整合到全局的命名空间下，牵涉到从别的文件中引入命名空间并作为子命名空间在全局命名空间中统一暴露。
2023-03-08 11:23:09
713
1
原创 element-plus中的tooltip组件实现文字溢出显示省略号，悬浮显示tooltip完整信息
tooltip文字溢出显示省略号，精准控制文字溢出的 tooltip 显示
2023-03-01 12:18:46
2990
原创 Vue3使用h函数创建子组件（涉及到$emit，props的传递以及多个具名插槽的使用）
h 函数是什么h 函数本质就是 createElement() 的简写，作用是根据配置创建对应的虚拟节点，在vue 中占有极其重要的地位！！！h 函数的配置参数接收三个参数：type，props 和 childrentype类型：String | Object | Function详细：HTML 标签名、组件、异步组件或函数式组件 （注意：Vue3 不支持组件名用字符串表示了，必须直接使用组件名）例如：import MySon from './son.vue'h('div',
2022-04-06 15:41:01
17299
6
原创 知识总结----js的六种错误类型
1. SyntaxError（语法错误）解析代码时发生的语法错误：var 8a;错误信息：Uncaught SyntaxError: Unexpected number2. ReferenceError（引用错误）（1）引用了一个不存在的变量:console.log(a);错误信息：Uncaught ReferenceError: a is not defined（2）将变量赋值给一个无法被赋值的对象:console.log() = 1;错误信息：Uncaught Referenc
2022-02-16 14:04:57
780
原创 知识总结----js垃圾回收机制
目前常见的垃圾回收机制主要是：标记清除法 和引用计数法。标记清除法垃圾收回指的是在内存中释放无效占用的内存，而不仅仅是说销毁对应的变量。每次清除时，会先排除全局变量和闭包变量的内存，其余的都是可以释放的垃圾内存。每隔一段特定的时间间隔就进行一次收回。目前各大浏览器基本都是采用这种方法进行垃圾回收，不过标记方法和时间间隔有所不同。function test1() { var a = 1 // 进入环境 console.log(a) // 输出 1}test1() // 离开环境，
2022-02-16 13:39:11
366
原创 原生 js 实现 map 遍历方法
准备首先，我们需要知道 map 遍历方法到底有什么用，我们通过指定一个处理数据的回调函数，再通过遍历数组一一处理元素，然后返回包含所有处理后元素的新数组。其次，我们还需要知道 map 遍历方法的基本用法和参数含义：基本语法：array.map(function(currentValue, index, arr), thisValue)参数意义：currentValue ：必选，当前的元素值。index ：可选，当前元素的索引值。arr ： 可选，当前元素属于的数组对象。thisValue
2021-09-27 11:29:46
1568
原创 实现H5时间选择器点击输入框和图标均可弹出日期选择
前言最近写一个 chrome 插件，里面需要用到日期选择器，为了图轻便，便直接用了 H5的<input type="date"> ，但这个有个问题，只能通过点击右侧那个图标才可以弹出日期选择框，这使用起来就非常不爽了。网上找了很久都没找到一个有点用处的博客，最后只能自己一点点去尝试，如今问题解决了，就像记录下来给各位看看，希望能帮到大家～～～解决点击输入框不弹出日期选择思路：首先我们知道点击图标是可以弹出的，那么我们就可以将图标进行绝对定位并覆盖掉输入框，这不就可以变象实现了点击输入框
2021-09-10 17:27:49
7090
1
原创 基本知识点总结（持续更新）
定义问题什么是盒模型？定义：盒模型是用于控制元素与元素之间，或者元素和内容之间的位置关系的。盒模型包括 margin（外边距）、border（边框）、padding（填充区）、content（内容区）。分类：border-box：怪异盒模型content-box：标准盒模型什么是组件化开发？定义：最初的目的是代码重用，功能相对单一或者独立。在整个系统的代码层次上位于最底层，被其他代码所依赖，所以说组件化是纵向分层。特点：1: 高内聚2: 可复用3: 易于维护
2021-09-01 14:50:22
130
原创 Vue项目里利用JS深拷贝（函数，Date，RegExp，Map，Set）重新初始化data的数据
前言最近遇到一个需求，keep-alive 缓存 list 组件，从 detail 组建返回 list 组件，list 组件不刷新，从别的组件跳到 list 组件，list 组件数据初始化（从而实现 list 组件的刷新）。这里如何实现组件数据重新初始化呢？我想到的是利用 JS 深拷贝去实现。数据深拷贝判断数据类型// 检查属性类型checkType (any) { return Object.prototype.toString.call(any).slice(8, -1)},
2021-08-11 11:34:44
608
原创 细节总结--Promise
Promise用途利用链式调用来解决回调地狱，也可结合 async 和 await 来用同步编码方式实现异步操作，完美解决回调地狱。三种状态pending：正在请求let promise1 = new Promise((resolve, reject) => {})console.log(promise1) // 输出 Promise { <pending> }fulfilled：成功let promise1 = new Promise((resolve, r
2021-07-09 23:29:10
102
原创 知识点总结---Vue.js
知识点总结---Vue.jsMVVM模型简介MVVM模型简介MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接
2021-07-09 16:12:41
111
原创 学习Object.defineProperty()
前言：写这篇东西主要是为了学习Vue的底层原理做准备的，本篇内容主要是通过查阅 Object.defineProperty() 来学习的。Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。注意： 应当直接在 Object 构造器对象上调用此方法，而不是在任意一个 Object 类型的实例上调用。let obj = {}// 直接在 Object 构造器对象上调用此方法，这里
2021-05-30 15:15:59
184
2
原创 Vue3 利用 json 数据动态生成路由和实现组件懒加载
前言：目前都只是在学习，做项目顶多是为了比赛，所以一般不去考虑项目的可维护性，故就基本就不花力气去专研动态生成菜单，动态配置路由了，顶多是在动态引入组件上做下优化。但随着经验的增长，我渐渐觉得这样一直划水太不好了，恰逢想写个团队官网，想以后一直让师弟师妹维护，故不得不改变自己，这次就从利用 json 数据动态配置路由以及实现动态懒加载开始吧。注释：因为目前缺少后台接口，故先在本地用json存储数据先。json文件存储路由数据特别说明1：因为这时 vue3，故错误地址重定向我用了：{ "pat
2021-05-27 17:18:53
3050
1
原创 vue3 使用 element-plus 的校验规则表单
前言习惯了 vue2 的 this，而 vue3 没有 this，element 组件库也不再像以前那样复制粘贴即可，路漫漫其修远兮，慢慢积累ing。由于无法像 vue2 一样通过 this.$refs 来获取表单DOM，所以我们需要借助 vue3 的 ref 来获取表单DOM，对此还有不明白的可先查阅 vue3 通过 ref 获取 DOM。vue3 使用校验规则表单<template> <el-form :rules="uploadFormRules" ref="uploadF
2021-05-24 08:28:32
11842
2
原创 vue3 通过 ref 获取 DOM
前言vue3 和 vue2 使用起来还是有一定区别，下面就分别介绍下两者如何通过 ref 获取 DOM。vue2 获取 DOM在 template 中用 ref 标记<p ref="myP">我是p标签</p>js 中直接通过 this.$refs 即可获取 DOMconsole.log(this.$refs.myP)vue3 获取 DOM在 template 中用 ref 标记<p ref="myP">我是p标签</p>ts 中借助
2021-05-24 08:19:25
1158
1
原创 vue3使用element-plus的自定义列表格
前言刚开始学习 vue3，也是刚使用 element-plus 这个 UI 组件库，虽说基本和 vue2 + element 差不多，但还是有点区别，以至于按以往的习惯来写发现报错，呃，琢磨了十来分钟，惭愧。element 中的自定义列表格用法自定义列时只需要声明 slot-scope="scope" 即可。自定义内容需要使用数据时只需要使用 scope.row 即可获取该行数据。<template slot-scope="scope"> <div class="overPo
2021-05-23 21:41:53
8423
1
原创 BFC
什么是BFC？BFC（Block formatting context），直译为“块级格式化上下文”。它是一个独立的渲染区域，使内部元素不会影响到外部元素，也避免外部元素影响内部元素，可以说，这个区域如何布局与外部区域毫无关系。如何创建BFC呢？float 的值不是 none设置 overflow 的值为 hidden / auto / scrollposition 的值不是 static / relative设置 display 的为 block / table-cell / flex /
2021-05-22 22:37:15
87
原创 解决axios无法自动携带cookie的问题（包括谷歌浏览器）
前言：一直都在用session来进行身份验证，突然用cookie来进行身份验证，竟然发觉身份验证竟然失败了。原因：1. axios 默认不自动携带 cookie2. 谷歌浏览器对 Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。解决：1. 设置 axios.defaults.withCredentials = true 让 axios 请求自动携带 cookie2. 谷歌浏览器访问 chrome://flags ，将 SameSite by default
2021-05-21 21:15:47
3922
原创 基本知识汇总--计算机网络
计算机网络常见的状态码常见的状态码200 OK 请求处理成功，返回相关信息204 No Content 请求处理成功，但响应报文没有主题返回206 Partial Content 客户端进行了范围请求，服务器成功执行请求并返回指定范围的实体内容301 Moved Permanently 永久性重定向。请求的资源已经被分配到新的url302 Found 临时性重定向304 Not Modified 客户端发送附带条件的请求后，服务器允许请求，但内容并没修改，返回304。即客户端可以使用缓存的
2021-05-17 14:50:54
61
原创 基本知识汇总--css
CSS基本知识汇总定位可选值定位参照基准盒子模型（box-sizing）CSS隐藏一个元素的几种方式定位可选值absolute开启绝对定位，元素脱离文档流，此时设置 margin 等等样式是不起作用的。元素相对于最近一个开启定位的父元素进行定位（除了开启 static 定位的父元素）。fixed开启绝对定位，元素脱离文档流，此时设置 margin 等等样式是不起作用的。元素相相对于浏览器窗口进行定位。relative开启相对定位，元素不脱离文档流。元素相对自身的
2021-05-17 14:48:32
92
原创 学习并使用TypeScript
前期准备1.下载并安装 Node.js2. 进入命令行全局安装 typescriptnpm i -g typescriptTS
2021-05-09 18:01:23
2637
2
原创 学习Vue3
@TOC全局安装Vue3由于电脑之前可能已经安装了vue2，如果直接安装vue3则会报错，所以我们需要先卸载全局安装的vue2再进行全局安装vue3。卸载vue2npm uninstall -g vue-cli清除缓存npm cache clean --forcenpm install安装vue3npm i -g @vue/cli查看当前vue的版本vue -V显示下方图示则表示已成功安装vue3：搭建项目搭建空项目vue create emp
2021-04-30 11:51:17
192
原创 海创软件组--20210425--两周总结
两周总结JS 基于对象执行上下文栈字符串解码算法尾调用递归尾递归二叉树中序遍历JS 基于对象JS是基于对象设计和开发出来的语言。**注意：**基于对象和面向对象是有区别的！面向对象：三大特点：封装，继承，多态支持两种继承方式：接口继承，实现继承基于对象：基于对象是使用对象，所以无法用现有对象模板创造新的对象类型。ECMAscript是JS的核心，它无法去实现接口继承，所以JS只支持实现继承，而不能实现接口继承，实现继承主要依靠原型链去实现。proto 与 prototype：
2021-04-27 18:16:23
162
2
原创 用栈实现树的三种遍历
前言 二叉树三种遍历的算法，可谓是程序猿必须会的一个算法。最近在练习算法也对此研究了一段时间，通过递归，我们其实不难实现三种遍历方式，但通过栈来实现，感觉还是有点意思的。 其中在写中序遍历时发现了要是该树不是二叉树时有点错误，只好不断一遍遍检查思路，所以捣鼓了挺长时间的，真的有点艰辛，归根到底还是自己太菜了。前期准备之后需要遍历的树：定义树：var trees = { v
2021-04-18 16:00:48
2397
1
原创 react使用antd-mobile做自定义替换头像功能
前言最近想实现用户选择头像和更换头像的功能，采用 antd-mobile 组件库，但其样式并不能满足自身要求，所以在其基础上进行了一点修改。注意呀，我这只是单机，并没有上传后台，因为我只是做来玩玩的…思路不用 ImagePicker 来显示选择的图片，而采取独立的 img 来显示当没选择图片时，img 显示默认图片，选择后，img 则显示对应图片给 ImagePicker 和 img 绝对定位且宽高等等一样，并设置 img 的 z-index 小于 ImagePicker 的层级设置 Ima
2021-01-17 18:51:40
1441
原创 获取textarea的值并替换其换行符以及空格以实现展示时样式不变
获取textarea的值html：<el-input id="myTextarea" type="textarea" :rows="7" placeholder="请输入内容" v-model="myMessage"></el-input>js：var newMessage = document.getElementById('myTextarea').value效果展示：textarea输入值：展示：问题： 数据并未
2020-12-20 22:21:14
705
1
原创 Vue使用Emoji表情
前言最近做一个简单的聊天网页，既然是聊天了，自然不可避免需要用到表情包啦，其他那些好看的图片表情包我没时间去弄，所以就先弄个emoji的来玩玩。准备表情包资源可点击表情包网页去找自己喜欢的表情包来用这次我用的是下面红色框住的那个表情包使用表情包初始化表情列表数据const emojis = [ '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????', '????'
2020-12-17 17:04:15
5571
9
原创 JS给全局绑定事件以及给除某个元素外的其他元素绑定事件
JS给全局绑定事件document.onclick = (event) => { console.log('JS给全局绑定事件') }给除某个元素外的其他元素绑定事件这里是给除了表情图标（id为myEmoji）元素以外的其他元素绑定事件：// 添加全局点击事件，一旦点击则隐藏表情框$('body').click((e) => { if (($(e.target).attr('id') !== 'myEmoji')) { this.showEmoji = f
2020-12-16 22:46:51
1859
原创 github添加多个私钥
准备阶段首先肯定是要在本地下载安装git的，并熟悉其基本的操作。对此有不明白的可以看下git的最基本用法。创建私钥1：在桌面右击选择Git Bash Here打开那个黑窗口2：输入ssh-keygen -t rsa -C "邮箱" -f ~/.ssh/私钥名字,然后一直回车即可3：本地打开C盘/用户/Dell/.ssh我这里创建了两个私钥，一个是默认名字的，还有一个是我按照上面的方法自定义的一个名字（vuepressBoKe）,打开xxx.pub文件即可查看生成的私钥！4：在github
2020-12-09 15:09:06
642
原创 axios的总结知识点
axios的总结基本知识1：文档2：优点3：axios常用语法常用的配置1：全局配置2：拦截器3：取消请求基本知识1：文档axios文档2：优点基于Promise的异步ajax请求库浏览器/node端都可以使用支持取消请求支持批量发送多个请求支持请求/响应拦截请求/响应数据转换3：axios常用语法(1) axios（config）:通用的发送任意类型请求的方式例：axios({ url: '/xxxx', method: 'post', data: {"t
2020-11-28 11:47:57
543
原创 Vue项目打包后在本地运行的两种方法：express本地服务器和nginx本地服务器
一：下载安装nginx官网下载nginx目前我装的是1.8.1版本的：二：修改conf文件夹下的nginx.conf文件注：我这里的D:\localDists\dist是我Vue项目打包后的dist文件三：双击nginx.exe，并打开浏览器对应的地址查看效果双击时会出现一闪而过的黑窗口：我之前在nginx.conf文件中，修改端口为8088，所以相应的地址就是：http://localhost:8088/浏览器输入http://localhost:8088/：...
2020-11-24 10:47:45
1266
原创 Vue项目打包如何查看资源树
1、安装插件webpack-bundle-analyzer：npm i webpack-bundle-analyzer2、在vue.config.js中添加分析工具的配置（根目录下如果没有这个文件则需要自己在根目录新建）：module.exports = { chainWebpack: (config) => { /* 添加分析工具 */ if (process.env.NODE_ENV === 'production') { config
2020-11-23 22:45:28
655
原创 ECharts设置滚动legend
前言当我们的数据类别较多时，用普通的legend会占比较多的空间，所以想设置滚动的legend普通legend效果图设置滚动legend效果图设置滚动legend方法1：首先需要按需引入legendScroll2：在setOption中的legend设置type为scroll...
2020-11-17 11:08:24
11022
原创 VSCode如何运行Vue项目
前言以前都是用webstorm编写前端代码，最近开始尝试使用VSCode来写，目前还是有些懵逼的，一步步将使用流程写下来便于之后自己再次配置。具体流程：1：首先还是需要我们利用vue-cli脚手架搭建空vue项目，这个我就不赘述了2：打开VSCode下载vetur插件点击左侧圈起来的图标打开拓展插件，在顶部搜索框搜索vetur插件进行下载安装即可。下载安装完后就会在扩展列表那看到，例如我的是0.29.1版本的之后需要打开setting.json文件进行配置： "emmet.syntaxPr
2020-11-10 22:25:17
15367
2
原创 VSCode使用git
前言以前都是用webstorm编写前端代码，最近开始尝试使用VSCode来写，目前还是有些懵逼的，一步步将使用流程写下来便于之后自己再次配置。如何使用git我们在本地肯定需要先下载github的，这就不重复赘述了。首先我们需要在当前项目初始化github仓库，之后才能更方便在软件中边编写边迭代我们的代码。具体流程：1：在登录github官网创建新的仓库2：在项目文件夹中右键打开git-bash并将当前项目上传至第一步创建的仓库中3：打开VSCode，配置git.exe文件，它会默认查找一般
2020-11-10 22:05:02
937
原创 vue使用keep-alive实现多组件嵌套中个别组件存活不销毁
前言最近在做一个精品课程后台管理系统，其中涉及文件上传和文件列表展示，我不想将他们写入一个组件，故分开两个组件实现，但由于上传文件需要时间，这时要是用户切换别的组件查看时，上传文件组件就销毁了，导致文件上传失败，所以需要采取keep-alive技术实现不销毁上传文件组件，同时也由于系统模块较多，所以需要多组件进行嵌套。问题：多组件嵌套下如何指定对应的一个或多个组件存活呢？*tips：要是对于Vue使用keep-alive的基本用法不熟悉的也可以点击查看vue使用keep-alive的基本用法配置路由
2020-10-20 19:23:01
1516
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人