做网站需要那些技术,全球军事网站,wordpress 发布文章 自定义栏目,四川交投建设招标网站创建一个动态进度环组件
在现代网页设计中#xff0c;进度环是一种常见的视觉元素#xff0c;用于展示任务的完成度或加载状态。本文将介绍如何使用Vue.js和Less创建一个动态进度环组件#xff0c;该组件不仅具有美观的视觉效果#xff0c;还能够根据用户输入动态改变颜色…创建一个动态进度环组件
在现代网页设计中进度环是一种常见的视觉元素用于展示任务的完成度或加载状态。本文将介绍如何使用Vue.js和Less创建一个动态进度环组件该组件不仅具有美观的视觉效果还能够根据用户输入动态改变颜色。 已经支持动态配置-----
相似灵感
抖音代码示例–直通车
HTML结构
首先我们定义了组件的基本HTML结构。在template标签内我们创建了一个div元素它包含了两个子元素一个用于显示进度环的div和一个输入框用户可以通过输入框来改变进度环的颜色。
templatediv classprogress-ringdiv classprogress-ring-circlespanv-for(item, index) in 25:keyindex:style{ transform: rotate(${(index / stripNumber) * 360 210}deg) }/span/divinput typetext v-modelvalue /button typebutton clickchColor()开始/button/div
/templateLess样式
接下来我们使用Less来定义进度环的样式。我们创建了一个.progress-ring-circle类它定义了进度环的基本样式包括尺寸、位置和旋转效果。我们还定义了一个span伪元素用于显示进度环的颜色。
style scoped langless
.progress-ring-circle {width: 40vw;height: 40vw;position: absolute;display: flex;justify-content: center;align-items: center;transform: rotate3d(1, 0, 0, -66deg);margin: 120px;span {--bg: rgba(0, 0, 0, 0);--sg: transparent;position: absolute;height: 100%;width: 100%;display: flex;justify-content: center;align-items: start;// transform-origin: 0% 0%; /* 将旋转原点设置在左上角 */}span::after {content: ;width: 2.5vw; // 可自行改为动态宽度height: 3vw;position: absolute;background-color: var(--bg);box-shadow: 0 0 0.5vw var(--sg), 0 0 1vw var(--sg), 0 0 2vw var(--sg);transition: 0.8s linear; /* 指定过渡属性 */}
}
/styleVue.js逻辑
最后我们使用Vue.js来添加动态功能。在script标签内我们定义了组件的逻辑。我们创建了一个名为ProgressRing的Vue组件并在data函数中定义了几个数据属性包括进度环的颜色值和进度值。
script
export default {name: ProgressRing,data() {return {items: [item 1, item 2, item 3, item 4, item 5], // 你可以根据需要修改这个数组value: 20,stripNumber: 25};},mounted() {},methods: {chColor() {const main document.querySelector(.progress-ring-circle);console.log(main.children.length);for (let i main.children.length - 1; i 0; i--) {var number this.stripNumber - this.value / (100 / this.stripNumber);if (i number) {main.children[i].style.setProperty(--bg,hsl(${(i / this.stripNumber) * 360}, 100%, 50%));main.children[i].style.setProperty(--sg,hsl(${(i / this.stripNumber) * 360}, 100%, 50%));} else {main.children[i].style.setProperty(--bg, rgba(0, 0, 0, 0));main.children[i].style.setProperty(--sg, transparent);}}}}
};
/script在chColor方法中我们根据用户输入的值动态改变进度环的颜色。我们通过遍历进度环的子元素并根据当前的进度值来设置每个子元素的颜色。
通过以上步骤我们成功创建了一个动态进度环组件它不仅具有美观的视觉效果还能够根据用户输入动态改变颜色。这种组件在网页设计中非常实用可以用于展示加载状态或任务完成度。
完整代码
style scoped langless
.progress-ring-circle {width: 40vw;height: 40vw;position: absolute;display: flex;justify-content: center;align-items: center;transform: rotate3d(1, 0, 0, -66deg);margin: 120px;span {--bg: rgba(0, 0, 0, 0);--sg: transparent;position: absolute;height: 100%;width: 100%;display: flex;justify-content: center;align-items: start;// transform-origin: 0% 0%; /* 将旋转原点设置在左上角 */}span::after {content: ;width: 2.5vw; // 改变stripNumber时记得改height: 3vw;position: absolute;background-color: var(--bg);box-shadow: 0 0 0.5vw var(--sg), 0 0 1vw var(--sg), 0 0 2vw var(--sg);transition: 0.8s linear; /* 指定过渡属性 */}
}
/style
templatediv classprogress-ringdiv classprogress-ring-circlespanv-for(item, index) in stripNumber:keyindex:style{transform: rotate(${(index / stripNumber) * 360 210}deg)}/span/divinput typetext v-modelvalue /button typebutton clickchColor()开始/button/div
/templatescript
export default {name: ProgressRing,data() {return {items: [item 1, item 2, item 3, item 4, item 5], // 你可以根据需要修改这个数组value: 20,stripNumber: 25};},mounted() {},methods: {chColor() {const main document.querySelector(.progress-ring-circle);console.log(main.children.length);// for (let i 0; i main.children.length; i) {for (let i main.children.length - 1; i 0; i--) {var number this.stripNumber - this.value / (100 / this.stripNumber);if (i number) {main.children[i].style.setProperty(--bg,// redhsl(${(i / this.stripNumber) * 360}, 100%, 50%));main.children[i].style.setProperty(--sg,hsl(${(i / this.stripNumber) * 360}, 100%, 50%));} else {main.children[i].style.setProperty(--bg, rgba(0, 0, 0, 0));main.children[i].style.setProperty(--sg, transparent);}}}}
};
/script
