vue项目按钮组件

跟着element-ui写的
效果：

<!--
type: 默认：Ghost Button
      primary:主要按钮（蓝色）
      border:次要按钮（边框）
      danger:删除等按钮
      light:次要按钮（浅蓝色背景）
      text:文字按钮
plain:hover时候有背景
size：lager samll mini 默认：Medium
moretxt:文字多
noradius：无边框
round：椭圆按钮
disabled：不可点击
loading：loading
icon:图标名称，font_family里的有效
-->
<template>
  <button
    class="ic-button"
    @click="handleClick"
    :disabled="disabled || loading"
    :type="nativeType"
    :class="[
      type ? 'ic-button--' + type : '',
      buttonSize ? 'ic-button--' + buttonSize : '',
      {
        'is-disabled': disabled || loading,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-more-txt': moretxt,
        'no-radius': noradius
      }
    ]">
    <i class="el-icon-loading" v-if="loading"></i>
    <i class="font_family" :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
  export default {
    name: "IcButton",
    props: {
      type: {
        type: String,
        default: 'default'
      },
      icon: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      size: String,
      plain: Boolean,
      round: Boolean,
      moretxt: Boolean,
      noradius: Boolean,
    },
    computed: {
      buttonSize() {
        return this.size
      }
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt)
      }
    }
  }
</script>

<style lang="less" scoped>
  // 默认按钮
  .ic-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: solid 1px #dcdcdc;
    background-color: #f9f9f9;
    color: #666666;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: .1s;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 4px;

    &:hover {
      background-color: #ffffff;
      color: #409eff;
      border-color: #409eff;
    }
  }

  // 默认不可点击
  .ic-button.is-disabled {
    cursor: not-allowed;
    background-color: #F5F5F5;
    border-color: #d9d9d9;
    color: #BFBFBF;

    &:hover {
      background-color: #f1f1f1 !important;
      background-color: #F5F5F5 !important;
      border-color: #d9d9d9 !important;
      color: #BFBFBF !important;
    }
  }

  // 主要
  .ic-button--primary {
    background-color: #409eff;
    color: #ffffff;
    border-color: #409eff;

    &:hover {
      background-color: #3996f6;
      color: #ffffff;
    }
  }

  .ic-button--primary.is-plain {
    background-color: #f9fcff;
    border-color: #96c8fc;
    color: #409eff;

    &:hover {
      background-color: #409eff;
      border-color: #409eff;
      color: #ffffff;
    }
  }

  // 危险按钮
  .ic-button--danger {
    background-color: #FA5555;
    color: #ffffff;
    border-color: #FA5555;

    &:hover {
      background-color: #FC6B6B;
      border-color: #FC6B6B;
      color: #ffffff;
    }
  }

  .ic-button--danger.is-plain {
    background-color: #ffebeb;
    border-color: #ff9999;
    color: #f65e5e;

    &:hover {
      background-color: #fa5555;
      border-color: #fa5555;
      color: #ffffff;
    }
  }

  // 默认按钮hover为409eff
  .is-plain {
    &:hover {
      background-color: #f9fcff;
      border-color: #96c8fc;
      color: #409eff;
    }
  }

  // 大小
  .ic-button--large {
    padding: 12px 20px;
  }

  .ic-button--small {
    font-size: 12px;
    padding: 9px 16px;
  }

  .ic-button--mini {
    font-size: 12px;
    padding: 7px 8px;
    border-radius: 3px;
  }

  // 圆角
  .is-round {
    border-radius: 18px;
  }

  .is-round.ic-button--large {
    border-radius: 20px;
  }

  .is-round.ic-button--small {
    border-radius: 16px;
  }

  .is-round.ic-button--mini {
    padding: 7px 16px;
    border-radius: 14px;
  }

  // 无背景只有边框
  .ic-button--border {
    background-color: #ffffff;
    color: #409eff;
    border-color: #409eff;

    &:hover {
      background-color: #f9fcff;
    }
  }

  // 浅色按钮
  .ic-button--light {
    color: #3996f6;
    background-color: #e9f8ff;
    border-color: #e9f8ff;

    &:hover {
      color: #3996f6;
      background-color: #e9f8ff;
      border-color: #e9f8ff;
    }
  }

  // 文字按钮
  .ic-button--text {
    border-color: transparent;
    color: #409eff;
    background: transparent;
    padding: 0;

    &:hover {
      border-color: transparent;
      background-color: transparent;
    }
  }

  .ic-button--text.is-disabled {
    color: #BFBFBF !important;
    border: 0 !important;
  }

  // icon
  .ic-button .font_family + span {
    margin-left: 0px;
  }

  .ic-button .font_family {
    font-size: 14px;
  }

  // 字较多
  .is-more-txt {
    padding-left: 10px;
    padding-right: 10px;
  }

  // 没有radius
  .no-radius {
    border-radius: 0;
  }
</style>

使用：

<template>
  <div class="example-wrapper">
    <div class="btn-wrap">
      <h5>ghost</h5>
      <ic-button>ghost</ic-button>
      <ic-button plain>plain</ic-button>
      <ic-button size="small">small</ic-button>
      <ic-button size="mini">mini</ic-button>
      <ic-button size="large">large</ic-button>
      <ic-button plain size="large">plain large</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>主要按钮</h5>
      <ic-button type="primary">primary</ic-button>
      <ic-button type="primary" plain>primary plain</ic-button>
      <ic-button type="primary" plain size="large">primary plain</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>主要危险按钮</h5>
      <ic-button type="danger">按钮</ic-button>
      <ic-button type="danger" plain>danger plain</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>light</h5>
      <ic-button type="light">按钮</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>border</h5>
      <ic-button type="border">按钮</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>text</h5>
      <ic-button type="text">text按钮</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>round</h5>
      <ic-button round>按钮</ic-button>
      <ic-button round size="mini">按钮</ic-button>
      <ic-button round size="large">按钮</ic-button>
    </div>
    <div class="btn-wrap">
      <h5>disabled</h5>
      <ic-button disabled>ghost</ic-button>
      <ic-button disabled type="primary">primary</ic-button>
      <ic-button disabled type="danger">danger</ic-button>
      <ic-button disabled type="text">text</ic-button>
      <ic-button disabled plain>text</ic-button>
    </div>
  </div>
</template>

<script>
import IcButton from '@/components/IcButton'

export default {
  name: "example",
  components: {IcButton},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
  .example-wrapper {
    padding-left: 20px;
  }

  .btn-wrap {
    margin-top: 20px;

    h5 {
      margin-bottom: 10px;
    }
  }
</style>