<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="type == 'content' && size == 'medium'" class="ff-triangle">
|
<div class="ff-triangle-border"></div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// 统一样式卡片
|
export default {
|
props: {
|
/**
|
* 类型
|
* content | btn
|
*/
|
type: {
|
type: String,
|
default: 'content'
|
},
|
/**
|
* 样式折角大小
|
* small | medium | middle-s
|
*/
|
size: {
|
type: String,
|
default: 'small'
|
},
|
/**
|
* 样式朝向
|
* content: left | right | top-left | down
|
* btn: left | right | down
|
*/
|
direction: {
|
type: String,
|
default: 'left'
|
},
|
/**
|
* 选择无边框方向
|
* r（右侧无边框） | t（顶部无边框）
|
*/
|
borderless: {
|
type: String
|
}
|
},
|
computed: {
|
wrapClz() {
|
if (this.type == 'content') {
|
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;
|
} else if (this.type == 'btn') {
|
let clz = 'ff-toggle-btn p-events-auto';
|
clz += ` ff-toggle-btn-${this.direction}`;
|
clz += ` ff-btn-${this.size}`;
|
return clz;
|
} else {
|
return '';
|
}
|
}
|
}
|
};
|
</script>
|
