小白小白从不日白-优快云博客

原创二次封装 el-tooltip

再一个就是对于我们要展示的内容过长时 el-tooltip 对所展示的内容也不会换行显示，而是会显示在一行，这样就会出现会有很长一个 el-tooltip 提示，体验效果不是很友好。该组件不管你当前展示的内容有没有超出都会显示 el-tooltip 的内容，这样的话对用户的体验其实不是很好。对于 el-tooltip 的使用一般是当内容过长超出时鼠标移动上去才会显示 el-tooltip 的内容。但是对于 element-ui 来说。对上面的代码可以稍微优化一下下。

2025-03-22 15:39:47 162

原创实现滚动组件

通过分析不能发现，我们不用去管里面到底是什么内容，我们只需关注最外层的滚动区域，然后将其抽离成一个滚动组件即可。：实现一个水平滚动视图，左右两侧有箭头按钮，可以根据内容动态调整滚动位置，同时在滚动到两端时隐藏相应的按钮。对于滚动这里我们利用css3的transform的translate来实现在x轴上进行滚动。这种效果就是只有但左或者右有足够的数据/元素时，就会出现箭头，点击点头后会进行切换。这里的样式我们用的是 styled-components 样式库。那么有了上面的基础后，下面我们就来着手实现了。

2024-12-11 10:15:56 88

原创左右切换滚动组件封装

那么对于文章开头的那些效果就可以实现了，我们这里只是封装一个滚动容器组件，至于里面的内容是怎样的这就是由具体的业务去决定了。通过分析不能发现，我们不用去管里面到底是什么内容，我们只需关注最外层的滚动区域，然后将其抽离成一个滚动组件即可。：实现一个水平滚动视图，左右两侧有箭头按钮，可以根据内容动态调整滚动位置，同时在滚动到两端时隐藏相应的按钮。这种效果就是只有但左或者右有足够的数据/元素时，就会出现箭头，点击点头后会进行切换。注意：这里的 “左”、“右” 指的是左右切换的箭头，我们这里就用文字替代了。

2024-12-11 10:13:02 168

原创 vue3-input 搜索框

【代码】vue3-input 搜索框。

2024-11-21 15:41:36 226

原创 vue3-基于element-plus实现定制化动态表单及校验

实现思路动态表单结构每个被保人用一个对象表示，包含基础信息（如姓名、证件类型、手机号等）和动态字段（如出生日期、通行证号等）。表单数据存储在reactive的数组中，每个对象表示一个被保人。字段动态显示使用v-show控制表单项的显示逻辑，例如切换 Tab 后显示不同的内容。根据IDType的选择动态添加或删除额外的表单字段。表单校验基于的el-form和，动态设置校验规则。校验规则根据字段类型和业务逻辑实时更新。动态新增与删除提供新增按钮动态添加被保人表单项。

2024-11-21 15:38:14 368

原创 vue3--自定义复选框

唯一的区别就是在vue3中没有this了，响应式数据需要用ref或者reactive去替代，在一个就是computed的使用方式不同。以下vue3版的代码是基于上面 vue2版的 div实现方式进行调整的。这里就直接给出代码了。

2024-10-30 12:30:54 181

原创鸿蒙--页面跳转

基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。页面路由：提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

2024-10-21 13:43:23 273

原创鸿蒙--进度条通知

主要介绍如何使用通知能力和基础组件，实现模拟下载文件，发送通知的案例。├──entry/src/main/ets // 代码区│ ├──common│ │ ├──constants│ │ │ └──CommonConstants.ets // 公共常量类│ │ └──utils│ │ ├──Logger.ets // 日志工具类│ │ ├──NotificationUtil.ets // 通知工具类│ │ └──ResourseUtil.ets // 资源文件工具类│ ├──entryability│ │

2024-10-21 12:45:23 399

原创 vue3--实现瀑布流-长列表-懒加载

在这一章我们主要学习：瀑布流、长列表、懒加载等功能瀑布流是一个比较复杂的通用组件，因为我们要尽量做到普适，所以就需要考虑到各种场景下的处理方案，尽量可以满足日常开发的场景，所以这就在原本就复杂的前提下，让这个功能变得更加复杂了。

2024-10-21 09:26:20 1115 4

原创鸿蒙--应用首次启动

基于自定义弹框、首选项和页面路由实现一个模拟应用首次启动的案例。实现四个页面，启动页、隐私协议页、广告页和应用首页。实现自定义隐私协议弹窗，点击协议可查看隐私协议具体内容。页面间的路由跳转。相关概念首选项：首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。自定义弹窗：通过CustomDialogController类显示自定义弹窗。

2024-10-21 09:18:08 344

原创 vue3--自定义 dialog

【代码】vue3--自定义 dialog。

2024-10-17 11:45:30 443

原创鸿蒙--自定义系统级弹层

