dykj-football/uni_modules/uview-plus/components/u-line/u-line.vue
2024-04-17 15:27:43 +08:00

66 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view
class="u-line"
:style="[lineStyle]"
>
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
/**
* line 线条
* @description 此组件一般用于显示一根线条用于分隔内容块有横向和竖向两种模式且能设置0.5px线条,使用也很简单
* @tutorial https://ijry.github.io/uview-plus/components/line.html
* @property {String} color 线条的颜色 ( 默认 '#d6d7d9' )
* @property {String | Number} length 长度竖向时表现为高度横向时表现为长度可以为百分比带px单位的值等 ( 默认 '100%' )
* @property {String} direction 线条的方向row-横向col-竖向 (默认 'row' )
* @property {Boolean} hairline 是否显示细线条 (默认 true )
* @property {String | Number} margin 线条与上下左右元素的间距,字符串形式,如"30px" (默认 0 )
* @property {Boolean} dashed 是否虚线true-虚线false-实线 (默认 false )
* @property {Object} customStyle 定义需要用到的外部样式
* @example <u-line color="red"></u-line>
*/
export default {
name: 'u-line',
mixins: [mpMixin, mixin, props],
computed: {
lineStyle() {
const style = {}
style.margin = this.margin
// 如果是水平线条边框高度为1px再通过transform缩小一半就是0.5px了
if (this.direction === 'row') {
// 此处采用兼容分开写兼容nvue的写法
style.borderBottomWidth = '1px'
style.borderBottomStyle = this.dashed ? 'dashed' : 'solid'
style.width = addUnit(this.length)
if (this.hairline) style.transform = 'scaleY(0.5)'
} else {
// 如果是竖向线条边框宽度为1px再通过transform缩小一半就是0.5px了
style.borderLeftWidth = '1px'
style.borderLeftStyle = this.dashed ? 'dashed' : 'solid'
style.height = addUnit(this.length)
if (this.hairline) style.transform = 'scaleX(0.5)'
}
style.borderColor = this.color
return deepMerge(style, addStyle(this.customStyle))
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-line {
/* #ifndef APP-NVUE */
vertical-align: middle;
/* #endif */
}
</style>