This is the third day of my participation in the August Text Challenge.More challenges in August

Button component implementation

  • Simple component library is under development ~~~
  • Button as the basic component of the component library, the logic is relatively simple, mainly the writing of the style.

Simple Button function points

  • Theme color button
  • The text button
  • Disabled state
  • Button size
  • Block-level button
  • Custom colors
  • circular
  • loading

Theme color button

  • Results the preview

  • Create a new button.vue file and import it in app.vue

  • Write a Button label in the Button component and give it an initial class with a slot in the middle for the content

      <button class="simple-button"><span><slot></slot></span></button>
Copy the code
    . Simple -button {/* width: auto; height: 35px; /* Padding: 0 10px; /* center */ text-align: center; justify-content: center; align-items: center; /* Border: none; /* border-radius: 3px; /* Box shadow */ box-shadow: 0px 0px 3px gray; font-family: inherit; /* Cursor: pointer; font-size: 14px; }Copy the code

  • App.vue invokes components

    <template> < simplesButton > Default button </simplesbutton> <template> <script setup> // Use the setup syntax sugar without returning import simplesButton from "./components/Button.vue"; </script>Copy the code

  • Initialization effect

  • Add styles

    • Override the initial style by adding a class based on the type value passed in by the parent component

      • type: primary || info || success || warning || danger

        < simplesButton type="primary"> Main button </ simplesButton > < simplesButton type="info"> Information button </ simplesButton > < simplesButton Type ="success"> SimplesButton </simplesbutton> <simplesbutton type=" Warning "> Warning button </ SimplesButton > < simplesButton Type ="danger"> </simplesbutton>Copy the code

    • Button. The vue logic

      • The setup syntax sugar for receiving props must introduce defineProps

      • The received type is String

        • Insert new classes directly using the ES6 interpolation syntax, if any, using the type ternary operation
        • Since you want to change the color: # FFF property, write a separate text-color class
        <button class="simple-button"  
          :class="[
          type ? `simple-button--${type} text-color` : ''
                  ]"><span><slot></slot></span></button>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  type: String,
});
</script>
Copy the code
      .simple-button--primary {
  background-color: rgb(74, 130, 212);
}
.simple-button--info {
  background-color: rgb(163, 191, 233);
}
.simple-button--success {
  background-color: rgb(92, 218, 180);
}
.simple-button--warning {
  background-color: rgb(221, 219, 77);
}
.simple-button--danger {
  background-color: rgb(233, 56, 56);
}
.text-color {
  color: #fff;
}
Copy the code

    • Theme color effect preview

      • Theme color color can be changed according to their preferences

The text button

  • The outer border button receives two properties, Text Outline

  • The text-only button accepts a property text

    • Results the preview

  • App.vue

    < simplesButton text outline type="primary"> </ simplesButton > <simplesbutton text Type ="primary"> </simplesbutton>Copy the code

  • Button.vue

    • The one thing that plain text and the outer border have in common is that the background color is pure white, so if either of the two attributes meet, add the simple-button-outline class
    • Type && Outline && text all three types of attributes are the outer border button
    • type && text && ! Outline only passes two types of attributes as plain text buttons
    • Plain text button style: Cancel border cancel shadow simple-button–color
    • Outer border Style: Adds borders
      <button class="simple-button"  
          :class="[
          type ? `simple-button--${type} text-color` : '',
          outline || text ? 'simple-button--outline' : '',
      type && outline && text ? `simple-button--${type}--color` : '',
      type && text && !outline
        ? `simple-button--${type}--color simple-button--color`
        : '',
                  ]"><span><slot></slot></span></button>
<script setup>
import { defineProps } from "vue";
const props = defineProps({
  type: String,
  text: Boolean,
  outline:Boolean,
});
</script>
Copy the code
    .simple-button--primary--color {
  color: rgb(74, 130, 212);
  border: 1px solid rgb(74, 130, 212);
}
.simple-button--info--color {
  color: rgb(163, 191, 233);
  border: 1px solid rgb(163, 191, 233);
}
.simple-button--success--color {
  color: rgb(92, 218, 180);
  border: 1px solid rgb(92, 218, 180);
}
.simple-button--warning--color {
  color: rgb(221, 219, 77);
  border: 1px solid rgb(221, 219, 77);
}
.simple-button--danger--color {
  color: rgb(233, 56, 56);
  border: 1px solid rgb(233, 56, 56);
}
.simple-button--color {
  border: none;
  box-shadow: none;
}
.simple-button--outline {
  background-color: #fff;
}
Copy the code

  • Results the preview

  • Disable the button

    • Effect in

- app. vue - Disable button has three statuses: Normal Disable Border disable Plain text Disable - Disabled Disabled text Outline Disable border - disabled Text Disable plain text < simplesButton disabled> Disable button </ simplesButton > < simplesButton disabled text Outline > Disable button </ SimplesButton > < simplesButton Vue - Determines the current state by attribute - disabled && outline && text Disables the outer border - disabled && text && ! The outline state disables plain text - disabled &&! text && ! <button class="simple-button" :class="[type? 'simple-button--${type} text-color' : '', outline || text ? 'simple-button--outline' : '', type && outline && text ? `simple-button--${type}--color` : '', type && text && !outline? `simple-button--${type}--color simple-button--color`: '', disabled && outline && text ? 'simple-button--disabled--outline' : '', disabled && text && !outline ? 'simple-button--disabled--text' : '', disabled && !text && !outline ? 'simple-button--gray simple-button--disabled' : '', ]"><span><slot></slot></span></button> <script setup> import { defineProps } from "vue"; const props = defineProps({ type: String, text: Boolean, outline:Boolean, disabled: Boolean, }); </script> ``` ``` .simple-button--disabled { color: gray; /* Cursor becomes disabled */ cursor: no-drop; } .simple-button--disabled--outline { color: gray; cursor: no-drop; border: 1px solid gray; } .simple-button--disabled--text { color: gray; cursor: no-drop; border: none; box-shadow: none; } ' '- Preview effectCopy the code

Button size

  • Results the preview

  • Button sizes use size for different classes, ditto

  • The implementation is relatively simple.

Block-level button

  • Results the preview

  • Block level is achieved by adding a display:block to the button property block

Custom colors

  • Results the preview

  • Receive two attributes color(background color) textcolor(textcolor) directly to the style property value

circular

  • Results the preview

  • Receive the round attribute and set the value of the border-radius attribute to 50% to create a circle
  • The icon component in the middle will be explained in the next chapter

loading

  • Results the preview

  • Loading and loading-type properties are received. Each loading-type has a different style. SVG is used to implement this

  • Note:

    • As SVG is displayed in loading, v-if is used to check whether loading is involved. If so, text cannot be displayed

conclusion

  • A complete button component is almost complete
  • Loading dynamic effects can be found to write some, directly into