<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>