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-cell/u-cell.vue | 229 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 229 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-cell/u-cell.vue b/uni_modules/uview-ui/components/u-cell/u-cell.vue
new file mode 100644
index 0000000..b099c90
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-cell/u-cell.vue
@@ -0,0 +1,229 @@
+<template>
+ <view class="u-cell" :class="[customClass]" :style="[$u.addStyle(customStyle)]"
+ :hover-class="(!disabled && (clickable || isLink)) ? 'u-cell--clickable' : ''" :hover-stay-time="250"
+ @tap="clickHandler">
+ <view class="u-cell__body" :class="[ center && 'u-cell--center', size === 'large' && 'u-cell__body--large']">
+ <view class="u-cell__body__content">
+ <view class="u-cell__left-icon-wrap" v-if="$slots.icon || icon">
+ <slot name="icon" v-if="$slots.icon">
+ </slot>
+ <u-icon v-else :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></u-icon>
+ </view>
+ <view class="u-cell__title">
+ <slot name="title">
+ <text v-if="title" class="u-cell__title-text" :style="[titleTextStyle]"
+ :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']">{{ title }}</text>
+ </slot>
+ <slot name="label">
+ <text class="u-cell__label" v-if="label"
+ :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__label--large']">{{ label }}</text>
+ </slot>
+ </view>
+ </view>
+ <slot name="value">
+ <text class="u-cell__value"
+ :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']"
+ v-if="!$u.test.empty(value)">{{ value }}</text>
+ </slot>
+ <view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"
+ :class="[`u-cell__right-icon-wrap--${arrowDirection}`]">
+ <slot name="right-icon" v-if="$slots['right-icon']">
+ </slot>
+ <u-icon v-else :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
+ :size="size === 'large' ? 18 : 16"></u-icon>
+ </view>
+ </view>
+ <u-line v-if="border"></u-line>
+ </view>
+</template>
+
+<script>
+ import props from './props.js';
+ /**
+ * cell 鍗曞厓鏍�
+ * @description cell鍗曞厓鏍间竴鑸敤浜庝竴缁勫垪琛ㄧ殑鎯呭喌锛屾瘮濡備釜浜轰腑蹇冮〉锛岃缃〉绛夈��
+ * @tutorial https://uviewui.com/components/cell.html
+ * @property {String | Number} title 鏍囬
+ * @property {String | Number} label 鏍囬涓嬫柟鐨勬弿杩颁俊鎭�
+ * @property {String | Number} value 鍙充晶鐨勫唴瀹�
+ * @property {String} icon 宸︿晶鍥炬爣鍚嶇О锛屾垨鑰呭浘鐗囬摼鎺�(鏈湴鏂囦欢寤鸿浣跨敤缁濆鍦板潃)
+ * @property {Boolean} disabled 鏄惁绂佺敤cell
+ * @property {Boolean} border 鏄惁鏄剧ず涓嬭竟妗� (榛樿 true )
+ * @property {Boolean} center 鍐呭鏄惁鍨傜洿灞呬腑(涓昏鏄拡瀵瑰彸渚х殑value閮ㄥ垎) (榛樿 false )
+ * @property {String} url 鐐瑰嚮鍚庤烦杞殑URL鍦板潃
+ * @property {String} linkType 閾炬帴璺宠浆鐨勬柟寮忥紝鍐呴儴浣跨敤鐨勬槸uView灏佽鐨剅oute鏂规硶锛屽彲鑳戒細杩涜鎷︽埅鎿嶄綔 (榛樿 'navigateTo' )
+ * @property {Boolean} clickable 鏄惁寮�鍚偣鍑诲弽棣�(琛ㄧ幇涓虹偣鍑绘椂鍔犱笂鐏拌壊鑳屾櫙) 锛堥粯璁� false 锛�
+ * @property {Boolean} isLink 鏄惁灞曠ず鍙充晶绠ご骞跺紑鍚偣鍑诲弽棣� 锛堥粯璁� false 锛�
+ * @property {Boolean} required 鏄惁鏄剧ず琛ㄥ崟鐘舵�佷笅鐨勫繀濉槦鍙�(姝ょ粍浠跺彲鑳戒細鍐呭祵鍏nput缁勪欢) 锛堥粯璁� false 锛�
+ * @property {String} rightIcon 鍙充晶鐨勫浘鏍囩澶� 锛堥粯璁� 'arrow-right'锛�
+ * @property {String} arrowDirection 鍙充晶绠ご鐨勬柟鍚戯紝鍙�夊�间负锛歭eft锛寀p锛宒own
+ * @property {Object | String} rightIconStyle 鍙充晶绠ご鍥炬爣鐨勬牱寮�
+ * @property {Object | String} titleStyle 鏍囬鐨勬牱寮�
+ * @property {Object | String} iconStyle 宸︿晶鍥炬爣鏍峰紡
+ * @property {String} size 鍗曚綅鍏冪殑澶у皬锛屽彲閫夊�间负 large锛宯ormal锛宮ini
+ * @property {Boolean} stop 鐐瑰嚮cell鏄惁闃绘浜嬩欢浼犳挱 (榛樿 true )
+ * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
+ *
+ * @event {Function} click 鐐瑰嚮cell鍒楄〃鏃惰Е鍙�
+ * @example 璇ョ粍浠堕渶瑕佹惌閰峜ell-group缁勪欢浣跨敤锛岃瀹樻柟鏂囨。绀轰緥
+ */
+ export default {
+ name: 'u-cell',
+ data() {
+ return {
+
+ }
+ },
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ computed: {
+ titleTextStyle() {
+ return uni.$u.addStyle(this.titleStyle)
+ }
+ },
+ methods: {
+ // 鐐瑰嚮cell
+ clickHandler(e) {
+ if (this.disabled) return
+ this.$emit('click', {
+ name: this.name
+ })
+ // 濡傛灉閰嶇疆浜唘rl(姝rops鍙傛暟閫氳繃mixin寮曞叆)鍙傛暟锛岃烦杞〉闈�
+ this.openPage()
+ // 鏄惁闃绘浜嬩欢浼犳挱
+ this.stop && this.preventEvent(e)
+ },
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/components.scss";
+
+ $u-cell-padding: 10px 15px !default;
+ $u-cell-font-size: 15px !default;
+ $u-cell-line-height: 24px !default;
+ $u-cell-color: $u-main-color !default;
+ $u-cell-icon-size: 16px !default;
+ $u-cell-title-font-size: 15px !default;
+ $u-cell-title-line-height: 22px !default;
+ $u-cell-title-color: $u-main-color !default;
+ $u-cell-label-font-size: 12px !default;
+ $u-cell-label-color: $u-tips-color !default;
+ $u-cell-label-line-height: 18px !default;
+ $u-cell-value-font-size: 14px !default;
+ $u-cell-value-color: $u-content-color !default;
+ $u-cell-clickable-color: $u-bg-color !default;
+ $u-cell-disabled-color: #c8c9cc !default;
+ $u-cell-padding-top-large: 13px !default;
+ $u-cell-padding-bottom-large: 13px !default;
+ $u-cell-value-font-size-large: 15px !default;
+ $u-cell-label-font-size-large: 14px !default;
+ $u-cell-title-font-size-large: 16px !default;
+ $u-cell-left-icon-wrap-margin-right: 4px !default;
+ $u-cell-right-icon-wrap-margin-left: 4px !default;
+ $u-cell-title-flex:1 !default;
+ $u-cell-label-margin-top:5px !default;
+
+
+ .u-cell {
+ &__body {
+ @include flex();
+ /* #ifndef APP-NVUE */
+ box-sizing: border-box;
+ /* #endif */
+ padding: $u-cell-padding;
+ font-size: $u-cell-font-size;
+ color: $u-cell-color;
+ // line-height: $u-cell-line-height;
+ align-items: center;
+
+ &__content {
+ @include flex(row);
+ align-items: center;
+ flex: 1;
+ }
+
+ &--large {
+ padding-top: $u-cell-padding-top-large;
+ padding-bottom: $u-cell-padding-bottom-large;
+ }
+ }
+
+ &__left-icon-wrap,
+ &__right-icon-wrap {
+ @include flex();
+ align-items: center;
+ // height: $u-cell-line-height;
+ font-size: $u-cell-icon-size;
+ }
+
+ &__left-icon-wrap {
+ margin-right: $u-cell-left-icon-wrap-margin-right;
+ }
+
+ &__right-icon-wrap {
+ margin-left: $u-cell-right-icon-wrap-margin-left;
+ transition: transform 0.3s;
+
+ &--up {
+ transform: rotate(-90deg);
+ }
+
+ &--down {
+ transform: rotate(90deg);
+ }
+ }
+
+ &__title {
+ flex: $u-cell-title-flex;
+
+ &-text {
+ font-size: $u-cell-title-font-size;
+ line-height: $u-cell-title-line-height;
+ color: $u-cell-title-color;
+
+ &--large {
+ font-size: $u-cell-title-font-size-large;
+ }
+ }
+
+ }
+
+ &__label {
+ margin-top: $u-cell-label-margin-top;
+ font-size: $u-cell-label-font-size;
+ color: $u-cell-label-color;
+ line-height: $u-cell-label-line-height;
+
+ &--large {
+ font-size: $u-cell-label-font-size-large;
+ }
+ }
+
+ &__value {
+ text-align: right;
+ font-size: $u-cell-value-font-size;
+ line-height: $u-cell-line-height;
+ color: $u-cell-value-color;
+
+ &--large {
+ font-size: $u-cell-value-font-size-large;
+ }
+ }
+
+ &--clickable {
+ background-color: $u-cell-clickable-color;
+ }
+
+ &--disabled {
+ color: $u-cell-disabled-color;
+ /* #ifndef APP-NVUE */
+ cursor: not-allowed;
+ /* #endif */
+ }
+
+ &--center {
+ align-items: center;
+ }
+ }
+</style>
--
Gitblit v1.9.3