zoukankan      html  css  js  c++  java
  • element-ui button源码

    button/index.js
    import ElButton from './src/button';
    
    /* istanbul ignore next */
    ElButton.install = function(Vue) {
    Vue.component(ElButton.name, ElButton);
    };
    
    export default ElButton;
    

    src/button.vue

    <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: String,
            default: 'button'
          },
          loading: Boolean,
          disabled: Boolean,
          plain: Boolean,
          autofocus: Boolean,
          round: Boolean,
          circle: Boolean
        },
    
        computed: {
          _elFormItemSize() {
            return (this.elFormItem || {}).elFormItemSize;
          },
          buttonSize() {
            return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
          },
          buttonDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
          }
        },
    
        methods: {
          handleClick(evt) {
            this.$emit('click', evt);
          }
        }
      };
    </script>
    

      

  • 相关阅读:
    sql中触发器的使用
    sql中优化查询
    sql中case when语句的使用
    CSRF学习小结
    javascript正则表达式笔记
    elementUI单选框获取值
    elementUI内置过渡(折叠)
    elementUI内置缩放过渡(缩放)
    elementUi内置过渡动画(淡入)
    创建koa2项目
  • 原文地址:https://www.cnblogs.com/wsk1576025821/p/10912807.html
Copyright © 2011-2022 走看看