基于Vue3實現(xiàn)印章徽章組件的示例代碼
需要實現(xiàn)的組件效果:
該組件有設(shè)置顏色、大小、旋轉(zhuǎn)度數(shù)和文本內(nèi)容功能。
一、組件實現(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; };
二、組件全局注冊代碼
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)用實例 const app = createApp(App); // 注冊全局組件 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實現(xiàn)印章徽章組件的示例代碼的文章就介紹到這了,更多相關(guān)Vue3印章徽章組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12Vue中使用vue2-perfect-scrollbar制作滾動條
這篇文章主要介紹了Vue中使用vue2-perfect-scrollbar滾動條,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中el-tree動態(tài)初始默認選中和全選實現(xiàn)的相關(guān)資料,eltree默認選中eltree是一種常用的樹形控件,通常用于在網(wǎng)頁上呈現(xiàn)樹形結(jié)構(gòu)的數(shù)據(jù),例如文件夾、目錄、組織結(jié)構(gòu)等,需要的朋友可以參考下2023-09-09