仿element源码-button组件

button组件流程

1. 写好组件
2. 子组件添加install方法
3. 在main.js中引用
4. 使用Vue.use方法
5. 在页面上使用

button.vue

srccomponentsVButtonindex.js

import VButton from './src/button'

VButton.install = function (Vue) {
  Vue.component(VButton.name, VButton)
}

export default VButton

src/ components/ VButton/ src/ button.vue

<template>
  <button
    class="v-button"
    @click="handleClick"
    :type="type"
    :disabled="disabled"
    :class="[
      type ? 'v-button-' + type : '',
      {
        'is-diaabled': disabled
      }
    ]"
  >
    <span v-if="$slots.default">
      <slot></slot>
    </span>
  </button>
</template>
<script>
export default {
  name: 'VButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    disabled: Boolean
  },
  methods: {
    handleClick (evt) {
      this.$emit('click', evt)
    }
  }
}
</script>

<style>
.v-button-primary {
  color: blue;
}
.v-button-dialog {
  color: red;
}
</style>

main.js

import VButton from'@/components/VButton/index.js'

Vue.use(VButton)

使用

    <VButton type="primary" disabled>我是全局按钮</VButton>
    <v-button type="dialog">我是全局按钮</v-button>
    <v-button type="dialog"></v-button>