封装 Element UI 按钮组件，鼠标悬停显示提示信息

<template>
  <el-tooltip :content='tooltipContent' effect='dark' placement='top'>
    <el-button @mouseenter='showTooltip' @mouseleave='hideTooltip' :type='type' :disabled='disabled'>
      <slot></slot>
    </el-button>
  </el-tooltip>
</template>
<script>
export default {
  name: 'CustomButton',
  props: {
    type: {
      type: String,
      default: 'primary',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    tooltip: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      tooltipContent: '',
    };
  },
  methods: {
    showTooltip() {
      this.tooltipContent = this.tooltip;
    },
    hideTooltip() {
      this.tooltipContent = '';
    },
  },
};
</script>
<p>使用时只需要引入组件并传入相应的 props 即可：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;custom-button type='success' :disabled='false' tooltip='点击我可以出现奇迹'&gt;点我试试&lt;/custom-button&gt;
&lt;/template&gt;

&lt;script&gt;
import CustomButton from '@/components/CustomButton.vue';

export default {
  components: {
    CustomButton,
  },
};
&lt;/script&gt;
</code></pre>