当前位置: 首页 > news >正文

利用Vue2实现印章徽章组件

需要实现的组件效果:

img

该组件有设置颜色、大小、旋转度数和文本内容功能。

一、组件实现代码

<template><divclass="first-ring"v-bind="getBindValue":class="getStampBadgeClass":style="{ transform: `rotate(${rotate}deg)` }"><div class="second-ring" :class="getStampBadgeClass"><div class="third-ring" :class="getStampBadgeClass"><div class="forth-ring" :class="getStampBadgeClass"><div class="content-rectangle ellipsis" :class="getStampBadgeClass"><span class="">{{ content }}</span></div></div></div></div></div>
</template><script>export default {name: "StampBadge",// inheritAttrs: false,props: {color: {type: String,default: "primary",validator: (v) =>["primary", "error", "warning", "success", "info"].includes(v),},/*** stamp badge size.* @default: middle*/size: {type: String,default: "middle",validator: (v) => ["large", "middle", "small"].includes(v),},/*** stamp badge rotate deg.* @default: 0*/rotate: { type: Number, default: 0 },content: { type: String, default: "Unknown" },},computed: {getStampBadgeClass() {const { color, size } = this.$props;return [{[`stamp-badge-${color}`]: !!color,[`stamp-badge-${size}`]: !!size,},];},getBindValue() {return { ...this.$attrs, ...this.$props };},},methods: {},};
</script><style lang="less" scoped>.first-ring {border-radius: 100px;display: flex;justify-content: center;align-items: center;}.second-ring {background: #fff;border-radius: 100px;display: flex;justify-content: center;align-items: center;}.third-ring {border-radius: 100px;display: flex;justify-content: center;align-items: center;}.forth-ring {background: #fff;border-radius: 100px;display: flex;justify-content: center;align-items: center;position: relative;}.content-rectangle {background: #fff;font-weight: bold;text-align: center;position: absolute;}.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}// primary.stamp-badge-primary.first-ring {background: #1890ff;}.stamp-badge-primary.third-ring {background: #1890ff;}.stamp-badge-primary.content-rectangle {border: 1px solid #1890ff;color: #1890ff;}// success.stamp-badge-success.first-ring {background: #52c41a;}.stamp-badge-success.third-ring {background: #52c41a;}.stamp-badge-success.content-rectangle {border: 1px solid #52c41a;color: #52c41a;}// error.stamp-badge-error.first-ring {background: #ff4d4f;}.stamp-badge-error.third-ring {background: #ff4d4f;}.stamp-badge-error.content-rectangle {border: 1px solid #ff4d4f;color: #ff4d4f;}// warning.stamp-badge-warning.first-ring {background: #faad14;}.stamp-badge-warning.third-ring {background: #faad14;}.stamp-badge-warning.content-rectangle {border: 1px solid #faad14;color: #faad14;}// info.stamp-badge-info.first-ring {background: #ccc;}.stamp-badge-info.third-ring {background: #ccc;}.stamp-badge-info.content-rectangle {border: 1px solid #ccc;color: #ccc;}// large.stamp-badge-large.first-ring {width: 84px;height: 84px;}.stamp-badge-large.second-ring {width: 80px;height: 80px;}.stamp-badge-large.third-ring {width: 74px;height: 74px;}.stamp-badge-large.forth-ring {width: 64px;height: 64px;}.stamp-badge-large.content-rectangle {width: 90px;font-size: 1.2rem;}// middle.stamp-badge-middle.first-ring {width: 64px;height: 64px;}.stamp-badge-middle.second-ring {width: 60px;height: 60px;}.stamp-badge-middle.third-ring {width: 56px;height: 56px;}.stamp-badge-middle.forth-ring {width: 48px;height: 48px;}.stamp-badge-middle.content-rectangle {width: 70px;font-size: 1rem;}// small.stamp-badge-small.first-ring {width: 54px;height: 54px;}.stamp-badge-small.second-ring {width: 50px;height: 50px;}.stamp-badge-small.third-ring {width: 46px;height: 46px;}.stamp-badge-small.forth-ring {width: 38px;height: 38px;}.stamp-badge-small.content-rectangle {width: 60px;font-size: 0.8rem;}
</style>

 二、组件应用代码:

<div style="width: 500px; height: 100px; position: relative"><StampBadgestyle="position: absolute; top: 0; right: 0"size="middle"color="success"content="已支付":rotate="45"/>
</div>

 

相关文章:

利用Vue2实现印章徽章组件

需要实现的组件效果&#xff1a; 该组件有设置颜色、大小、旋转度数和文本内容功能。 一、组件实现代码 <template><divclass"first-ring"v-bind"getBindValue":class"getStampBadgeClass":style"{ transform: rotate(${rotate}…...

金麟国际用工-全新蓝领跨境就业服务平台

金麟国际用工-全新蓝领跨境就业服务平台 金麟国际用工平台是一个引领时代的蓝领跨境就业服务平台&#xff0c;专为蓝领求职者和雇主提供一个全面、便捷、高效的就业对接环境。这个平台通过其强大的数字化系统&#xff0c;包括客户管理系统、岗位信息系统和智能营销工具等&…...

性能测试知多少---并发用户

在做性能测试的时候&#xff0c;我们常常听到并发用户、响应时间、吞吐量专业术语&#xff0c;也许大家都理解&#xff0c;这里有一个理解的层次与深度概念。最近有看断念《软件性能详解与案例分析》一书&#xff0c;看了他的讲解&#xff0c;原来我对这些术语的理解还是比较肤…...

自动驾驶算法(三):RRT算法讲解与代码实现(基于采样的路径规划)

目录 1 RRT算法原理 2 RRT算法代码解析 3 RRT完整代码 1 RRT算法原理 RRT算法的全称是快速扩展随机树算法(Rapidly Exploring Random Tree)&#xff0c;它的想法就是从根结点长出一棵树当树枝长到终点的时候这样就能找到从终点到根节点的唯一路径。 算法流程&#xff1a; 首先…...

基于SSM的酒店客房预定管理系统

基于SSM的酒店客房预定管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台主页 客房详情 登录界面 管理员界面 用户界面 摘要 基于SSM&#xff08;…...

IDEA初步入门

1 安装 现在的系统更迭很快&#xff0c;很多软件都只支持win10 和 11了&#xff0c;但我们过时党还在用win7. 所以就必须找到合适的版本。在windows 7 64位系统下&#xff0c;可以使用IDEA 2020.1.4版本。 在Jetbrain官方下&#xff0c;找到历史版本&#xff0c;找到windows版…...

《Webpack 5 基础配置》- 禁止在出现编译错误或警告时,覆盖浏览器全屏显示

Webpack5 overlay 配置地址默认编译错误或警告为 true&#xff0c;即浏览器全屏显示&#xff1b;overlay 属性可以是 boolean 型&#xff0c;也可是 object 类型&#xff1b;还有其它设置说明&#xff0c;详见上述官网地址&#xff1b; module.exports {devServer: {client: {…...

echart 饼图怎么让图形铺满整个div

1.原效果&#xff08;未铺满&#xff09;&#xff1a;原配置 2.如果想要铺满&#xff0c;需要设置radius &#xff0c;radius的意思是 第一个元素为内环半径&#xff0c;第二个参数为外环半径&#xff1b; 如果想要填满的话直接写[0,100%],不过第一个为0后就不是圆环里&#…...

回归预测 | Matlab实现WOA-CNN-SVM鲸鱼算法优化卷积神经网络-支持向量机的多输入单输出回归预测

回归预测 | Matlab实现WOA-CNN-SVM鲸鱼算法优化卷积神经网络-支持向量机的多输入单输出回归预测 目录 回归预测 | Matlab实现WOA-CNN-SVM鲸鱼算法优化卷积神经网络-支持向量机的多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.WOA-CNN-SVM鲸鱼算法…...

arm-none-eabi-gcc下实现printf的两种方式

方式1&#xff0c;移植第三方printf库&#xff1a; 1. 下载地址&#xff1a;https://github.com/mpaland/printf 2. 拷贝其中的printf.c和printf.h到本地&#xff1b; 3. 重新实现 void _putchar(char character) 接口&#xff0c;使用具体串口发送ch数据&#xff0c;如在 u…...

组件库开发

组件库开发 环境搭建 menorepo pnpmpnpm-workspacelerna 7.4.2 &#xff08;已全局安装lerna&#xff09; 1、初始化 1.1 新建项目目录root 1.2 在目录root中使用pnpm初始化packages.json文件&#xff0c;新建 pnpm-workspace.yaml文件&#xff0c; packages/文件夹 pnp…...

【python基础】魔法参数*args, **kwargs的使用

文章目录 前言一、*args 和 **kwargs 是什么&#xff1f;二、*args 的用法打包参数&#xff1a;将不定数量的参数传递给一个函数拆分参数&#xff1a;调用一个函数 三、**kwargs 的用法打包参数&#xff1a;将不定数量的参数传递给一个函数拆分参数&#xff1a;调用一个函数 四…...

Android Icon 添加水印 Python脚本

源代码 # -*- coding: utf-8 -*- from PIL import Image 图片合成def mergePictureLXJ():commonIcon Image.open("icon.png")markIcon Image.open("领现金.png")markLayer Image.new(RGBA, commonIcon.size, (0, 0, 0, 0))markLayer.paste(markIcon, (0…...

选择Centos系统需不需要带SElinux?

CentOS 7的SELinux代表"Security-Enhanced Linux"&#xff0c;它是一个Linux操作系统的安全增强功能。SELinux是一个强制访问控制&#xff08;Mandatory Access Control&#xff0c;MAC&#xff09;系统&#xff0c;它在操作系统级别提供了更加精细的访问控制和安全策…...

项目级asp.net框架的LIMS实验室管理系统源码

LIMS可用于管理完整的实验程序&#xff0c;从样品登记到检验、校核、审核到最终批准报告&#xff0c;建立在过程质量控制的基础上&#xff0c;对检测流程进行有效全面的管理&#xff0c;对影响质量的人、机、料、法、环因素加以控制&#xff0c;同时为质量改进提供数据依据。进…...

pthread 变量静态初始化 避免使用被销毁过的变量

pthread 变量静态初始化 互斥锁&#xff1a;pthread_mutex_t g_mutex PTHREAD_MUTEX_INITIALIZER;读写锁&#xff1a;pthread_rwlock_t g_rwlock PTHREAD_RWLOCK_INITIALIZER;条件变量&#xff1a;pthread_cond_t g_cond PTHREAD_COND_INITIALIZER; 适用场景 以互斥锁为例…...

深度学习之基于ResNet18的神经网络水果分类系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介二、功能三、神经网络水果分类系统四. 总结 一项目简介 基于ResNet18神经网络的水果分类系统是一个利用深度学习技术进行水果图像分类的系统。下面是该系统…...

并查集易错点

并查集就俩核心点,1是找父节点,2是合并 1: return fa[x] x ? x : fa[x] find(fa[x]); 2. fa[find(a)] find(b) 第二步还挺容易写错的,左边是find(a)的根,而不是fa[a]...

车载网关产品解析(附:车载网关详细应用案例及部署流程)

5G车载网关是一款功能强大的工业级无线通讯设备。它集成了4G/5G双模网络模块、M12接口设计、强大的路由和安全功能等特性,可以为车载和移动应用提供稳定可靠的无线数据连接。 链接直达&#xff1a;https://www.key-iot.com/iotlist/sv900.html ### 产品特性 5G车载网关最大的…...

高校教务系统登录页面JS分析——天津大学

高校教务系统密码加密逻辑及JS逆向 本文将介绍天津大学教务系统的密码加密逻辑以及使用JavaScript进行逆向分析的过程。通过本文&#xff0c;你将了解到密码加密的基本概念、常用加密算法以及如何通过逆向分析来破解密码。 本文仅供交流学习&#xff0c;勿用于非法用途。 一、密…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

Python 高级应用10:在python 大型项目中 FastAPI 和 Django 的相互配合

无论是python&#xff0c;或者java 的大型项目中&#xff0c;都会涉及到 自身平台微服务之间的相互调用&#xff0c;以及和第三发平台的 接口对接&#xff0c;那在python 中是怎么实现的呢&#xff1f; 在 Python Web 开发中&#xff0c;FastAPI 和 Django 是两个重要但定位不…...