moto/web/src/components/fragment/parts/Action.vue

46 lines
1.2 KiB
Vue

<template>
<template v-if="action.icon">
<template v-if="action.label">
<el-tooltip effect="dark" :content="action.label" placement="top-start">
<icon @click="handleSubmit" :name="action.icon" class="segment-action cursor-pointer"
:class="`text-color-${action.type || 'default'}`">
</icon>
</el-tooltip>
</template>
<template v-else>
<icon @click="handleSubmit" :name="action.icon" class="segment-action cursor-pointer"
:class="`text-color-${action.type || 'default'}`"></icon>
</template>
</template>
<template v-else>
<el-button :type="action.type || 'default'" :round="action.round || false" :size="action.size" class="segment-action" @click="handleSubmit">
{{ action.label }}
</el-button>
</template>
</template>
<style lang="scss">
.segment-action {
margin-right: .5rem;
&:last-child{
margin-right: 0;
}
}
</style>
<script setup>
import Icon from '@/components/widgets/Icon.vue';
const props = defineProps({
action: {
type: Object
}
})
const emit = defineEmits(['click'])
const handleSubmit = () => {
emit('click', props.action)
}
</script>