167 lines
3.4 KiB
Vue
167 lines
3.4 KiB
Vue
<template>
|
||
<view class="tm-divider ">
|
||
<view class="flex-center tm-divider-wk" :class="[
|
||
vertical?' flex-col flexVer ':'',setpsClass
|
||
]" >
|
||
<view :style="{
|
||
borderBottomStyle:model,
|
||
height:vertical?height/2+'px':'1rpx',
|
||
width:vertical?'1rpx':'50%',
|
||
}" class="tm-divider-left" :class="[vertical?color_tmeme:`border-${color_tmeme}-b-1`]">
|
||
</view>
|
||
<view v-if="text" :class="[
|
||
vertical?'py-20':'px-20'
|
||
]" class="tm-divider-text text-size-xs" :style="{color:'grey'}">{{text}}</view>
|
||
<!-- 点位符。 -->
|
||
<text v-if="!text"></text>
|
||
<view :style="{
|
||
borderBottomStyle:model,
|
||
height:vertical?(height/2+'px'):'1rpx',
|
||
width:vertical?'1rpx':'50%',
|
||
|
||
}" class="tm-divider-right" :class="[vertical?color_tmeme:`border-${color_tmeme}-b-1`]"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 分割线
|
||
* @property {String} text = [] 默认：'',显示的文本。
|
||
* @property {String} color = [] 默认：'#eeeeee',线的颜色16进制或者rgb,rgba
|
||
* @property {Number} height = [] 默认：0, 竖向高度时，起作用。
|
||
* @property {Boolean} vertical = [] 默认：false， 是否竖向
|
||
* @property {String} model = [solid|dashed|dotted] 默认：solid， 线的类型。
|
||
* @example <tm-divider text="我是分割线"></tm-divider>
|
||
*/
|
||
export default {
|
||
name: "tm-divider",
|
||
props: {
|
||
|
||
// 不为空时，显示文本。
|
||
text: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 颜色16进制或者rgb,rgba
|
||
color: {
|
||
type: String,
|
||
default: 'grey'
|
||
},
|
||
// 竖向高度时，起作用。
|
||
height: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
// 竖向高度时，起作用。
|
||
width: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
// 是否竖
|
||
vertical: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// solid|dashed|dotted
|
||
model: {
|
||
type: String,
|
||
default: 'solid'
|
||
},
|
||
// 跟随主题色的改变而改变。
|
||
fllowTheme: {
|
||
type: Boolean | String,
|
||
default: false
|
||
}
|
||
},
|
||
computed: {
|
||
wd: {
|
||
get: function() {
|
||
if (this.width) return this.width;
|
||
return this.width_s;
|
||
},
|
||
set: function(val) {
|
||
this.width_s = val;
|
||
}
|
||
},
|
||
color_tmeme: function() {
|
||
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
|
||
.fllowTheme) {
|
||
return this.$tm.vx.state().tmVuetify.color;
|
||
}
|
||
return this.color;
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
width_s: 0,
|
||
height_s: 0,
|
||
setpsClass: ''
|
||
};
|
||
},
|
||
async mounted() {
|
||
await this.init();
|
||
},
|
||
methods: {
|
||
async init() {
|
||
this.$nextTick(async function() {
|
||
let tbs = await this.$Querey(".tm-divider");
|
||
this.wd = tbs[0].width ? tbs[0].width : this.wd;
|
||
|
||
|
||
})
|
||
},
|
||
setWidth(width) {
|
||
this.$nextTick(async function() {
|
||
this.wd = width;
|
||
|
||
this.setpsClass = 'setpsClass'
|
||
if (this.text) {
|
||
let tbs_text = await this.$Querey(".tm-divider-text");
|
||
|
||
this.wd = this.wd - tbs_text[0].width;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tm-divider {
|
||
|
||
display: block;
|
||
width: auto;
|
||
|
||
position: relative;
|
||
|
||
.tm-divider-wk {
|
||
|
||
|
||
|
||
&.setpsClass {
|
||
position: absolute;
|
||
// left: -100upx;
|
||
line-height: 0;
|
||
// left: 0;
|
||
}
|
||
}
|
||
|
||
.flexVer {
|
||
width: 1px;
|
||
}
|
||
|
||
.tm-divider-text {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tm-divider-left,
|
||
.tm-divider-right {
|
||
width: 50%;
|
||
height: 1px;
|
||
border-bottom-width: 1px;
|
||
|
||
}
|
||
}
|
||
</style>
|