|
- <template>
- <button
- @click="click"
- :disabled="disabled ? 'disabled' : null"
- :type="disabled && line ? 'default' : null"
- :class="[size, round ? 'round' : '', shadow ? 'shadow' : '', buttonColor, buttonBorder, block ? 'block' : '']"
- hover-class="button-hover"
- class="cu-btn"
- >
- <slot></slot>
- </button>
- </template>
-
- <script>
- export default {
- name: 'l-button',
-
- props: {
- size: { default: 'df' },
- color: {},
- round: {},
- shadow: {},
- line: {},
- blod: {},
- icon: {},
- disabled: {},
- block: {}
- },
-
- computed: {
- buttonBorder() {
- return this.line ? `line${this.blod ? 's' : ''}-${this.line || 'gray'}` : ''
- },
-
- buttonColor() {
- if (this.color) {
- return `bg-${this.color}`
- } else if (!this.line) {
- return `bg-gray`
- }
-
- return ''
- }
- },
-
- methods: {
- click(e) {
- this.$emit('click', e)
- }
- }
- }
- </script>
|