文章 2025-06-05 来自:开发者社区

Vue 自定义进度条组件封装及使用方法详解

自定义进度条组件使用方法 1. 组件引入与注册 要在项目里使用自定义进度条组件,首先得把组件引入到需要使用它的文件中,然后进行注册。 import CustomProgress from './components/CustomProgress.vue'; export default { components: { CustomProg...

Vue 自定义进度条组件封装及使用方法详解
文章 2025-06-02 来自:开发者社区

Vue 文件批量下载组件封装完整使用方法及优化方案解析

一、批量下载功能使用方法 (一)方案一:前端打包方案(file-saver + jszip) 安装依赖 npm install file-saver jszip 创建工具函数在项目中创建utils/batchDownload.js文件: import { saveAs } from 'file-...

文章 2024-07-04 来自:开发者社区

vue 组件封装 -- 添加【呼吸】动画效果(两种: 淡入>>淡入,淡入>>淡出>>淡入)

呼吸动画一 淡入>>淡入>>淡入>>淡入>>淡入>>淡入 常用于展示某异步操作持续执行中 封装组件 breathing.vue ...

vue 组件封装 -- 添加【呼吸】动画效果(两种: 淡入>>淡入,淡入>>淡出>>淡入)
文章 2024-07-04 来自:开发者社区

vue 组件封装——可自由拖拽移动的盒子

最终效果 完整代码 关键性要点,详见注释 组件封装 superBox.vue ...

vue 组件封装——可自由拖拽移动的盒子
文章 2024-07-02 来自:开发者社区

vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)

组件 s-progress.vue <template> <div class="el-progress" :class="[ 'el-progress--' + type, status ? 'is-' + st...

vue组件封装 —— 仪表盘(有缺口的环形进度条内显示百分比值)
文章 2024-07-01 来自:开发者社区

vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)

目标 实现类似插件 vue-fullpage.js 的全屏滚动翻页效果( vue-fullpage.js 的教程详见 https://blog.csdn.net/weixin_41192489/article/details/111104443) 实现原理(要点) 1. 使用 “子绝父相” 定位,实现上下滑动过渡动画翻页(滑动动画的实现...

vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
文章 2024-07-01 来自:开发者社区

vue 组件封装 | s-scroll 页面滚动动画

目标 实现类似插件 wow.js 的页面滚动时,加载动画的效果( wow.js的教程详见 https://blog.csdn.net/weixin_41192489/article/details/111088137) 实现思路 根据指定元素与浏览器窗口顶部的距离是否小于浏览器窗口的高度来判断元素是否进入浏览器窗口 核...

vue 组件封装 | s-scroll 页面滚动动画
文章 2024-07-01 来自:开发者社区

Vue 组件封装 | 给汉字注音(带声调),内含汉字转拼音(带声调/不带声调),获取汉字首字母的方法

  <s-pinyin content="我们都有一个家,名字叫中国。"></s-pinyi...

Vue 组件封装 | 给汉字注音(带声调),内含汉字转拼音(带声调/不带声调),获取汉字首字母的方法
文章 2024-07-01 来自:开发者社区

vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)

<s-inputNumber v-model="height" tip="请输入您的身高" :precision="2" :min="0" :max="3" :step="0.01"/> ...

vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
文章 2024-07-01 来自:开发者社区

vue 组件封装 | 图片放大镜(同天猫、淘宝、京东等商品图片放大浏览效果)

封装组件 s-imgZoom.vue <template> <div style="display: flex;position: relative"> <div class="box" :sty...

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此,由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界,将面向未来,制定技术策略和目标并落地执行,推动终端技术发展,帮助工程师成长,打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号:阿里巴巴终端技术,欢迎关注。

+关注