You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<view :class="['wd-cell-group', border ? 'is-border' : '', customClass]">
|
|
<view v-if="title || value || useSlot" class="wd-cell-group__title">
|
|
<!--左侧标题-->
|
|
<view class="wd-cell-group__left">
|
|
<text v-if="title">{{ title }}</text>
|
|
<slot v-else name="title"></slot>
|
|
</view>
|
|
<!--右侧标题-->
|
|
<view class="wd-cell-group__right">
|
|
<text v-if="value">{{ value }}</text>
|
|
<slot v-else name="value"></slot>
|
|
</view>
|
|
</view>
|
|
<view class="wd-cell-group__body">
|
|
<slot></slot>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
name: 'wd-cell-group',
|
|
options: {
|
|
addGlobalClass: true,
|
|
virtualHost: true,
|
|
styleIsolation: 'shared'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts" setup>
|
|
import { useChildren } from '../composables/useChildren'
|
|
import { CELL_GROUP_KEY } from './types'
|
|
|
|
interface Props {
|
|
customClass?: string
|
|
title?: string
|
|
value?: string
|
|
useSlot?: boolean
|
|
border?: boolean
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
useSlot: false,
|
|
border: false,
|
|
customClass: ''
|
|
})
|
|
|
|
const { linkChildren } = useChildren(CELL_GROUP_KEY)
|
|
|
|
linkChildren({ props })
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|