| 提交 | 用户 | age | ||
| ebf7c8 | 1 | <template> |
| V | 2 | <BasicTitle v-if="!isDetail" :class="prefixCls"> |
| 9edc28 | 3 | <slot name="title"></slot> |
| ebf7c8 | 4 | {{ !$slots.title ? title : '' }} |
| V | 5 | </BasicTitle> |
| 6 | ||
| 7 | <div :class="[prefixCls, `${prefixCls}--detail`]" v-else> | |
| 8 | <span :class="`${prefixCls}__twrap`"> | |
| 9 | <span @click="handleClose" v-if="showDetailBack"> | |
| 10 | <ArrowLeftOutlined :class="`${prefixCls}__back`" /> | |
| 11 | </span> | |
| 12 | <span v-if="title">{{ title }}</span> | |
| 13 | </span> | |
| 14 | ||
| 15 | <span :class="`${prefixCls}__toolbar`"> | |
| 9edc28 | 16 | <slot name="titleToolbar"></slot> |
| ebf7c8 | 17 | </span> |
| V | 18 | </div> |
| 19 | </template> | |
| 20 | <script lang="ts"> | |
| 21 | import { defineComponent } from 'vue'; | |
| 22 | import { BasicTitle } from '/@/components/Basic'; | |
| 23 | import { ArrowLeftOutlined } from '@ant-design/icons-vue'; | |
| 24 | ||
| 25 | import { useDesign } from '/@/hooks/web/useDesign'; | |
| 26 | ||
| 27 | import { propTypes } from '/@/utils/propTypes'; | |
| 28 | export default defineComponent({ | |
| 29 | name: 'BasicDrawerHeader', | |
| 30 | components: { BasicTitle, ArrowLeftOutlined }, | |
| 31 | props: { | |
| 32 | isDetail: propTypes.bool, | |
| 33 | showDetailBack: propTypes.bool, | |
| 34 | title: propTypes.string, | |
| 35 | }, | |
| 9edc28 | 36 | emits: ['close'], |
| ebf7c8 | 37 | setup(_, { emit }) { |
| V | 38 | const { prefixCls } = useDesign('basic-drawer-header'); |
| 39 | ||
| 40 | function handleClose() { | |
| 41 | emit('close'); | |
| 42 | } | |
| c7c95d | 43 | |
| ebf7c8 | 44 | return { prefixCls, handleClose }; |
| V | 45 | }, |
| 46 | }); | |
| 47 | </script> | |
| 48 | ||
| 49 | <style lang="less"> | |
| 50 | @prefix-cls: ~'@{namespace}-basic-drawer-header'; | |
| 51 | @footer-height: 60px; | |
| 52 | .@{prefix-cls} { | |
| 53 | display: flex; | |
| 54 | height: 100%; | |
| 55 | align-items: center; | |
| 56 | ||
| 57 | &__back { | |
| 58 | padding: 0 12px; | |
| 59 | cursor: pointer; | |
| 60 | ||
| 61 | &:hover { | |
| 62 | color: @primary-color; | |
| 63 | } | |
| 64 | } | |
| 65 | ||
| 66 | &__twrap { | |
| 67 | flex: 1; | |
| 68 | } | |
| 69 | ||
| 70 | &__toolbar { | |
| 71 | padding-right: 50px; | |
| 72 | } | |
| 73 | } | |
| 74 | </style> | |