自定义常量封装// Thousandth：比例或者进度条// 数字常量// list space：列表项之间的间距// navigation title：导航标题export const ADD_TASK_TITLE: string = '添加任务';export const EDIT_TASK_TITLE: string = '编辑任务';// prompt message：提示信息。

2024-10-16 09:22:30 459

原创 uniapp-uniapp + vue3 + pinia 搭建uniapp模板

pnpm 跟 npm 和 yarn 的差距就是把原来每个项目安装 modules 放到统一的文件夹中，通过符号链接(软连接)和硬链接，注意项目要和 pnpm 统一存依赖的 modules 同盘，不然就等于丢失了 pnpm 的优势。首先，执行 npx tailwindcss init -p 命令会给我们自动生成 tailwind.config.js 文件在项目根目录下。这里首先需要在 static 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。

2024-10-15 12:43:50 2154 1

原创鸿蒙--设置项布局

我们将使用List组件Toggle组件以及Router接口，实现一个简单的设置页，点击将跳转到对应的详细设置页面。"color": [},},},},},},},},},},},},},},},},},},"value": "早起"},"value": "喝水"},"value": "吃苹果"},"value": "每日微笑"},"value": "每日刷牙"},"value": "早睡"},"value": "已开启"},

2024-10-15 11:16:30 555

原创 vue3--echarts基础封装和大屏封装（附源码）

在日常开发中，我们可能会用到 echarts ，但是如果每次使用都像下面这样去引入的话会导致最终项目打包体积变大echarts在vue或者react中使用存在的问题每个图表需要从头到尾写一遍完整的option配置，十分冗余在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作窗口缩放时的适应问题在项目中如何按需引入echarts图表减少打包体积的大小所以我们可以对echarts实现按需引入，也就是用到了哪些模块，哪些图表我们手动按需导入优化点就在于。

2024-10-15 11:12:03 790

原创 vue3--通用 popover 气泡卡片组件实现

当我们的鼠标移动到，触发弹层的视图和展示弹出层视图中展示的内容之间的空白区域时，会发现此时气泡会消失，这个很容易理解，因为当移到这个间隙的时候就会触发mouseleave事件，那么此时isVisable就会变回false。等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这些对于一些后台管理系统来说是最好的选择，因为后台管理系统其实都是大同小异的，包括功能、布局结构等。

2024-10-14 08:54:53 420

原创 vue3--通用 button 组件实现

那么我们一般的做法就是使用 import xxx from "@/lib/Button/index.vue" ，但是如果要是每个都去这样引入使用，属实有些麻烦了，那么有没有一种方法可以简化呢？等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这里我们的通用组件都放在了src下的lib目录下，作为一个通用的物料库。一般对于这种通用型的组件，就说明在一个系统中会很频繁的用到。

2024-10-14 08:45:44 320

原创 vue3--Tailwind CSS 安装和使用

这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。：初始化生成 tailwind.config.js 文件。来解析和处理 Tailwind 的 CSS 指令。最后需要在 main.js 里引入该文件。：安装 tailwindcss 插件。

2024-10-14 08:29:32 329

原创鸿蒙--商品列表

"color": [},},},},..."value": "精选"},"value": "手机"},"value": "服饰"},"value": "穿搭"},"value": "家居"},"value": "【新品上市】畅乐冰晶绿低脂新品"},"value": "【新品上市】奶茶自然清新亲近自然"},"value": "重磅推荐，MD新品试用中！},"value": "6662人评价 95%好评"},},},},},

2024-10-12 17:56:59 612

原创 vue3--vite通用组件自动化注册

在实际开发中，我们可能会遇见在一个项目中会很平凡的使用一个或者多个通用组件，那么我们一般采取的做法就是写一个公共的index.js页面，然后将所有的通用组件引入进去，再利用app.component一个一个去注册，最后在main.js中注册插件。defineAsyncComponent：创建一个按需加载的异步组件。Glob：帮助我们在文件系统重导入多个模块。通过以上就可以实现通用组件的自动化注册了。这里我们就举一个简单的示例来演示一下。通过以上方式就可以帮助我们完成了。

2024-10-12 16:30:05 422

原创鸿蒙--WaterFlow 实现商城首页

2.停止滚动，是否触底了触底了才加载数据，反之不加载数据；，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。触底了--只有触底了才会进行数据加载，这里会出现加载两次的情况，因此在这里不适合进行数据的请求操作。│ │ │ └──CommonConstants.ets // 公共常量类。└──entry/src/main/resources // 资源文件目录。注册三个事件，开始滚动，滚动结束，滚动至列表尾部(触发两次，滚动至+回弹)

2024-10-11 16:17:25 485

原创 vue3--移动端slider处理

对于这里的处理一共分为两个部分，点击滑块后变色，动画效果。

2024-10-11 08:33:10 191

原创 vue3--通用组件 popup 封装

