From 350d0dab6b45d17267b3291a19cd4aa2f28d9e77 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 18 Apr 2024 10:29:44 +0800
Subject: [PATCH] 优化数值显示组件，支持点击事件
---
layout/numerical/cNumerical.scss | 13 +++++++++++++
layout/numerical/CNumerical.vue | 15 +++++++++++----
2 files changed, 24 insertions(+), 4 deletions(-)
diff --git a/layout/numerical/CNumerical.vue b/layout/numerical/CNumerical.vue
index bcc4016..d1c3e09 100644
--- a/layout/numerical/CNumerical.vue
+++ b/layout/numerical/CNumerical.vue
@@ -9,10 +9,14 @@
class="at-col"
v-for="(item,index) in values2"
:key="index"
- :class="'at-col-' + valueFlex[index]"
+ :class="'at-col-' + valueFlex[index] + ' ' + (!!item.onClick?'on-clickable':'')"
+ @tap="evt => item.onClick && item.onClick(item)"
>
<view class="c-numerical-value">
- <text :class="item.textType?('m-text-'+item.textType):''">{{item.integer}}</text>
+ <text :class="item.textType?('m-text-'+item.textType):''">
+ {{item.integer}}
+ <text class="c-numerical-more">»</text>
+ </text>
<text
class="c-numerical-decimal"
:class="item.integer.length>6?'small':''"
@@ -33,8 +37,11 @@
name: 'CNumerical',
components: {},
props: {
- // 数值集合，格式为：[{title, value, textType}]
- values: Array,
+ // 数值集合，格式为：[{title, value, textType, onClick}]
+ values: {
+ type: Array,
+ default: () => [],
+ },
},
computed: {
values2() {
diff --git a/layout/numerical/cNumerical.scss b/layout/numerical/cNumerical.scss
index f3802e1..ba9f0c5 100644
--- a/layout/numerical/cNumerical.scss
+++ b/layout/numerical/cNumerical.scss
@@ -9,10 +9,23 @@
text-align: center;
.at-col {
padding: 10px 0;
+ &.on-clickable {
+ &:active {
+ background-color: #f2f2f2;
+ }
+ .c-numerical-more {
+ display: inline;
+ }
+ }
}
.c-numerical-value {
font-size: 40px;
line-height: 60px;
+ .c-numerical-more {
+ display: none;
+ margin-left: -8px;
+ font-size: 36px;
+ }
.c-numerical-decimal {
&.small {
font-size: 30px;
--
Gitblit v1.9.1