From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 01 Mar 2024 09:58:45 +0800 Subject: [PATCH] fix:手持设备 --- uni_modules/uview-ui/components/u-divider/u-divider.vue | 116 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 116 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-divider/u-divider.vue b/uni_modules/uview-ui/components/u-divider/u-divider.vue new file mode 100644 index 0000000..b629da6 --- /dev/null +++ b/uni_modules/uview-ui/components/u-divider/u-divider.vue @@ -0,0 +1,116 @@ +<template> + <view + class="u-divider" + :style="[$u.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.js'; + /** + * divider ��������� + * @description ���������������������������������������������������"������������"������������ + * @tutorial https://www.uviewui.com/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: [uni.$u.mpMixin, uni.$u.mixin,props], + computed: { + textStyle() { + const style = {} + style.fontSize = uni.$u.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 + } + }, + methods: { + // 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> -- Gitblit v1.8.0