Vue3+ts+element-plus

Question

大家好，想问下这个报错是怎么回事，使用button组件ts提示报错，该怎么解决呢

Answer 1

• 这篇文章讲的很详细，请看：vue+element-ui中button点击后不恢复原样
• 除此之外, 这篇博客: 结合Vue3.0学习elementUi 源码中的 （一）、button组件的简单解析 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• button部分是由 button组件和button-group组件共同组成，
  该部分的文件结构如下：
  
  index文件是用于注册各组件的，方式和上面了解的一样，内容文件是.vue文件，通过名称可以知道对应的组件内容，直接看内容

  1. button组件

  <template>
    <button
      class="el-button"
      @click="handleClick"
      :disabled="buttonDisabled || loading"
      :autofocus="autofocus"
      :type="nativeType"
      :class="[
        type ? 'el-button--' + type : '',
        buttonSize ? 'el-button--' + buttonSize : '',
        {
          'is-disabled': buttonDisabled,
          'is-loading': loading,
          'is-plain': plain,
          'is-round': round,
          'is-circle': circle
        }
      ]"
    >
      <i class="el-icon-loading" v-if="loading"></i>
      <i :class="icon" v-if="icon && !loading"></i>
      <span v-if="$slots.default"><slot></slot></span>
    </button>
  </template>
  <script>
    export default {
      name: 'ElButton',
  
      inject: { // 注入对象，表单对象时要用到
        elForm: {
          default: ''
        },
        elFormItem: {
          default: ''
        }
      },
  
      props: {
        type: { // 按钮类型
          type: String,
          default: 'default'
        },
        size: String, //按钮尺寸
        icon: { // 图标类名 
          type: String,
          default: ''
        },
        nativeType: { // 原生 type 属性
          type: String,
          default: 'button'
        },
        loading: Boolean, // 是否加载状态
        disabled: Boolean, //是否禁用状态
        plain: Boolean, // 是否朴素按钮
        autofocus: Boolean, // 是否聚焦
        round: Boolean, //是否圆角
        circle: Boolean // 是否圆形
      },
  
      computed: {
        _elFormItemSize() { // 获取form表单对象的属性
          return (this.elFormItem || {}).elFormItemSize;
        },
        buttonSize() { // 按钮的大小
          return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
        },
        buttonDisabled() { // 按钮是否禁用
          return this.disabled || (this.elForm || {}).disabled;
        }
      },
  
      methods: {
        handleClick(evt) { // 向父级传值，方法名称click
          this.$emit('click', evt);
        }
      }
    };
  </script>
  
  

  首先是template部分，这里面是一个button标签，button标签包裹两个i标签和一个span标签，第一i标签是指定loading图标，第二个是自定义图标，span标签是用于存放插槽内容的，也就是button的文字描述，提交或重置之类的。
  其次是button中用到的属性，都在上面代码有注释

  1. button-group组件

  <template>
    <div class="el-button-group">
      <slot></slot>
    </div>
  </template>
  <script>
    export default {
      name: 'ElButtonGroup'
    };
  </script>
  

  这个组件没有什么内容就是向该组件内部插入内容，可以有多个按钮