vue组件走马灯_支持多框架的组件库KPC 1.0正式发布

最新推荐文章于 2023-02-14 12:01:56 发布
最新推荐文章于 2023-02-14 12:01:56 发布
阅读量281 收藏
点赞数
文章标签： vue组件走马灯
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39995108/article/details/111632324
版权
KPC 1.0正式发布，新增包括走马灯、代码编辑器在内的4个组件，大量优化现有功能，提供更完善的表格组件、弹窗样式等。同时，对动画细节进行打磨，增强用户体验。文档也得到补充，支持在线预览和调试。
摘要由CSDN通过智能技术生成

自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！

其实距离0.0.1的发布，到现在已经1年多了，但是KPC并没有收货太多的关注，伴随着一个接一个的小版本迭代，github上星星的数量也不紧不慢地突破100大关。但我们并没有放弃对KPC的细心呵护，每一次star，每一个issue，都使我们备受鼓舞，促使我们打磨每一个细节，力争做出自己的特色，做到精益求精。

关注KPC的用户应该注意到了，KPC已经两个月没有发版了，是的，因为我们这段时间一直在专注1.0的开发，下面便说说这两个月的工作成果吧。

新增4个常用组件

1. 走马灯（轮播图）组件Carousel

除了支持最基本的走马灯效果外，Carousel还支持同时展示多个内容块

d18718c24eb403276bcfd5f2bc7173f6.gif

2. 基于Monaco Editor的代码编辑器组件Code

Monaco Editor是VSCode的web版，功能非常强大

8d46a746267614bf2d5bb84bb2b7fd1e.gif

3. 图钉组件Affix

图钉组件，用于在滚动页面时，固定一些内容

6eb5a7ef0c6226e3fc9a1a2aa6eedc8a.gif

4. 卡片组件Card

除了常用的卡片外，还支持分栏卡片

b657ff14ffe0afdba4e780fac8c435c7.png


新增大量特性

除了上述新增的组件外，对现有组件的功能也进行了大量优化和改进。

1. 表格组件Table支持表头分组，合并单元格，保存列宽信息等功能

