跟着element-ui写的
效果：
image.png
<!--
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>
网友评论