From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001 From: gaoluyang <2820782392@qq.com> Date: 星期二, 15 七月 2025 11:46:57 +0800 Subject: [PATCH] 项目初始化 --- 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-宸﹁竟锛宑enter-涓棿锛宺ight-鍙宠竟 锛堥粯璁� '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.9.3