dykj-outsource-12123/uni_modules/uview-plus/components/u-divider/u-divider.vue
2024-06-28 14:18:30 +08:00

122 lines
3.2 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-divider"
:style="[addStyle(customStyle)]"
@tap="click"
>
<u-line
:color="lineColor"
:customStyle="leftLineStyle"
:hairline="hairline"
:dashed="dashed"
></u-line>
<text
v-if="dot"
class="u-divider__dot"
>●</text>
<text
v-else-if="text"
class="u-divider__text"
:style="[textStyle]"
>{{text}}</text>
<u-line
:color="lineColor"
:customStyle="rightLineStyle"
:hairline="hairline"
:dashed="dashed"
></u-line>
</view>
</template>
<script>
import props from './props';
import mpMixin from '../../libs/mixin/mpMixin';
import mixin from '../../libs/mixin/mixin';
import { addStyle, addUnit } from '../../libs/function/index';
/**
* divider 分割线
* @description 区隔内容的分割线,一般用于页面底部"没有更多"的提示。
* @tutorial https://ijry.github.io/uview-plus/components/divider.html
* @property {Boolean} dashed 是否虚线 (默认 false
* @property {Boolean} hairline 是否细线 (默认 true
* @property {Boolean} dot 是否以点替代文字优先于text字段起作用 (默认 false
* @property {String} textPosition 内容文本的位置left-左边center-中间right-右边 (默认 'center'
* @property {String | Number} text 文本内容
* @property {String | Number} textSize 文本大小 (默认 14
* @property {String} textColor 文本颜色 (默认 '#909399'
* @property {String} lineColor 线条颜色 (默认 '#dcdfe6'
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click divider组件被点击时触发
* @example <u-divider :color="color">锦瑟无端五十弦</u-divider>
*/
export default {
name:'u-divider',
mixins: [mpMixin, mixin, props],
computed: {
textStyle() {
const style = {}
style.fontSize = addUnit(this.textSize)
style.color = this.textColor
return style
},
// 左边线条的的样式
leftLineStyle() {
const style = {}
// 如果是在左边,设置左边的宽度为固定值
if (this.textPosition === 'left') {
style.width = '80rpx'
} else {
style.flex = 1
}
return style
},
// 右边线条的的样式
rightLineStyle() {
const style = {}
// 如果是在右边,设置右边的宽度为固定值
if (this.textPosition === 'right') {
style.width = '80rpx'
} else {
style.flex = 1
}
return style
}
},
emits: ["click"],
methods: {
addStyle,
// divider组件被点击时触发
click() {
this.$emit('click');
}
}
}
</script>
<style lang="scss" scoped>
@import '../../libs/css/components.scss';
$u-divider-margin:15px 0 !default;
$u-divider-text-margin:0 15px !default;
$u-divider-dot-font-size:12px !default;
$u-divider-dot-margin:0 12px !default;
$u-divider-dot-color: #c0c4cc !default;
.u-divider {
@include flex;
flex-direction: row;
align-items: center;
margin: $u-divider-margin;
&__text {
margin: $u-divider-text-margin;
}
&__dot {
font-size: $u-divider-dot-font-size;
margin: $u-divider-dot-margin;
color: $u-divider-dot-color;
}
}
</style>