This is the 6th day of my participation in the August More Text Challenge

0 x00 profile

Component Badge is generally used in conjunction with other components to enter a number or status Badge reminder effect.

This article will be an in-depth analysis of component Badge source code, analysis of its implementation principle, patience to read, I believe will help you. Component Document Badge

Packages/badge/SRC/main. Vue file is component source code to achieve. Making the source code. The main vue

0 x01 template template

As you can see from the template content, the component wraps a

1. providesslot, no backup content is set (default);
2. Using the built-in transition animation<sup>Element that defines superscript text.

<template>
  <div class="el-badge">
    <slot></slot>
    <transition name="el-zoom-in-center">
      <sup
        v-show=! "" hidden && (content || content === 0 || isDot)"
        v-text="content"
        class="el-badge__content"
        :class="[ 'el-badge__content--' + type, { 'is-fixed': $slots.default, 'is-dot': isDot } ]">
      </sup>
    </transition>
  </div>
</template> 
Copy the code

The component renders a

Visibility of ^{is controlled by the component Prop Hidden, isDot, and the calculated property Content. The text content is the content property value. Add classes dynamically according to the slots.default, type, isDot and other attributes to display different scenarios.}

0 x02 attributes attribute

The component provides five prop.

<script>
export default {
  name: 'ElBadge'.props: {
    value: [String.Number]./ / display values
    max: Number.// The maximum value, beyond which '{Max}+' is displayed
    isDot: Boolean.// Whether to display small dots
    hidden: Boolean.// Whether to hide the badge
    / / type
    type: {
      type: String.validator(val) {
        return ['primary'.'success'.'warning'.'info'.'danger'].indexOf(val) > -1; }}},computed: {
    // Calculate the content displayed on the superscript of attributes according to isDot, value and Max.
    content() {
      // ...}}}; </script>Copy the code

Property description

The function description of each attribute is as follows:

Type provides the primary/SUCCESS/warning/danger/info optional values and provides custom validation functions.

// Customize the validation function
type: { 
  validator(val) {
    This value must match one of the following strings
    return ['primary'.'success'.'warning'.'info'.'danger'].indexOf(val) > -1; }}Copy the code

Vue will generate a console warning when prop validation fails. In this case, type is undefined.

Calculate attribute

The value of the calculated property content is superscript the display content. Judge and calculate according to isDot, Value, Max and other prop.

  computed: {
    content() {
      // Red dot form
      if (this.isDot) return;

      const value = this.value;
      const max = this.max;
      
      // The value exceeds the maximum value
      if (typeof value === 'number' && typeof max === 'number') {
        return max < value ? `${max}+ ` : value;
      }

      returnvalue; }}Copy the code

If (this.isdot) return; if (this.isdot) return; , the value of content is undefined.

If the value is of the Number type and Max is set, check whether the value exceeds the maximum value. If the value exceeds the maximum value, {Max}+ is displayed. In other cases, content is equal to value.

<sup>Show hidden logic

V-show command condition! Hidden && (content | | the content = = = 0 | | isDot) expression of short circuits is known, if the hidden value is true to hide does not display, does not perform follow-up conditions.

If hidden is false, continue to judge according to whether content is displayed. Content === 0 logic is to prevent the expression (content) from returning false when value is 0. When the dot form is used, the value of content is undefined and isDot is true. In this case, the expression returns true.

The dynamic of the class

According to the type dynamic Settings el – badge__content – [type], display colors for different types of superscript el – badge__content – [primary/success/warning/danger/info]. When type is not set or not specified, the class value is el-badge__content–undefined.

When a component is used in conjunction with another component, the content is supplied to the slot value $slot. default is [Vnode] and is set to IS-fixed to fix the superscript position – upper right corner.

If a dot is used, set the style of the IS-dot control superscript to a red dot.

0x03 Component Style

src/badge.scss

SCSS generates component styles using SCSS’s mixed instructions B, E, M, when.

/ / generated el - badge
@include b(badge) {
  // ...
  
  / / generated el - badge__content
  @include e(content) {
    // ...
    
    / / generated el - badge__content is fixed
    @include when(fixed) {
      // ...
      
      / / generated el - badge__content is - fixed. Is the dot
      @include when(dot) {
        // ...}}/ / generated el - badge__content is - fixed. Is the dot
    @include when(dot) {
      // ...
    }

    @each $type in (primary, success, warning, info, danger) {
      / / generated. El - badge__content -- [primary/success/warning/info/danger]
      @include m($type) {
        // ...}}}}Copy the code

lib/badge.scss

Gulpfile. js is used to compile SCSS files and convert them to CSS. After browser compatibility and format compression, packages\theme-chalk\lib\badge. SCSS is generated.

.el-badge {
  //...
}
.el-badge__content {
  //...
}
.el-badge__content.is-fixed{/ /... }.el-badge__content.is-fixed.is-dot{/ /... }.el-badge__content.is-dot{/ /... }.el-badge__content--primary {
  background-color: #409eff;
}
.el-badge__content--success {
  background-color: #67c23a;
}
.el-badge__content--warning {
  background-color: #e6a23c;
}
.el-badge__content--info {
  background-color: # 909399;
}
.el-badge__content--danger {
  background-color: #f56c6c;
}

Copy the code

0 x04 📚 reference

“Sass Online Editor “, Sassmeister

0x05 Attention column

This article has been included in the column 👇, you can directly follow.