From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-line/u-line.vue | 84 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 84 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-line/u-line.vue b/uview-ui/components/u-line/u-line.vue
new file mode 100644
index 0000000..c56fbc3
--- /dev/null
+++ b/uview-ui/components/u-line/u-line.vue
@@ -0,0 +1,84 @@
+<template>
+ <view class="u-line" :style="[lineStyle]">
+
+ </view>
+</template>
+
+<script>
+ /**
+ * line 绾挎潯
+ * @description 姝ょ粍浠朵竴鑸敤浜庢樉绀轰竴鏍圭嚎鏉★紝鐢ㄤ簬鍒嗛殧鍐呭鍧楋紝鏈夋í鍚戝拰绔栧悜涓ょ妯″紡锛屼笖鑳借缃�0.5px绾挎潯锛屼娇鐢ㄤ篃寰堢畝鍗�
+ * @tutorial https://www.uviewui.com/components/line.html
+ * @property {String} color 绾挎潯鐨勯鑹�(榛樿#e4e7ed)
+ * @property {String} length 闀垮害锛岀珫鍚戞椂琛ㄧ幇涓洪珮搴︼紝妯悜鏃惰〃鐜颁负闀垮害锛屽彲浠ヤ负鐧惧垎姣旓紝甯px鍗曚綅鐨勫�肩瓑
+ * @property {String} direction 绾挎潯鐨勬柟鍚戯紝row-妯悜锛宑ol-绔栧悜(榛樿row)
+ * @property {String} border-style 绾挎潯鐨勭被鍨嬶紝solid-瀹炵嚎锛宒ashed-鏂瑰舰铏氱嚎锛宒otted-鍦嗙偣铏氱嚎(榛樿solid)
+ * @property {Boolean} hair-line 鏄惁鏄剧ず缁嗙嚎鏉�(榛樿true)
+ * @property {String} margin 绾挎潯涓庝笂涓嬪乏鍙冲厓绱犵殑闂磋窛锛屽瓧绗︿覆褰㈠紡锛屽"30rpx"
+ * @example <u-line color="red"></u-line>
+ */
+ export default {
+ name: 'u-line',
+ props: {
+ color: {
+ type: String,
+ default: '#e4e7ed'
+ },
+ // 闀垮害锛岀珫鍚戞椂琛ㄧ幇涓洪珮搴︼紝妯悜鏃惰〃鐜颁负闀垮害锛屽彲浠ヤ负鐧惧垎姣旓紝甯px鍗曚綅鐨勫�肩瓑
+ length: {
+ type: String,
+ default: '100%'
+ },
+ // 绾挎潯鏂瑰悜锛宑ol-绔栧悜锛宺ow-妯悜
+ direction: {
+ type: String,
+ default: 'row'
+ },
+ // 鏄惁鏄剧ず缁嗚竟妗�
+ hairLine: {
+ type: Boolean,
+ default: true
+ },
+ // 绾挎潯涓庝笂涓嬪乏鍙冲厓绱犵殑闂磋窛锛屽瓧绗︿覆褰㈠紡锛屽"30rpx"銆�"20rpx 30rpx"
+ margin: {
+ type: String,
+ default: '0'
+ },
+ // 绾挎潯鐨勭被鍨嬶紝solid-瀹炵嚎锛宒ashed-鏂瑰舰铏氱嚎锛宒otted-鍦嗙偣铏氱嚎
+ borderStyle: {
+ type: String,
+ default: 'solid'
+ }
+ },
+ computed: {
+ lineStyle() {
+ let style = {};
+ style.margin = this.margin;
+ // 濡傛灉鏄按骞崇嚎鏉★紝杈规楂樺害涓�1px锛屽啀閫氳繃transform缂╁皬涓�鍗婏紝灏辨槸0.5px浜�
+ if(this.direction == 'row') {
+ // 姝ゅ閲囩敤鍏煎鍒嗗紑鍐欙紝鍏煎nvue鐨勫啓娉�
+ style.borderBottomWidth = '1px';
+ style.borderBottomStyle = this.borderStyle;
+ style.width = this.$u.addUnit(this.length);
+ if(this.hairLine) style.transform = 'scaleY(0.5)';
+ } else {
+ // 濡傛灉鏄珫鍚戠嚎鏉★紝杈规瀹藉害涓�1px锛屽啀閫氳繃transform缂╁皬涓�鍗婏紝灏辨槸0.5px浜�
+ style.borderLeftWidth = '1px';
+ style.borderLeftStyle = this.borderStyle;
+ style.height = this.$u.addUnit(this.length);
+ if(this.hairLine) style.transform = 'scaleX(0.5)';
+ }
+ style.borderColor = this.color;
+ return style;
+ }
+ }
+ }
+</script>
+
+<style scoped lang="scss">
+ @import "../../libs/css/style.components.scss";
+
+ .u-line {
+ vertical-align: middle;
+ }
+</style>
--
Gitblit v1.9.3