css,环形

思路:
1.先利用conic-gradient属性画一个圆,然后再叠加
效果图

在这里插入图片描述

<template><div class="ring"><div class="content"><slot></slot></div></div>
</template>
<script>
import { defineComponent, reactive, toRefs, computed, onMounted } from "vue";
export default defineComponent({props: {width: {type: Number,default: 200,},height: {type: Number,default: 200,},color: {type: String,default: "#fcb844",},angle: {type: Number,default: 360,},total: {type: Number,default: 360,},unit: {type: String,default: "px",},interval: {type: Number,default: 20,},autoPlay: {type: Boolean,default: true,},},setup(props, { emit }) {const datas = reactive({timer: null,sportAge: 0,});// 设置渐变const bgImage = computed(() => {datas.sportAge = props.autoPlay ? datas.sportAge : currentAngle.value;return `conic-gradient(${props.color} 0deg, ${props.color} ${datas.sportAge}deg, transparent 0deg)`;});// 当前度数(deg)const currentAngle = computed(() => {return ((360 / props.total) * props.angle).toFixed(2);});// 单位前缀const unitSuffix = computed(() => {return (data, interval = 0) => {return data - interval + props.unit;};});//动画const animationPlay = () => {datas.timer = setInterval(() => {if (currentAngle.value <= datas.sportAge) {clearInterval(datas.timer);datas.timer = null;return;}datas.sportAge++;}, 10);};onMounted(() => {props.autoPlay ? animationPlay() : "";});return {...toRefs(datas),bgImage,unitSuffix,};},
});
</script>
<style lang="less" scoped>
.ring {position: relative;width: v-bind(unitSuffix(width));height: v-bind(unitSuffix(height));display: flex;align-items: center;justify-content: center;&::before {content: "";position: absolute;left: 0;top: 0;width: v-bind(unitSuffix(width));height: v-bind(unitSuffix(height));// background-color: red; /* 对于不支持渐变的浏览器 */background-image: v-bind(bgImage);border-radius: 50%;transform: scale(-1, 1);}&::after {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: v-bind(unitSuffix(width, interval));height: v-bind(unitSuffix(height, interval));border-radius: 50%;background-color: #ffffff;}.content {position: absolute;z-index: 3;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
}
</style>
<template><div class="ring_box"><div class="inner"><ring:width="180":height="180":color="innerColor":z-index="2":interval="interval"></ring><div class="out"><ring :total="3454" :angle="2234" :interval="interval" :z-index="4"><ring:width="175":height="175":color="innerColor":interval="interval / 2":z-index="4"><div>内容</div></ring></ring></div></div></div>
</template>
<script lang="ts">
import ring from "./ring.vue";
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({components: {ring,},setup(props) {const datas = reactive({width: 180,height: 180,outColor: "",innerColor: "#feedd1",interval: 40,});return {...toRefs(datas),};},
});
</script>
<style lang="less" scoped>
.ring_box {width: 300px;height: 300px;display: flex;align-items: center;justify-items: center;position: relative;.out,.inner {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/86640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【力扣每日一题】2023.9.24 LRU缓存

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 这又是一道程序设计类的题目&#xff0c;要我们实现LRU缓存的get和put操作。 简单说一下LRU缓存是什么&#xff0c;在我看来就是实用主义…

【李沐深度学习笔记】矩阵计算(2)

课程地址和说明 线性代数实现p4 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 本节是第二篇 矩阵计算 矩阵的导数运算 此处参考了视频&#xff1a;矩阵的导数运算 为了方便看出区别&#xff0c;我将所有的向量…

VSCode 配置 Lua 开发环境(清晰明了)

概述 由于 AutoJS 学得已经差不多了&#xff0c;基本都会了&#xff0c;现在开始向其他游戏脚本框架进发&#xff0c; Lua 语言很强大&#xff0c;就不多说&#xff0c; 按键精灵、触动精灵等等都是用该语言编程脚本的&#xff0c;由于按键精灵、触动精灵 和 AutoJS 类似,不是…

复习Day02:数组part02:977. 有序数组的平方、209. 长度最小的子数组、904. 水果成篮、59. 螺旋矩阵II

之前的blog链接&#xff1a;https://blog.csdn.net/weixin_43303286/article/details/131700482?spm1001.2014.3001.5501 我用的方法是在leetcode再过一遍例题&#xff0c;明显会的就复制粘贴&#xff0c;之前没写出来就重写&#xff0c;然后从拓展题目中找题目来写。辅以Lab…

第三十章 Classes - 方法生成器

[toc] 第三十章 Classes - 方法生成器 方法生成器 方法生成器是类编译器在类编译期间调用的程序。它的输出是该方法的实际运行时实现。方法生成器提供了一种继承方法的方法&#xff0c;可以生成根据继承类或属性的需要定制的高性能、专用代码。在 IRIS 库中&#xff0c;方法…

基于Xml方式Bean的配置-初始化方法和销毁方法

SpringBean的配置详解 Bean的初始化和销毁方法配置 Bean在被实例化后&#xff0c;可以执行指定的初始化方法完成一些初始化的操作&#xff0c;Bean在销毁之前也可以执行指定的销毁方法完成一些操作&#xff0c;初始化方法名称和销毁方法名称通过 <bean id"userService…

后置处理 Bean

目录 ​编辑一、后置处理 Bean 1、后置处理 Bean 的运行原理分析 2、BeanPostProcessor 的开发步骤 &#xff08;1&#xff09;实现 BeanPostProcessor 接口 &#xff08;2&#xff09;Spring 的配置文件配置 &#xff08;3&#xff09;细节 一、后置处理 Bean BeanPost…

什么是IoT数字孪生?

数字孪生是资产或系统的实时虚拟模型&#xff0c;它使用来自连接的物联网传感器的数据来创建数字表示。数字孪生允许您从任何地方实时监控设备、资产或流程。数字孪生用于多种目的&#xff0c;例如分析性能、监控问题或在实施之前运行测试。从物联网数字孪生中获得的见解使用户…

FreeSWITCH windows编译

今天在windows下编译fs1.10.6版本&#xff0c;走了不少弯路&#xff0c;搞定后决定记录下来。 按官网的步骤来&#xff0c;就不会差太远。 https://developer.signalwire.com/freeswitch/FreeSWITCH-Explained/Installation/Windows-Install_1966780/ 先安装vs2017&#xff…

Openresty(二十一)ngx.balance和balance_by_lua灰度发布

一 openresty实现灰度发布 ① 灰度发布 说明&#xff1a; 早期博客对灰度发布的概念进行解读,并且对原生 nginx灰度实现进行讲解后续&#xff1a; 主要拿节点引流的灰度发布,并且关注gray灰度策略 相关借鉴 ② 回顾HTTP反向代理流程 ngx_http_upstream 可操作点&#…

指定程序在哪个GPU上运行

摘要&#xff1a; 当本地&#xff08;或服务器&#xff09;有个多个GPU时&#xff0c;需要指定程序在指定GPU上运行&#xff0c;需要做以下设置。 目录 一、在终端上指定GPU二、在程序中指定GPU三、系统变量指定GPU四、pytorch中指定GPU 一、在终端上指定GPU 在终端运行程序时…

Python:Django框架的Hello wrold示例

Django是Python的目前很常用的web框架&#xff0c;遵循MVC设计模式。 以下介绍如何安装Django框架&#xff0c;并生成最简单的项目&#xff0c;输出Hello world。(开发工具VScode) 一、安装Django 在VScode终端控制台执行以下指令安装Django python install django 如果要查…

第15篇ESP32 idf框架 wifi联网_WiFi AP模式_手机连接到esp32开发板

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloword第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 第4篇:vscodeplatformio搭建esp32 arduino开发环境 ​​​​​​第5篇:doit_esp32_devkit_v1使用pmw呼吸灯实验 第6篇:ESP32连接无源喇叭播…

Django之初入门

一&#xff09;Django简介 1.简介 Django是一个开源的Python Web框架&#xff0c;它以简洁高效的方式帮助开发者构建复杂的Web应用程序。Django采用了MVC&#xff08;Model-View-Controller&#xff09;的架构模式&#xff0c;通过强大的工具和功能&#xff0c;提供了一套完整…

js网络编程

目录 AJAXXHR创建AJAX请求GET和POST传递参数XHR的state其他事件监听响应数据和响应类型http的状态码超时时间封装自己AJAX函数 Axios创建Axios请求实例请求和响应拦截器 FetchFetch与XHR的区别Fetch数据的响应发送Fetch请求 封装Axios AJAX AJAX即异步的JavaScript 和 XML&…

Spring面试题11:什么是Spring的依赖注入

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:说一说Spring的依赖注入 依赖注入(Dependency Injection)是Spring框架的一个核心特性,它是指通过外部容器将对象的依赖关系注入到对象中,从而…

M-LAG协议交互原理

介绍M-LAG的实现原理。 基于M-LAG组成的双活系统提供了设备级的可靠性&#xff0c;那么M-LAG是如何建立的&#xff1f;如图1所示&#xff0c;M-LAG的建立过程有如下几个步骤&#xff1a; DFS Group配对 当M-LAG两台设备完成配置后&#xff0c;设备首先通过peer-link链路发送DF…

论文阅读-Group-based Fraud Detection Network on e-Commerce Platforms

目录 摘要 1 Introduction 2 BACKGROUND AND RELATED WORK 2.1 Preliminaries 2.2 Related Works 3 MODEL 3.1 Structural Feature Initialization 3.2 Fraudster Community Detection 3.3 Training Objective 4 EXPERIMENT 4.1 Experimental Setup 4.2 Prediction …

laravel 阿里云短信发送

示例 一、安装 安装&#xff1a;composer require mrgoon/aliyun-sms dev-master 二、打开config/app.php&#xff0c;添加配置代码 1、‘providers’ 配置组下添加 Mrgoon\Aliyunsms\AliyunsmsServiceProvider::class, 2、‘aliases’ 配置组下添加 Aliyunsms>Mrgoon…

【力扣】13. 罗马数字转整数

题目描述 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符数值I1V5X10L50C100D500M1000 例如&#xff0c; 罗马数字 2 写做 II &#xff0c;即为两个并列的 1 。12 写做 XII &#xff0c;即为 X II 。 27 写…