最低0.47元/天 解锁文章
weixin_39995108
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
包教包会，纯 CSS 实现步进环绕跑马灯效果
小陈的博客
10-31 752
执行上下文是什么：代码执行前，Js引擎会创建代码的执行环境，代码的执行环境称作执行上下文，包含当前正在运行的代码以及帮助其执行的所有内容。*全局执行上下文：（1）将window作为全局执行上下文对象（2）创建this，this 指向window（3）给变量和函数安排内存空间（4）变量赋值undefined，函数声明放入内存（5）放入作用域链*全局与函数执行上下文不同：（1）全局：在文件执行前创建；函数：在函数调用时创建（2）全局：只创建一次；函数：调用几次创建几次（3）将window作为全局对象；
kpc：完整，Vue，React和Angular的UI组件库
02-06
English | 产品特点 支持多种框架： / / / 。 完整的自定义主题系统。 360°定位弹出层。 声明式表单验证。 优秀的和设计 90％的覆盖率单元测试。 浏览器支持 IE浏览器/边缘 火狐浏览器 Chrome 苹果浏览器 歌剧 IE10，IE11，Edge 最近2个版本 最近2个版本 最近2个版本 最近2个版本 Vue 安装 npm install kpc-vue --save 用法 < template> < Button > Hello < / Button > < / template > < script > import { Butt
KPC - 金山云出品的高质量开源前端 UI 组件库
那些免费的砖
12-15 874
金山云团队出品的前端 UI 组件库，支持4大主流的前端框架，主题定制功能也很强大。 关于 KPC 前端组件库 前端发展非常繁荣，不少大厂都推出了自己的 UI 组件库，金山云作为一个手握国民办公软件 WPS 的老牌的国产软件厂商，也推出了自家的前端框架 KPC。 KPC 是金山云团队出品的多端统一的 UI 组件库 King design Public Components 的简称，这是一个针对 PC 端 web 项目开发的前端 UI 组件库，封装了40多个 PC 端常用的组件，开箱即用，.
前端实现文字跑马灯的三种方式
weixin_33936401的博客
11-05 1771
前言 最近写了一个文字跑马灯的项目需求，刚开始用js写，能够完成需求。后面想着换种方式(分别是html和css)来实现同一个需求,以减少性能消耗。 首先，需求分析: 需求点1.判断文字的长度和容器的长度，如果文字长度大于容器长度则开始滚动，否则不滚动； 需求点2.判断滚动滚动的结束，在结束的时间点触发事件(比如: 增减样式等操作)； 一、JS实现 思路: 1.判断文字的长度和容器的长度，如果文字长...
前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）
卡尔特斯
02-14 1万+
公式：主图张数 * 单个图片宽度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 为什么设置 -600px？公式：主图张数 * 单个图片高度（每轮主图只有 4 张，4 张照片为一个周期，如果需要轮播的主图为 7、8、9...张，都一样） *//* 重点：单个图片宽度 200，相当于默认不动可见 3 个 *//* 重点：单个图片高度 150，相当于默认不动可见 1 个 *//* 重点：盒子宽度 600 *//* 重点：盒子宽度 150 */
前端Vue项目——首页/课程页面开发及Axios请求
anmi3721的博客
06-26 323
一、首页轮播图 1、elementUI走马灯 　　elementUI中 Carousel 走马灯，可以在有限空间内，循环播放同一类型的图片、文字等内容。 　　这里使用指示器样式，可以将指示器的显示位置设置在容器外部： <template> <el-carousel indicator-position="outside"> <el...
基于Vue的文字跑马灯组件(npm 组件包)
08-30
【Vue文字跑马灯组件创建详解】 在当前的前端开发领域，Vue.js 是一款非常流行的JavaScript框架，它简化了Web应用程序的构建。然而，对于一些特定的动态效果，如跑马灯，Vue社区通常会提供专门的组件来实现。本文将...
vue 实现走马灯效果
12-30
在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果 Part.2 实现 我的做法：利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果 Part.3 代码 HTML ...
同时支持Intact/Vue/React框架的前端组件库
最新发布
07-02
同时支持Intact/Vue/React框架的前端组件库。支持多框架 Intact / Vue / React。支持TypeScript。动态主题切换。声明式表单验证。完善的文档和精心的设计
vue实现文字横向无缝走马灯组件效果的实例代码
10-17
主要介绍了vue 文字横向无缝走马灯组件的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue日期组件 支持vue1.0和2.0
08-31
`vue-datetime` 是一个专为 Vue 设计的日期时间选择器组件，它不仅支持 Vue 1.0，还兼容 Vue 2.0，为开发者提供了丰富的定制选项。 `vue-datetime` 的核心特性包括： 1. **多日期选择**：允许用户同时展开多个日期...
Element UI学习6--Carousel 走马灯
热门推荐
hanrabbit的博客
01-20 1万+
轮播是前端页面运用的比较广泛的一个功能。 在有限空间内，循环播放同一类型的图片、文字等内容。 今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法。 1、基础用法 1、默认 Hover 指示器触发 <template> <div> <el-carousel> <el-carousel-item v-for="item in imgwrap" :key="item.url"> <im
【前端学习日记】利用Vue实现跑马灯的效果
轩辕衍的博客
09-07 701
一、效果 按下roll按钮，文字进行滚动； 按下stop按钮，文字停止滚动； 二、重要代码 1.通过以下方式引入Vue <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 2.实现文字的更替 var start = this.text.substring(0, 1)//获取字符串的第一个元素 var end = thi
【uniapp vue实现轮播图跑马灯】
boombutton的博客
12-26 1180
uni-app vue轮播图跑马灯swiper组件
类走马灯缓动效果
mumu42的博客
07-04 746
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .proListSub {     width: 1190px;     margin: 0px auto;     po
vue——走马灯-类轮播图
zhiqingxue的博客
12-08 1662
前端重积累，话不多说，先上一波效果图: 特意总结的裸着就能使用的轮播图，拿走不谢 vue文件，可以用webstorm进行运行 webstorm前置配置可见如下链接: nodejs配置 <template> <div> <el-carousel :interval="2000" type="card" height="220px" > <el-carousel-item v-for="item in imgList" :key="item.i
h5 实现跑马灯效果
我不是一个假前端的博客
07-01 3359
最近有个项目需要跑马灯的效果，然而本人比较懒，不想写js； 于是搜索了一下，知道h5中有这么一个标签可以实现跑马灯效果！ 这里给大家分享一下： marquee标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果，该标签是个容器标签。 &amp;lt;marquee&amp;gt; 　需要滚动的文字 　需要...
html-marquee标签实现上下滚动走马灯
qq_36972185的博客
03-01 1039
示例 <div style="background-color: #00c4cc;border-radius: 30px;margin: 8px;"> <marquee behavior=scroll direction=up> <div style="height: 200px;"> <div style="display: flex;justify-content: cente
前端插件之跑马灯
蜗牛的博客
08-31 4304
1.效果图 不间断滚动。 2.css代码 #wrapper{ border-top: 3px solid #EB782E; width: 1200px; margin: 0 auto; margin-top: 30px; position: relative; }
vue 组件水平滚动_vue实现文字横向无缝走马灯组件效果的实例代码
05-24
以下是一个简单的 Vue 组件实现文字横向无缝走马灯效果的实例代码： ```vue <template> <div class="marquee"> <div class="marquee-inner" ref="marquee"> <slot></slot> <slot></slot> </div> </div> </template> <script> export default { name: 'Marquee', data() { return { animationId: null, speed: 1, offset: 0, innerWidth: 0, marqueeWidth: 0 } }, mounted() { this.startAnimation() }, beforeDestroy() { this.stopAnimation() }, methods: { startAnimation() { this.animationId = requestAnimationFrame(this.animate.bind(this)) }, stopAnimation() { cancelAnimationFrame(this.animationId) }, animate() { this.offset -= this.speed if (this.offset < -this.marqueeWidth) { this.offset = 0 } this.$refs.marquee.style.transform = `translateX(${this.offset}px)` this.animationId = requestAnimationFrame(this.animate.bind(this)) }, updateDimensions() { this.innerWidth = this.$refs.marquee.clientWidth this.marqueeWidth = this.$refs.marquee.scrollWidth } }, mounted() { window.addEventListener('resize', this.updateDimensions) this.updateDimensions() }, beforeDestroy() { window.removeEventListener('resize', this.updateDimensions) } } </script> <style scoped> .marquee { overflow: hidden; white-space: nowrap; } .marquee-inner { display: inline-block; animation: none; } </style> ``` 该组件包含一个名为 `Marquee` 的 Vue 组件，它具有以下功能： - 在组件内部包含一个具有 `marquee-inner` 类名的 div 元素，用于包含实际的滚动内容。 - 使用 `requestAnimationFrame` API 实现动画效果。 - 使用 `translateX` CSS 属性在水平方向上移动滚动内容。 - 监听窗口大小变化事件，并在更新时重新计算滚动内容的宽度。 使用该组件时，只需要将需要滚动的内容放入组件的插槽中即可： ```vue <marquee> <span>这是滚动的文字1</span> <span>这是滚动的文字2</span> <span>这是滚动的文字3</span> <span>这是滚动的文字4</span> </marquee> ``` 你可以根据需要自定义组件的样式，例如设置滚动速度等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值