- 博客(48)
- 收藏
- 关注
RSS订阅原创 Vue3 + Element Plus 二次封装 Table 组件实战指南
在前端开发中，表格(Table)组件是最常用的UI组件之一。Element Plus作为Vue3的流行UI库，提供了功能强大的Table组件。但在实际项目中，直接使用原生Table组件往往会导致代码重复、维护困难。本文将介绍如何基于Vue3和Element Plus二次封装一个更高效、更易用的Table组件。统一风格：保持项目中所有表格样式和行为一致减少重复代码：封装公共逻辑，避免每个页面重复编写相似代码提高开发效率：通过配置化方式快速生成表格便于维护：统一修改点，一处修改全局生效2、使用示例进阶功能
2025-04-12 22:37:40
503
原创 Vue3 作用域插槽：组件通信的灵活利器
作用域插槽是一种特殊的插槽，它允许子组件将数据传递给插槽内容，使得父组件可以在插槽内容中访问子组件内部的数据。换句话说，它"暴露"了子组件的一部分数据给父组件。Vue3的作用域插槽为我们提供了一种强大的组件通信方式，它打破了传统的父子组件单向数据流的限制，实现了更灵活的模板定制能力。通过合理使用作用域插槽，我们可以创建出高度可复用且易于维护的组件。掌握作用域插槽的关键在于理解"子组件提供数据，父组件控制渲染"这一核心思想。
2025-04-08 16:32:32
658
原创 Vue2升级Vue3避坑指南：这些关键点你必须知道！
/ Vue2})// Vue3})Vue2到Vue3的迁移是一项系统工程，需要全面了解API变化、响应式系统差异和新特性。通过合理的迁移策略和工具支持，可以最大限度地降低升级风险。建议采取渐进式迁移方案，先从新组件开始使用Vue3特性，逐步改造旧组件，最终完成全面升级。升级到Vue3不仅能获得性能提升，还能利用组合式API等新特性改善代码组织和可维护性。虽然迁移过程可能遇到挑战，但长期收益值得投入。如果你喜欢这篇文章，欢迎关注我的微信公众号【前端的那点事情】，获取更多精彩内容！
2025-03-31 18:31:11
811
原创 Node.js + Express + MySQL：快速搭建用户认证系统
通过本文，我们使用Node.js、Express和MySQL构建了一个完整的用户认证系统。这个系统包含了用户注册、登录和基本的密码加密功能。你可以在此基础上进一步扩展，比如添加密码重置、电子邮件验证、角色权限管理等功能。这种技术栈组合非常适合中小型Web应用，它提供了良好的性能和开发效率。希望这篇文章能帮助你快速入门Node.js后端开发！如果你喜欢这篇文章，欢迎关注我的公众号【前端的那点事情】，获取更多精彩内容！扫描下方二维码，第一时间接收更新哦~
2025-03-27 18:44:51
443
原创 全员DeepSeek时代：前端开发的智能化革命与创新实践
如果你喜欢这篇文章，欢迎关注我的公众号【前端的那点事情】，获取更多精彩内容！扫描下方二维码，第一时间接收更新哦~
2025-03-22 09:18:06
449
原创 前端数据爬虫之puppeteer
官网说需要使用Node v6.4.0(async/await需要在Node v7.6.0)及以上版本，但是实测Node v14.21.3 运行不起来，目前我用的是 Node v22.1.0。使用最新的 JavaScript 和浏览器- 功能直接在最新版本的Chrome中执行测试。Page会触发多种事件，可以用 node 原生的方法 来捕获处理，比如 on,once 或者 removeListener。提供操作一个 tab 页，一个 Browser 实例可以有多个 Page 实例。
2024-08-27 10:26:51
740
原创 数字滚动变化-指令形式
/ mounted 时，binding.oldValue 为 undefined。// 恢复为原来的值，不恢复的话会闪一下。// 目标值与原值一样则不进行任何操作。// 计算每次改变的值。
2023-08-02 16:30:51
384
原创 自定义navigationBar组件
app.jsApp({// 状态栏高度 const {wx . setStorageSync('statusBarHeight' , statusBarHeight + 'px') // 胶囊数据 const {== 0) {// android 一般为 48, ios 一般为 40 wx . setStorageSync('navBarHeight' , platform === 'android'?
2022-12-15 16:03:44
242
原创 vue项目使用全局sass、less，以使用变量
vue项目使用sass、less一、使用sass在项目根目录创建vue.config.js，并写入以下内容module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/assets/sass/index.scss";`, } } },}例如// index.scss$red: #FF3B30在项目中就可以愉快的使用<style
2022-01-25 18:07:11
1136
原创 Array.flat方法
Array.flat方法作用用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。语法/** * @params { Number } num 需要将数组拉平的层数，默认是1 */array.flat(num)实例[1, 2, 3, [4, 5]].flat(); // [1, 2, 3, 4, 5][1, 2, [3, [4, 5]]].flat(); // [1, 2, 3, [4, 5]][1, 2, [3, [4, 5]]].flat(2);
2021-11-29 16:13:35
417
原创 作用域插槽简单应用
作用于插槽简单应用Parent.vue<template> <div class="content"> <Child :data="data" :columns="columns" > <template slot="name" slot-scope="{ row }"> 姓名：{{ row.name }} </template> <temp
2021-11-19 11:07:49
408
原创 懒加载处理，不要再傻傻监听页面滚动
懒加载处理利用浏览器原生提供的构造函数 IntersectionObserver， 不要再傻傻监听页面滚动一、IntersectionObserver简介1. 语法let observer = new IntersectionObserver(callback, option);/* callback 是当被监听元素的可见性变化时，触发的回调函数 option 是一个配置参数，可选，有默认的属性值*/2. callback 参数目标元素的可见性变化时，就会调用观察器的回调函数ca
2021-11-08 16:59:22
558
2
原创 Array.sort方法
Array.sort方法作用对数组的元素进行排序排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序.使用数字排序，你必须通过一个函数作为参数来调用注意： 这种方法会改变原始数组！。语法array.sort(function ())实例默认排序let arr = ["Banana", "Orange", "Apple", "Mango"];arr.sort(); // [ Apple, Banana, Mango, Orange ]数字排序
2021-09-27 10:48:31
1498
原创 为什么不建议用`index`做`key`？为什么不建议用随机数做`key`？
为什么不建议用index做key？为什么不建议用随机数做key？<template> <div> <!-- 用index做key --> <div v-for="(item, index) in list" :key="index">{{ item.name }}</div> <!-- 渲染为 <div key=0>张三</div> <div k
2021-09-24 17:43:28
516
原创 在哪个生命周期内调用异步请求？
在哪个生命周期内调用异步请求？可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是，在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：能更快获取到服务端数据，减少页面 loading 时间SSR 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性......
2021-09-18 16:20:00
1384
原创 使用canvas画二维码
使用canvas画二维码需要使用 qrcode 依赖具体代码如下<template> <div> <canvas ref="code"></canvas> </div></template><script>import QRCode from 'qrcode'export default { mounted() { let code = 'xxxxx
2021-08-31 14:33:08
489
原创 全局注册组件
全局注册组件1. 直接在main.js注册import List from "@/components/List";Vue.component('List', List);2. 使用 Vue.use在合适的位置创建globalComponents.js2.1 单个注册// globalComponents.jsimport List from "@/components/List";// 导出对象export default { install(Vue) { Vue.c
2021-08-25 10:10:42
282
原创 Vue使用Swiper插件
Vue使用Swiper插件这里直接封装，方便后边使用Swiper.vue<template> <div class="swiper-container"> <div class="swiper-wrapper"> <slot></slot> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></
2021-08-24 18:06:13
296
原创 JS中数据类型的判断
JS中数据类型的判断typeoftypeof 对于基本数据类型(除了null外)，都可以显示正确的数据类型typeof 对于引用数据类型(除了function外)，都显示Objectconsole.log(typeof 1); // numberconsole.log(typeof 'str'); // stringconsole.log(typeof true); // booleanconsole.log(typeof undefined); // undefinedc
2021-08-17 10:13:45
103
原创 向数组指定位置添加内容
向数组指定位置添加内容/** * 向数组指定位置添加内容 * @param { Array } arr 原数组 * @param {*} data 要添加的内容 * @param { Number } index 需要添加的位置 * @returns */function addData(arr, data, index) { if (index === -1 || index > arr.length) { console.log('请输入正确的下标'); re
2021-08-09 16:24:10
667
原创 display: none、visibility: hidden 和 opacity: 0 之间的区别
display: none、visibility: hidden 和 opacity: 0 之间的区别共同点都是隐藏不同点1. 是否占据空间display: none 隐藏后，不占位置visibility: hidden: 隐藏后，仍然占据位置opacity: 0: 隐藏后，仍然占据位置2. 子元素是否继承display: none: 不会被子元素继承，父元素都不存在了，子元素也不会显示出来visibility: hidden: 会被子元素继承，通过设置子元素vis
2021-07-22 11:14:05
225
原创 vue-cli3 配置及iview定制主题
vue-cli3 配置及iview定制主题官网vue.config.js配置module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true } } },}1. 变量覆盖方式首先在项目根目录中创建my-theme目录，然后在my-theme下创建index.less，并写入下面内容：@import '~view-design/src/st
2021-07-17 10:43:42
497
原创 vue 实现懒加载请求数据
<template> <div class="test-box" ref="box"> <div class="aaa"></div> <div class="test" ref="test" v-for="(item, index) in list" :key="index" :style="`background-color: ${item.color};`"
2021-07-12 16:34:20
1952
原创 数组去重的常用算法
数组去重1. 利用ES6 set去重function fn(arr) { return Array.from(new Set(arr)) // 简写形式 return [...new Set(arr)]}let arr = [1, 2, 3, 4, 5, 5, 5, 4, 3, 2, 1];console.log(fn(arr)); // [1, 2, 3, 4, 5]2. 利⽤for嵌套for，然后splice去重（ES5中最常⽤）双层循环，外层循环元素，内层循环时⽐较值
2021-07-09 10:45:56
219
原创 将时间格式化为几天前/几月前
/** * 将时间格式化为几天前/几月前 * @param { Number } timestamp 时间戳 * @param { String } unit 时间戳单位 秒/毫秒 */function formatTime (timestamp, unit = '毫秒') { let createTime; if (unit === '毫秒') { createTime = new Date(timestamp) } else { createTime = new D
2021-07-06 09:27:57
161
原创 vue-cli 构建新的打包环境
项目配置package.json文件{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", // 新增, 名字自定义，注意不要使用 server/build/test, 这是创建项目时默认的 "custom": "vue-cli-service build --mode custom" },}以 vscode为例此时npm脚本列表里会多出一个 c
2021-07-03 11:22:30
208
原创 vue 跳转至当前路由，并刷新页面
携带不同参数跳转至当前路由，刷新页面并获取该参数借助空页面实现例如：由 /detail?id=1 跳转至 /detail?id=2detail.vueexport default { methods: { test() { this.$router.push({ path: '/empty', query: { router: '/detail?id=2' } }) } }, c
2021-05-12 15:50:42
6524
原创 Taro / 小程序 获取 DOM 元素的位置
介绍需要用到Taro.createSelectorQuery() 方法, 由于该方法获取DOM需要一定的时间，直接使用会获取到null，所以封装成Promise对象函数封装/** * 获取元素位置 * @param {*} elements 需要查找的元素的名称(类名、id) * @returns 查找元素的位置的集合，传入字符串则为对象，传入数组，则为数组 */export const getElementsSite = (elements) => { const query =
2021-04-26 18:15:55
2455
原创 vue 使用代理解决跨域问题
简介使用代理，则前端不需要再配置baseURL，因为请求全部走的前端服务(代理)开发环境在前端配置// 在根目录创建vue.config.js文件module.exports = { // 请求单个 devServer: { proxy: '开发环境后台地址' }, // 请求多个 devServer: { proxy: { '自定义前端请求前缀': { target: '开发环境后台地址', pat
2021-04-25 16:37:39
942
原创 vue 生产/开发 环境变量配置
当前内容适用于vue-cli 3.0创建文件在根目录创建 .env.development 和 .env.production文件配置文件这里以配置接口地址为例.env.development文件VUE_APP_BASEURL = 开发环境接口地址.env.production文件VUE_APP_BASEURL = 生产环境接口地址使用变量配置axiosconst _axios = axios.create({ baseURL: process.env.VUE_AP
2021-04-25 16:30:33
160
原创 vue build之后，可以在本地浏览使用
vue build之后，可以在本地浏览使用本地无法浏览的根本原因，是build之后，文件的引入路径错误导致的，只需要在build时修改路径即可// vue.config.js, 如果没有本文件，请在根目录创建module.exports = { publicPath: process.env.NODE_ENV === 'production'? './' : '/', outputDir: 'dist', // build 时生成的生产环境构建文件的目录（默认） assetsDir: 's
2021-04-23 10:56:51
377
原创 文本超出使用省略号
话不多说，直接上代码.overstep { /* 单行文本*/ /*超出部分不可见外能不能添加...，固定三项*/ overflow: hidden; /*超出部分不可见*/ text-overflow: ellipsis; /*隐藏部分的文字用...，但是这个想要实现，还*/ white-space: nowrap; /*还 设置宽度为非自动，即设置空格不换行*/ /* 多行文本 */ /* 溢出隐藏 */ overflow : hidden; /*
2021-04-06 10:20:08
240
1
原创 Array.reduce方法
作用计算数组元素相加后的总和语法/** * @params { Function } (必填), 用于执行每个数组元素的函数 * @params { * } total (必填), 函数的第一个参数, 初始值, 或者计算结束后的返回值 * @params { * } currentValue (必填), 函数的第一个参数, 当前元素 * @params { Number } currentIndex (非必填), 函数的第一个参数, 当前元素的索引 * @params { Array } a
2021-04-02 10:39:14
5831
原创 Javascript中深拷贝的几种实现方法
JS中深拷贝的几种实现方法1. 递归的方法function deepClone (obj) { //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空，并且是对象或者是 if (obj && typeof obj === "object") { for (var key in obj) { // obj
2021-04-01 09:09:30
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人