element 源码学习一 Button 组件

父组件 test.vue

<template>
  <div class="war">
   <el-button type="primary" round loading>学习element 组件</el-button>

   
   <com-button size="size40" round loading>组件1</com-button>
   <!-- <com-button></com-button> -->
  </div>
</template>

<script>
import comButton from './comButton.vue'
  export default {
  components: { comButton },
    data() {
      return {
        test: 'hello',
        name: 'cookie'
      }
    },
    provide() {
      return {
        name: this.name,
        test1: this.test1
      }
    },
    methods: {
      test1() {
        console.log(11);
        alert(11)
      } 
    }
  }
</script>

<style scoped>
.war {
  width: 100%;
  height: 600px;
  background: pink;
}
</style>

子组件comButton.vue

<template>
  <div>
    <button class="button_box" :type="nativeType" :class="[
    type ? 'el-button--' + type : '',
    buttonSize ? 'el-button--' + buttonSize : '',
    {
      'is-round1': round
    }
    ]"
    :disabled = "disabled"
    :loading = "loading" 
    >
    <i :class="icon" v-if="icon && !loading"></i>
    <i class="el-icon-loading1" v-if="loading">加载中</i>
    <span v-if="$slots.default"><slot></slot></span>
    </button>
    <span>'disabled'{{disabled}}</span>
    <span>'loading'{{loading}}</span>
    <span style="color:red"> {{name}}</span>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
    
  }, 
  inject: ['name','test1'],

  created () {
    // 内容分发
    console.log(this.$slots,this.$slots.default);;
    this.test1();
  },
  methods: {
    open() {
       
    }
  },
  props: {
    type: {
      type: String,
      default: "default"
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    icon: {
      type: String,
      default: ''
    },
    size: String, 
    disabled: Boolean,
    loading: Boolean,
    round: Boolean,
    
  },
  computed: {
    buttonSize() {
      return this.size
    }
  },
};
</script>

<style>
.button_box {
  position: relative;
}
.el-button--primary1 {
  background-color: red;
}
.el-button--success1 {
  background-color: yellow;
}
.el-button--size20 {
  font-size: 20px;
}
.el-button--size40 {
 font-size: 40px;
}
.el-icon-loading1 {
  position: absolute;
  top: 0;
  left: 0;
  color: red;
  line-height: 80px;
  font-size: 10px;
}
.is-round1 {
  border-radius: 20px;
  padding: 12px 23px;
}
.isicon::after {
  content: 'icon';
  color: red;
}

</style>