60 lines
1004 B
Vue
60 lines
1004 B
Vue
|
<template>
|
||
|
|
<view class="t-gap" :class="customClass" :style="rootStyle"></view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 't-gap',
|
||
|
|
options: {
|
||
|
|
addGlobalClass: true,
|
||
|
|
virtualHost: true,
|
||
|
|
styleIsolation: 'shared'
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
/**
|
||
|
|
* 自定义根节点样式
|
||
|
|
*/
|
||
|
|
customStyle: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 自定义根节点样式类
|
||
|
|
*/
|
||
|
|
customClass: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 背景颜色
|
||
|
|
*/
|
||
|
|
bgColor: {
|
||
|
|
type: String,
|
||
|
|
default: 'transparent'
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 高度
|
||
|
|
*/
|
||
|
|
height: {
|
||
|
|
type: [Number, String],
|
||
|
|
default: 15
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
rootStyle() {
|
||
|
|
const rootStyle = [];
|
||
|
|
|
||
|
|
if (this.bgColor) {
|
||
|
|
rootStyle.push(`background-color: ${this.bgColor};`);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.height) {
|
||
|
|
const height = typeof this.height === 'number' ? `${this.height}px` : this.height;
|
||
|
|
rootStyle.push(`height: ${height};`);
|
||
|
|
}
|
||
|
|
|
||
|
|
return rootStyle.join(' ');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|