mirror of
https://github.com/lingble/chatwoot.git
synced 2025-10-31 19:17:48 +00:00
54
app/javascript/shared/components/Button.vue
Normal file
54
app/javascript/shared/components/Button.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<button :class="buttonClassName" :style="buttonStyles" @click="onClick">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
block: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'blue',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
buttonClassName() {
|
||||
let className = 'text-white py-3 px-4 rounded shadow-sm';
|
||||
if (this.type === 'blue' && !Object.keys(this.buttonStyles).length) {
|
||||
className = `${className} bg-woot-500 hover:bg-woot-700`;
|
||||
}
|
||||
if (this.block) {
|
||||
className = `${className} w-full`;
|
||||
}
|
||||
return className;
|
||||
},
|
||||
buttonStyles() {
|
||||
const styles = {};
|
||||
if (this.bgColor) {
|
||||
styles.backgroundColor = this.bgColor;
|
||||
}
|
||||
if (this.textColor) {
|
||||
styles.color = this.textColor;
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onClick(e) {
|
||||
this.$emit('click', e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user