Commit 36217943 by licheng

feat: 新增按钮组件,更新甘特图组件结构

parent 71ec8123
<template>
<el-button
:type="props.type"
:class="[props.type, { disabled: props.disabled }]"
:disabled="props.disabled"
>
<slot></slot>
</el-button>
</template>
<script setup lang="ts">
type ButtonType = 'primary' | 'warning' | 'info' | 'danger' | 'success'
interface ButtonProps {
type?: ButtonType
disabled?: boolean
}
const props = withDefaults(defineProps<ButtonProps>(), {
type: 'primary',
disabled: false
})
</script>
<style lang="scss" scoped>
.el-button {
height: 36px;
min-width: 104px;
border: none;
background-color: transparent;
background-size: 100% 100%;
transition: filter 0.2s;
/* hover 变亮 */
&:hover {
filter: brightness(1.15);
background-color: transparent;
}
/* 按下变暗 */
&:active:not(.disabled) {
filter: brightness(0.95);
background-color: transparent;
}
/* 禁用状态 */
&.disabled {
filter: brightness(0.9);
cursor: not-allowed;
}
&.primary {
background-image: url('@/assets/imgs/button/primary_btn.png');
}
&.warning {
background-image: url('@/assets/imgs/button/warning_btn.png');
}
&.info {
background-image: url('@/assets/imgs/button/info_btn.png');
}
&.danger {
background-image: url('@/assets/imgs/button/danger_btn.png');
}
&.success {
background-image: url('@/assets/imgs/button/success_btn.png');
}
}
</style>
import Gantt from './src/Gantt.vue'
export { Gantt }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment