基于Vue3實(shí)現(xiàn)印章徽章組件的示例代碼
需要實(shí)現(xiàn)的組件效果:
該組件有設(shè)置顏色、大小、旋轉(zhuǎn)度數(shù)和文本內(nèi)容功能。
一、組件實(shí)現(xiàn)代碼
組件代碼文件結(jié)構(gòu)
src/components/StampBadge/src/StampBadge.vue 文件代碼
<template> <div class="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 lang="ts"> import { defineComponent } from "vue"; export default defineComponent({ name: "StampBadge", inheritAttrs: false, }); </script> <script lang="ts" setup> import { computed, unref } from "vue"; import { stampBadgeProps } from "./props"; import { useAttrs } from "/@/hooks/core/useAttrs"; const props = defineProps(stampBadgeProps); // get component class const attrs = useAttrs({ excludeDefaultKeys: false }); const getStampBadgeClass = computed(() => { const { color, size } = props; return [ { [`stamp-badge-${color}`]: !!color, [`stamp-badge-${size}`]: !!size, }, ]; }); // get inherit binding value const getBindValue = computed(() => ({ ...unref(attrs), ...props })); </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>
src/components/StampBadge/src/props.ts 文件代碼
export const stampBadgeProps = { 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" }, };
src/components/StampBadge/index.ts 文件代碼
import { withInstall } from "/@/utils"; import type { ExtractPropTypes } from "vue"; import stampbadge from "./src/StampBadge.vue"; import { stampBadgeProps } from "./src/props"; export const StampBadge = withInstall(stampbadge); export declare type ButtonProps = Partial< ExtractPropTypes<typeof stampBadgeProps> >;
src/utils/index.ts 文件代碼
export const withInstall = <T>(component: T, alias?: string) => { const comp = component as any; comp.install = (app: App) => { app.component(comp.name || comp.displayName, component); if (alias) { app.config.globalProperties[alias] = component; } }; return component as T & Plugin; };
二、組件全局注冊(cè)代碼
src/components/registerGlobComp.ts 文件代碼
import type { App } from "vue"; import { StampBadge } from "./StampBadge"; export function registerGlobComp(app: App) { app.use(StampBadge); }
src/main.ts 文件代碼
import { createApp } from "vue"; import App from "./App.vue"; import { registerGlobComp } from "/@/components/registerGlobComp"; async function bootstrap() { // 創(chuàng)建應(yīng)用實(shí)例 const app = createApp(App); // 注冊(cè)全局組件 registerGlobComp(app); // 掛載應(yīng)用 app.mount("#app", true); } bootstrap();
三、組件應(yīng)用代碼
<div style="width: 500px; height: 100px; position: relative"> <StampBadge style="position: absolute; top: 0; right: 0" size="middle" color="success" content="已建檔" :rotate="45" /> </div>
到此這篇關(guān)于基于Vue3實(shí)現(xiàn)印章徽章組件的示例代碼的文章就介紹到這了,更多相關(guān)Vue3印章徽章組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
這篇文章主要介紹了Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12Vue中使用vue2-perfect-scrollbar制作滾動(dòng)條
這篇文章主要介紹了Vue中使用vue2-perfect-scrollbar滾動(dòng)條,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06vue2使用?element表格展開(kāi)功能渲染子表格的方式
這篇文章主要介紹了vue2使用?element表格展開(kāi)功能渲染子表格的方式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中el-tree動(dòng)態(tài)初始默認(rèn)選中和全選實(shí)現(xiàn)的相關(guān)資料,eltree默認(rèn)選中eltree是一種常用的樹(shù)形控件,通常用于在網(wǎng)頁(yè)上呈現(xiàn)樹(shù)形結(jié)構(gòu)的數(shù)據(jù),例如文件夾、目錄、組織結(jié)構(gòu)等,需要的朋友可以參考下2023-09-09Vue數(shù)據(jù)綁定實(shí)例寫(xiě)法
在本篇文章里小編給大家整理的是關(guān)于Vue數(shù)據(jù)綁定實(shí)例寫(xiě)法以及相關(guān)知識(shí)點(diǎn),需要的朋友們學(xué)習(xí)下。2019-08-08Vue觸發(fā)input選取文件點(diǎn)擊事件操作
這篇文章主要介紹了Vue觸發(fā)input選取文件點(diǎn)擊事件操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08