vant/packages/button/index.vue
neverland 7e233eebfe
[Improvement] update actionsheet close icon style (#340)
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [bugfix] Search box-sizing wrong

* [Doc] update vant-demo respo

* [Doc] translate theme & demo pages

* [Doc] add Internationalization document

* [bugfix] remove unnecessary props

* [fix] optimize clickoutside

* [new feature] optimize find-parent

* [new feature]: change document title accordinng to language

* [new feature] Pagination code review

* [improvement] adjust icon-font unicode

* [improvement] Icon spinner color inherit

* [improvement] icon default width

* [bugfix] DateTimePicker validate date props

* [bugfix] Tab item text ellipsis

* [improvement] optimize single line ellipsis

* [Improvement] optimzie staticClass

* [Improvement] Button: use sfc instread of jsx

* [Improvement] update actionsheet close icon style

* fix: yarn.lock

* fix: icon test cases
2017-11-23 19:45:57 +08:00

71 lines
1.2 KiB
Vue

<template>
<component
:is="tag"
:type="nativeType"
:disabled="disabled"
class="van-button"
:class="[
'van-button--' + type,
'van-button--' + size,
{
'van-button--disabled': disabled,
'van-button--loading': loading,
'van-button--block': block,
'van-button--bottom-action': bottomAction
}
]"
@click="onClick"
>
<van-loading
v-if="loading"
class="van-button__icon-loading"
type="circle"
:color="type === 'default' ? 'black' : 'white'"
/>
<span class="van-button__text">
<slot></slot>
</span>
</component>
</template>
<script>
import Loading from '../loading';
export default {
name: 'van-button',
components: {
[Loading.name]: Loading
},
props: {
block: Boolean,
loading: Boolean,
disabled: Boolean,
nativeType: String,
bottomAction: Boolean,
tag: {
type: String,
default: 'button'
},
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: 'normal'
}
},
methods: {
onClick(event) {
if (!this.loading && !this.disabled) {
this.$emit('click', event);
}
}
}
};
</script>