在业务场景中，假设这里我们要实现点击汉堡后，会有一个自下而上的popup弹出层。因此这里我们需要先实现这样的一个公共的popup弹出层。到这里这个组件也就轻松的实现啦~

2024-10-11 08:31:12 554

原创鸿蒙--下拉刷新+上拉加载

Refresh组件支持下拉刷新，包裹list组件，下拉事件中更新列表这里我们需要提前了解一下@Builder装饰器的基本用法ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。为了简化语言，我们将@Builder装饰的函数也称为“自定义构建函数”。文档中心在后面我们也会去详细的讲解 @Builder装饰器的使用。

2024-10-10 09:11:05 566

原创鸿蒙--播放器状态控制

各个页面共享同一个播放状态，而且可以互相控制，如果传递来传递去会非常的麻烦，但是他们都是Tabs组件内的，我们在index页面。创建两个子组件，一个是播放控制的子组件，一个是背景播放的子组件。一个状态，在各个组件。

2024-10-09 08:50:20 449

原创鸿蒙--tabBar

此时，如果我们想实现将icon展示在title的上面类似于微信tabbar的效果，就需要使用自定义Builder来做，因为TabContent的tabBar属性支持CustomBuilder类型，CustomBuilder类型就是builder修饰的函数。

2024-10-08 15:56:16 80

原创小程序和h5深度分析

你写过小程序/H5，那你知道他们的区别在哪里吗？为什么说小程序的性能通常优于 H5?小程序能访问到 DOM 对象吗？小程序的原理是什么？小程序和 H5 都是轻量级的、可直接在移动设备上运行的应用，但它们之间存在一些关键差异。

2024-10-08 13:21:57 339

原创鸿蒙--知乎评论

这里我们将采用组件化的思想进行开发。

2024-10-08 13:18:54 1002

原创 HarmonyOS 自定义 loading 效果

周期函数：在创建自定义组件的新实例后，在执行其build()函数之前执行。函数在自定义组件析构销毁之前执行，这里主要用来清除定时器。

2024-09-27 08:49:56 439

原创 vue3 商城系统中的 sku 功能的实现

这里通过分析不难发现我们需要的数据是在skus里获取到的，但是我这里需要展示的数据又是在SkuCardItem中，那么这里我们就可以利用hooks去实现对应逻辑的抽离，专门用来处理多规格相关的逻辑。这里我们要在父组件 SkuCard 中进行相应的操作，那么在父组件中如何获取到对应的要传递给后端的数据呢？这里可以利用传入回调函数的方式进行。当在规格组件弹窗里选择好对应的值后，点击确定后，会进行相应的替换操作。同时与下面的规格设置进行联动，即规格设置跟随实时变化。其余模块和功能的开发略~这个的原理其实就是对。

2024-09-25 08:34:31 715

原创 vue2 实现简易版的模糊查询功能

节流函数首先是节流，就是节约流量、内存的损耗，旨在提升性能，在高频率频发的事件中才会用到，比如：onresize，onmousemove，onscroll，oninput等事件中会用到节流函数。

2024-09-24 11:42:11 329

原创 vue2 文本溢出那些事

平时开发中，如果标题超出多行，我们希望出现省略号，并且为其添加简单提示。但是，如果我们在全局写公共class类，行数不好控制。如果统一加title=xxx，又会出现文本是否超出都会出现title的现象。那么到底该如何实现？

2024-09-24 11:41:14 418

原创 vue3 数字滚动组件封装

属性描述类型默认值startVal开始值Number0endVal结束值Number0duration持续时间Number0autoplay自动播放Booleantruedecimals要显示的小数位数Number0decimal十进制分割Stringseparator分隔符Stringprefix前缀String''suffix后缀String''useEasing使用缓和功能BooleantrueeasingFn。

2024-09-24 11:37:02 559

原创 vue3 实现图片预览组件

【代码】vue3 实现图片预览组件。

2024-09-24 11:33:08 1473

原创 react 常用hooks封装--useReactive

一种具备响应式的useState通过 setCount 来进行设置，count 来获取，使用这种方式才能够渲染视图来看看正常的操作，像这样count = 7;此时count的值就是7，也就是说数据是响应式的。那么我们可不可以将 useState 也写成响应式的呢？我们可以自由设置count的值，并且可以随时获取到count的最新值，而不是通过setCount来设置那么，我们来想想怎么去实现一个具备响应式特点的useState也就是useRactive这个钩子的出入参如何设定。

2024-09-23 08:52:03 861

原创 react hooks--useImperativeHandle

 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起； 但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作； 所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象； 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中； 直接暴露给父组件带来的问题是某些情况的不可控； 父组件可以拿到DOM后进行任意的操作；自定义暴露出去的数据在。

2024-09-23 08:49:27 876

空空如也

getComputedStyle()获取img属性问题

webpack在开发过程中的使用疑惑

对于项目开发中webpack的疑惑