kingecg
/
gohttpdUi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构描述组件样式

This commit is contained in:
kailong321200875 2023-12-17 11:23:36 +08:00
parent 2009594f08
commit c7658d8c70
2 changed files with 51 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/Descriptions/src/Descriptions.vue
View File

@ -1,5 +1,5 @@
<script lang="tsx"> <script lang="tsx">
import { ElCollapseTransition, ElDescriptions, ElDescriptionsItem, ElTooltip } from 'element-plus' import { ElCollapseTransition, ElTooltip, ElRow, ElCol } from 'element-plus'
import { useDesign } from '@/hooks/web/useDesign' import { useDesign } from '@/hooks/web/useDesign'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { ref, unref, PropType, computed, defineComponent } from 'vue' import { ref, unref, PropType, computed, defineComponent } from 'vue'
@ -38,7 +38,7 @@ export default defineComponent({
default: () => ({}) default: () => ({})
} }
}, },
setup(props, { slots, attrs }) { setup(props, { attrs }) {
const getBindValue = computed((): any => { const getBindValue = computed((): any => {
const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class'] const delArr: string[] = ['title', 'message', 'collapse', 'schema', 'data', 'class']
const obj = { ...attrs, ...props } const obj = { ...attrs, ...props }
@ -108,26 +108,51 @@ export default defineComponent({
<ElCollapseTransition> <ElCollapseTransition>
<div v-show={unref(show)} class={[`${prefixCls}-content`, 'p-20px']}> <div v-show={unref(show)} class={[`${prefixCls}-content`, 'p-20px']}>
<ElDescriptions {...unref(getBindValue)}> <ElRow
{{ gutter={0}
extra: () => (slots['extra'] ? slots['extra']() : props.extra), {...unref(getBindValue)}
default: () => { class="outline-1px outline-[var(--el-border-color-lighter)] outline-solid"
return props.schema.map((item) => { >
{props.schema.map((item) => {
return ( return (
<ElDescriptionsItem key={item.field} {...getBindItemValue(item)}> <ElCol
{{ key={item.field}
label: () => (item.slots?.label ? item.slots?.label(item) : item.label), span={item.span || 24 / props.column}
default: () => class="flex items-stretch"
item.slots?.default >
{props.direction === 'horizontal' ? (
<div class="flex items-stretch bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
<div
{...getBindItemValue(item)}
class="w-120px text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-r-1px border-r-[var(--el-border-color-lighter)] border-r-solid "
>
{item.label}
</div>
<div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
{item.slots?.default
? item.slots?.default(props.data) ? item.slots?.default(props.data)
: get(props.data, item.field) ?? defaultData : get(props.data, item.field) ?? defaultData}
}} </div>
</ElDescriptionsItem> </div>
) : (
<div class="bg-[var(--el-fill-color-light)] outline-1px outline-[var(--el-border-color-lighter)] outline-solid flex-1">
<div
{...getBindItemValue(item)}
class="text-left px-8px py-11px font-700 color-[var(--el-text-color-regular)] border-b-1px border-b-[var(--el-border-color-lighter)] border-b-solid"
>
{item.label}
</div>
<div class="flex-1 px-8px py-11px bg-[var(--el-bg-color)] color-[var(--el-text-color-primary)] text-size-14px">
{item.slots?.default
? item.slots?.default(props.data)
: get(props.data, item.field) ?? defaultData}
</div>
</div>
)}
</ElCol>
) )
}) })}
} </ElRow>
}}
</ElDescriptions>
</div> </div>
</ElCollapseTransition> </ElCollapseTransition>
</div> </div>

6
src/views/Components/Descriptions.vue
View File

@ -42,7 +42,8 @@ const schema = reactive<DescriptionsSchema[]>([
}, },
{ {
field: 'addr', field: 'addr',
label: t('descriptionsDemo.addr') label: t('descriptionsDemo.addr'),
span: 24
} }
]) ])
@ -125,7 +126,8 @@ const schema2 = reactive<DescriptionsSchema[]>([
</ElFormItem> </ElFormItem>
) )
} }
} },
span: 24
} }
]) ])