Element UI Secondary Packaging Series – Button (3)

Before the two pairsel-buttonTwo expanded functions, oneAutomatic loading, aAutomatically confirm, this article continues toel-buttonA lot of times when we’re doing extensions, we want buttons to have onetooltipMouse over the button to display some explanatory text,el-tooltipComponent implements this functionality, but directlyel-tooltipThere is a lot of component code that needs to be addedel-buttonAs aslotInsert content, if you can directly givebuttonTo addcontentAutomatic display that’s pretty neat.Here we are in frontpl-buttonBase again on a package packagepl-tip-buttonComponents,

<template>
  <el-tooltip :content="content" v-bind="attrs">
    <pl-button v-bind="$attrs" v-on="$listeners">
      <slot />
    </pl-button>
  </el-tooltip>
</template>

<script>
export default {
  name: 'PlTipButton'.props: {
    content: {
      type: String.required: true
    },
    tipConfig: {
      type: Object.default: null}},computed: {
    attrs() {
      return {
        effect: 'dark'.placement: 'top'. this.tipConfig } } } }</script>

Copy the code

In a few simple lines of code, we have combined el-tooltip and el-button, using v-bind=$attrs to inherit events and attributes. Note that the attrs is not marked with $. This is an object synthesized using calculated properties to combine the attributes of the el-Tooltip. Let’s see how it works

  <pl-tip-button content="Settings" icon="el-icon-s-tools" circle>
  </pl-tip-button>
   <pl-tip-button
      content="Delete"
      type="primary"
      auto-confirm
      @confirm="confirm"
      :tip-config={effect:"light",placement:"bottom"}
    >delete</pl-tip-button>
     <pl-tip-button
      content="Delete"
      type="primary"
      auto-loading
     @click="handleClick"
    >delete</pl-tip-button>
Copy the code

Here we can merge the extensions from the previous two articles In addition, if we want to set some properties of el-Tooltip, we can pass in tipConfig props, which can be used in this section Is the object of the props property of all el-Tooltop.

Limited to nuggets can not be easily displayed, you can view this document to see the effect www.noob6.com/pl-element/…

The source address

Article series address:

Element UI Secondary Packaging Series – Button (1)

Element UI Secondary Packaging Series – Button (2)

Element UI Secondary Packaging Series – Button (3)

Element – UI Secondary Package Series – Button (4)(VUE3 version)