<template>
|
<div :class="wrapClz">
|
<div class="ff-border-bottom"></div>
|
<div class="ff-border-top">
|
<div class="ff-border-content">
|
<slot name="content"></slot>
|
</div>
|
</div>
|
<div class="ff-footer">
|
<slot name="footer"></slot>
|
</div>
|
<div v-if="size != 'small'" class="ff-triangle">
|
<div class="ff-triangle-border"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 统一样式卡片
|
export default {
|
props: {
|
/**
|
* 样式折角大小
|
* small | medium
|
*/
|
size: {
|
type: String,
|
default: 'small'
|
},
|
/**
|
* 样式朝向
|
* left | right | top-left
|
*/
|
direction: {
|
type: String,
|
default: 'left'
|
},
|
/**
|
* 选择无边框方向
|
* r（右侧无边框） | t（顶部无边框）
|
*/
|
borderless: {
|
type: String
|
}
|
},
|
computed: {
|
wrapClz() {
|
let clz = 'ff-content p-events-auto';
|
clz += ` ff-content-${this.direction}`;
|
clz += ` ff-content-${this.size}`;
|
clz += `${this.borderless ? '-borderless-' + this.borderless : ''}`;
|
return clz;
|
}
|
}
|
};
|
</script>
|
