Maison  >  Article  >  interface Web  >  Comment implémenter le composant de badge de sceau basé sur Vue3

Comment implémenter le composant de badge de sceau basé sur Vue3

王林
王林avant
2023-05-27 12:52:221192parcourir

Effets de composants à obtenir :

Comment implémenter le composant de badge de sceau basé sur Vue3

Ce composant a pour fonction de définir la couleur, la taille, le degré de rotation et le contenu du texte.

1. Code d'implémentation du composant

Structure du fichier de code du composant

Comment implémenter le composant de badge de sceau basé sur Vue3

src/components/StampBadge/src/StampBadge.vue file code

<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/ accessoires.t s Code de fichier

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 Code de fichier

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 Code de fichier

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;
};

2. Code d'enregistrement global du composant

src/components/register GlobComp Code de fichier .ts

import type { App } from "vue";
import { StampBadge } from "./StampBadge";

export function registerGlobComp(app: App) {
  app.use(StampBadge);
}

code de fichier src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import { registerGlobComp } from "/@/components/registerGlobComp";

async function bootstrap() {
  // 创建应用实例
  const app = createApp(App);
  // 注册全局组件
  registerGlobComp(app);
  // 挂载应用
  app.mount("#app", true);
}

bootstrap();

3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer