tiny-vue/examples/sites/demos/mobile-first/app/card/custom-class.vue

53 lines
1.4 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<tiny-card title="这是卡片标题" card-class="my-card">
<p>
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容
</p>
</tiny-card>
<br />
<tiny-card title="这是卡片标题" :options="options" height="100px">
<p>
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容
这是一段长文本内容这是一段长文本内容这是一段长文本内容这是一段长文本内容
</p>
</tiny-card>
</div>
</template>
<script>
import { Card } from '@opentiny/vue'
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
export default {
components: {
TinyCard: Card
},
data() {
return {
options: [
{
text: '删除列表',
icon: IconDel()
},
{
text: '编辑',
icon: IconWriting(),
disabled: true
},
{
text: '排序',
icon: IconAscending()
},
{
text: '分享',
icon: IconShare(),
disabled: true
}
]
}
}
}
</script>