vue-material/src/components/mdButton/mdButton.vue

41 lines
995 B
Vue
Raw Normal View History

2016-12-12 23:38:05 +00:00
<template>
<button class="md-button" :class="[themeClass]" :type="type" :disabled="disabled" @click="$emit('click', $event)" v-if="!href">
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
<slot></slot>
</button>
<a class="md-button" :class="[themeClass]" :href="href" :disabled="disabled" :target="target" :rel="newRel" @click="$emit('click', $event)" v-else>
<md-ink-ripple :md-disabled="disabled"></md-ink-ripple>
<slot></slot>
</a>
</template>
2016-07-13 05:00:31 +00:00
<style lang="scss" src="./mdButton.scss"></style>
2016-06-21 06:54:17 +00:00
2016-07-15 00:06:29 +00:00
<script>
2016-12-12 23:38:05 +00:00
import theme from '../../core/components/mdTheme/mixin';
2016-07-15 00:06:29 +00:00
export default {
2016-09-08 05:15:03 +00:00
props: {
href: String,
2016-12-12 23:38:05 +00:00
target: String,
rel: String,
type: {
type: String,
default: 'button'
},
2016-09-08 05:15:03 +00:00
disabled: Boolean
},
2016-12-12 23:38:05 +00:00
mixins: [theme],
computed: {
newRel() {
if (this.target === '_blank') {
return this.rel || 'noopener';
}
2016-12-12 23:38:05 +00:00
return this.rel;
}
2016-07-15 00:06:29 +00:00
}
};
</script>