forked from opentiny/tiny-vue
77 lines
2.7 KiB
Vue
77 lines
2.7 KiB
Vue
<template>
|
||
<div class="card-wrap">
|
||
<tiny-card title="内容区为默认插槽">
|
||
<p>
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
</p>
|
||
</tiny-card>
|
||
<br />
|
||
<tiny-card title="标题右侧插槽-title-right">
|
||
<template #title-right>
|
||
<tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
|
||
</template>
|
||
<p>
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
</p>
|
||
</tiny-card>
|
||
<br />
|
||
<tiny-card title="标题左侧插槽-title-left">
|
||
<template #title-left>
|
||
<div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
|
||
<TinyIconChevronDown v-if="!isOpen" />
|
||
<TinyIconChevronUp v-else />
|
||
</div>
|
||
</template>
|
||
<p v-show="isOpen">
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
</p>
|
||
</tiny-card>
|
||
<br />
|
||
<tiny-card title="底部插槽-footer">
|
||
<p>
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
</p>
|
||
<template #footer>
|
||
<div style="display: flex">
|
||
<img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
|
||
<div style="padding-left: 16px">
|
||
<p style="font-size: 14px">刘小华</p>
|
||
<p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</tiny-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Card, Tag } from '@opentiny/vue'
|
||
import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
|
||
|
||
export default {
|
||
components: {
|
||
TinyCard: Card,
|
||
TinyTag: Tag,
|
||
TinyIconChevronDown: IconChevronDown(),
|
||
TinyIconChevronUp: IconChevronUp()
|
||
},
|
||
data() {
|
||
return {
|
||
useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
||
isOpen: true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.card-wrap {
|
||
background: #f5f5f5;
|
||
padding: 16px;
|
||
}
|
||
</style>
|