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-cell-item/u-cell-item.vue | 316 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 316 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-cell-item/u-cell-item.vue b/uview-ui/components/u-cell-item/u-cell-item.vue
new file mode 100644
index 0000000..055af3a
--- /dev/null
+++ b/uview-ui/components/u-cell-item/u-cell-item.vue
@@ -0,0 +1,316 @@
+<template>
+ <view
+ @tap="click"
+ class="u-cell"
+ :class="{ 'u-border-bottom': borderBottom, 'u-border-top': borderTop, 'u-col-center': center, 'u-cell--required': required }"
+ hover-stay-time="150"
+ :hover-class="hoverClass"
+ :style="{
+ backgroundColor: bgColor
+ }"
+ >
+ <u-icon :size="iconSize" :name="icon" v-if="icon" :custom-style="iconStyle" class="u-cell__left-icon-wrap"></u-icon>
+ <view class="u-flex" v-else>
+ <slot name="icon"></slot>
+ </view>
+ <view
+ class="u-cell_title"
+ :style="[
+ {
+ width: titleWidth ? titleWidth + 'rpx' : 'auto'
+ },
+ titleStyle
+ ]"
+ >
+ <block v-if="title !== ''">{{ title }}</block>
+ <slot name="title" v-else></slot>
+
+ <view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
+ <block v-if="label !== ''">{{ label }}</block>
+ <slot name="label" v-else></slot>
+ </view>
+ </view>
+
+ <view class="u-cell__value" :style="[valueStyle]">
+ <block class="u-cell__value" v-if="value !== ''">{{ value }}</block>
+ <slot v-else></slot>
+ </view>
+ <view class="u-flex u-cell_right" v-if="$slots['right-icon']">
+ <slot name="right-icon"></slot>
+ </view>
+ <u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
+ </view>
+</template>
+
+<script>
+/**
+ * cellItem 鍗曞厓鏍糏tem
+ * @description cell鍗曞厓鏍间竴鑸敤浜庝竴缁勫垪琛ㄧ殑鎯呭喌锛屾瘮濡備釜浜轰腑蹇冮〉锛岃缃〉绛夈�傛惌閰島-cell-group浣跨敤
+ * @tutorial https://www.uviewui.com/components/cell.html
+ * @property {String} title 宸︿晶鏍囬
+ * @property {String} icon 宸︿晶鍥炬爣鍚嶏紝鍙敮鎸乽View鍐呯疆鍥炬爣锛岃Icon 鍥炬爣
+ * @property {Object} icon-style 宸﹁竟鍥炬爣鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {String} value 鍙充晶鍐呭
+ * @property {String} label 鏍囬涓嬫柟鐨勬弿杩颁俊鎭�
+ * @property {Boolean} border-bottom 鏄惁鏄剧ずcell鐨勪笅杈规锛堥粯璁rue锛�
+ * @property {Boolean} border-top 鏄惁鏄剧ずcell鐨勪笂杈规锛堥粯璁alse锛�
+ * @property {Boolean} center 鏄惁浣垮唴瀹瑰瀭鐩村眳涓紙榛樿false锛�
+ * @property {String} hover-class 鏄惁寮�鍚偣鍑诲弽棣堬紝none涓烘棤鏁堟灉锛堥粯璁rue锛�
+ * // @property {Boolean} border-gap border-bottom涓簍rue鏃讹紝Cell鍒楄〃涓棿鐨勬潯鐩殑涓嬭竟妗嗘槸鍚︿笌宸﹁竟鏈変竴涓棿闅旓紙榛樿true锛�
+ * @property {Boolean} arrow 鏄惁鏄剧ず鍙充晶绠ご锛堥粯璁rue锛�
+ * @property {Boolean} required 绠ご鏂瑰悜锛屽彲閫夊�硷紙榛樿right锛�
+ * @property {Boolean} arrow-direction 鏄惁鏄剧ず宸﹁竟琛ㄧず蹇呭～鐨勬槦鍙凤紙榛樿false锛�
+ * @property {Object} title-style 鏍囬鏍峰紡锛屽璞″舰寮�
+ * @property {Object} value-style 鍙充晶鍐呭鏍峰紡锛屽璞″舰寮�
+ * @property {Object} label-style 鏍囬涓嬫柟鎻忚堪淇℃伅鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {String} bg-color 鑳屾櫙棰滆壊锛堥粯璁ransparent锛�
+ * @property {String Number} index 鐢ㄤ簬鍦╟lick浜嬩欢鍥炶皟涓繑鍥烇紝鏍囪瘑褰撳墠鏄鍑犱釜Item
+ * @property {String Number} title-width 鏍囬鐨勫搴︼紝鍗曚綅rpx
+ * @example <u-cell-item icon="integral-fill" title="浼氬憳绛夌骇" value="鏂扮増鏈�"></u-cell-item>
+ */
+export default {
+ name: 'u-cell-item',
+ props: {
+ // 宸︿晶鍥炬爣鍚嶇О(鍙兘uView鍐呯疆鍥炬爣)锛屾垨鑰呭浘鏍噑rc
+ icon: {
+ type: String,
+ default: ''
+ },
+ // 宸︿晶鏍囬
+ title: {
+ type: [String, Number],
+ default: ''
+ },
+ // 鍙充晶鍐呭
+ value: {
+ type: [String, Number],
+ default: ''
+ },
+ // 鏍囬涓嬫柟鐨勬弿杩颁俊鎭�
+ label: {
+ type: [String, Number],
+ default: ''
+ },
+ // 鏄惁鏄剧ず涓嬭竟妗�
+ borderBottom: {
+ type: Boolean,
+ default: true
+ },
+ // 鏄惁鏄剧ず涓婅竟妗�
+ borderTop: {
+ type: Boolean,
+ default: false
+ },
+ // 澶氫釜cell涓紝涓棿鐨刢ell鏄剧ず涓嬪垝绾挎椂锛屼笅鍒掔嚎鏄惁缁欎竴涓埌宸﹁竟鐨勮窛绂�
+ // 1.4.0鐗堟湰搴熼櫎姝ゅ弬鏁帮紝榛樿杈规鐢眀order-top鍜宐order-bottom鎻愪緵锛屾鍙傛暟浼氶�犳垚骞叉壈
+ // borderGap: {
+ // type: Boolean,
+ // default: true
+ // },
+ // 鏄惁寮�鍚偣鍑诲弽棣堬紝鍗崇偣鍑绘椂cell鑳屾櫙涓虹伆鑹诧紝none涓烘棤鏁堟灉
+ hoverClass: {
+ type: String,
+ default: 'u-cell-hover'
+ },
+ // 鏄惁鏄剧ず鍙充晶绠ご
+ arrow: {
+ type: Boolean,
+ default: true
+ },
+ // 鍐呭鏄惁鍨傜洿灞呬腑
+ center: {
+ type: Boolean,
+ default: false
+ },
+ // 鏄惁鏄剧ず宸﹁竟琛ㄧず蹇呭～鐨勬槦鍙�
+ required: {
+ type: Boolean,
+ default: false
+ },
+ // 鏍囬鐨勫搴︼紝鍗曚綅rpx
+ titleWidth: {
+ type: [Number, String],
+ default: ''
+ },
+ // 鍙充晶绠ご鏂瑰悜锛屽彲閫夊�硷細right|up|down锛岄粯璁や负right
+ arrowDirection: {
+ type: String,
+ default: 'right'
+ },
+ // 鎺у埗鏍囬鐨勬牱寮�
+ titleStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 鍙充晶鏄剧ず鍐呭鐨勬牱寮�
+ valueStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 鎻忚堪淇℃伅鐨勬牱寮�
+ labelStyle: {
+ type: Object,
+ default() {
+ return {};
+ }
+ },
+ // 鑳屾櫙棰滆壊
+ bgColor: {
+ type: String,
+ default: 'transparent'
+ },
+ // 鐢ㄤ簬璇嗗埆琚偣鍑荤殑鏄鍑犱釜cell
+ index: {
+ type: [String, Number],
+ default: ''
+ },
+ // 鏄惁浣跨敤lable鎻掓Ы
+ useLabelSlot: {
+ type: Boolean,
+ default: false
+ },
+ // 宸﹁竟鍥炬爣鐨勫ぇ灏忥紝鍗曚綅rpx锛屽彧瀵逛紶鍏con瀛楁鏃舵湁鏁�
+ iconSize: {
+ type: [Number, String],
+ default: 34
+ },
+ // 宸﹁竟鍥炬爣鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ iconStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ },
+ data() {
+ return {
+
+ };
+ },
+ computed: {
+ arrowStyle() {
+ let style = {};
+ if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
+ else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
+ else style.transform = 'rotate(0deg)';
+ return style;
+ }
+ },
+ methods: {
+ click() {
+ this.$emit('click', this.index);
+ }
+ }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/style.components.scss";
+.u-cell {
+ @include vue-flex;
+ align-items: center;
+ position: relative;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ width: 100%;
+ padding: 26rpx 32rpx;
+ font-size: 28rpx;
+ line-height: 54rpx;
+ color: $u-content-color;
+ background-color: #fff;
+ text-align: left;
+}
+
+.u-cell_title {
+ font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap {
+ margin-right: 10rpx;
+ font-size: 32rpx;
+}
+
+.u-cell__right-icon-wrap {
+ margin-left: 10rpx;
+ color: #969799;
+ font-size: 28rpx;
+}
+
+.u-cell__left-icon-wrap,
+.u-cell__right-icon-wrap {
+ @include vue-flex;
+ align-items: center;
+ height: 48rpx;
+}
+
+.u-cell-border:after {
+ position: absolute;
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ content: ' ';
+ pointer-events: none;
+ border-bottom: 1px solid $u-border-color;
+ /* #endif */
+ right: 0;
+ left: 0;
+ top: 0;
+ transform: scaleY(0.5);
+}
+
+.u-cell-border {
+ position: relative;
+}
+
+.u-cell__label {
+ margin-top: 6rpx;
+ font-size: 26rpx;
+ line-height: 36rpx;
+ color: $u-tips-color;
+ /* #ifndef APP-NVUE */
+ word-wrap: break-word;
+ /* #endif */
+}
+
+.u-cell__value {
+ overflow: hidden;
+ text-align: right;
+ /* #ifndef APP-NVUE */
+ vertical-align: middle;
+ /* #endif */
+ color: $u-tips-color;
+ font-size: 26rpx;
+}
+
+.u-cell__title,
+.u-cell__value {
+ flex: 1;
+}
+
+.u-cell--required {
+ /* #ifndef APP-NVUE */
+ overflow: visible;
+ /* #endif */
+ @include vue-flex;
+ align-items: center;
+}
+
+.u-cell--required:before {
+ position: absolute;
+ /* #ifndef APP-NVUE */
+ content: '*';
+ /* #endif */
+ left: 8px;
+ margin-top: 4rpx;
+ font-size: 14px;
+ color: $u-type-error;
+}
+
+.u-cell_right {
+ line-height: 1;
+}
+</style>
--
Gitblit v1.9.3