forked from opentiny/tiny-vue
69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<template>
|
||
<div>
|
||
<tiny-card
|
||
title="这是卡片标题"
|
||
v-model="value"
|
||
check-type="checkbox"
|
||
label="1"
|
||
:options="options"
|
||
@change="change"
|
||
@icon-click="iconClick"
|
||
>
|
||
<p>
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||
</p>
|
||
</tiny-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Card, Modal } from '@opentiny/vue'
|
||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||
|
||
export default {
|
||
components: {
|
||
TinyCard: Card
|
||
},
|
||
data() {
|
||
return {
|
||
value: false,
|
||
options: [
|
||
{
|
||
text: '删除列表',
|
||
icon: IconDel()
|
||
},
|
||
{
|
||
text: '编辑',
|
||
icon: IconWriting(),
|
||
disabled: true
|
||
},
|
||
{
|
||
text: '排序',
|
||
icon: IconAscending()
|
||
},
|
||
{
|
||
text: '分享',
|
||
icon: IconShare(),
|
||
disabled: true
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
change(val) {
|
||
Modal.message({
|
||
message: val.toString(),
|
||
status: 'info'
|
||
})
|
||
},
|
||
iconClick(item, index) {
|
||
Modal.message({
|
||
message: `当前点击的是第${index + 1}个图标`,
|
||
status: 'info'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|