您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“基于Vue3怎么實(shí)現(xiàn)印章徽章組件”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“基于Vue3怎么實(shí)現(xiàn)印章徽章組件”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
需要實(shí)現(xiàn)的組件效果:
該組件有設(shè)置顏色、大小、旋轉(zhuǎn)度數(shù)和文本內(nèi)容功能。
組件代碼文件結(jié)構(gòu)
src/components/StampBadge/src/StampBadge.vue 文件代碼
<template> <div class="first-ring" v-bind="getBindValue" :class="getStampBadgeClass" : > <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; };
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();
<div > <StampBadge size="middle" color="success" content="已建檔" :rotate="45" /> </div>
讀到這里,這篇“基于Vue3怎么實(shí)現(xiàn)印章徽章組件”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。