element-ui 二次封装系列- button(三)

编程小号 • 2023-11-30 19:06 • 未分类

前两篇对el-button分别扩充了两个功能,一个自动loading,一个自动confirm,本文继续对el-button进行扩充功能很多时候 ,我们希望按钮能有一个 tooltip的功能,鼠标放在按钮上能够展示一些解释性的文字,el-tooltip组件正是实现这个功能的,但是直接用el-tooltip组件代码非常多,需要将el-button作为slot插入内容,如果能直接给button上添加content自动展示那就非常简洁了. 这里我们在前面的pl-button基础上再次包裹封装一个pl-tip-button组件,

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

以上简单的几句代码,我们将el-tooltip和el-button结合起来了,这里为了继承事件和属性,采用了 v-bind=$attrs, v-on=$listeners,同时,对于一次绑定多个属性,我们采用v-bind=attrs这样绑定对象的方式,注意,这里的attrs没有加$,这是我们采用计算属性合成的一个对象,用来合并el-tooltip的属性. 来看看怎么使用吧

  <pl-tip-button content="设置" icon="el-icon-s-tools" circle>
  </pl-tip-button>
   <pl-tip-button content="删除" type="primary" auto-confirm @confirm="confirm" :tip-config={effect:"light",placement:"bottom"} >删除
    </pl-tip-button>
     <pl-tip-button content="删除" type="primary" auto-loading @click="handleClick" >删除
    </pl-tip-button>

这里我们可以合并前面两篇文章中扩展的 自动loading和自动confirm功能,还能使用el-button的原有功能如示例代码中的type和icon,circle等属性,同时,如果我们想设置el-tooltip的一些属性,我们可以传入tipConfig的props,这里面可以是所有的el-tooltop的props属性的对象.