From 8312de5d0908fc8b0109b68ee09d11a37f2f7766 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Sat, 8 Aug 2026 14:57:39 +0800
Subject: [PATCH] =?UTF-8?q?refactor(diy-recommend-code):=20=E5=A4=8D?=
=?UTF-8?q?=E5=88=B6=E6=8C=89=E9=92=AE=E7=94=A8=20$util.objToStyle=20?=
=?UTF-8?q?=E7=94=9F=E6=88=90=20style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
之前复制按钮用字符串拼接方式:
:style="'...static...' + method() + '...static...'"
虽然字符串拼接全平台兼容,但写法繁琐,且 camelCase/kebab-case
容易写错(camelCase 用驼峰,字符串里要手写 - 转换)。
改成调用 common/js/util.js 中已有的 objToStyle 方法:
:style="$util.objToStyle(copyBtnStyleObj(...))"
copyBtnStyleObj(preset, textOnly) 返回对象:
- 边框/背景/border-color: 跟随后端 diyData.codeColor
- 文字色/字号/字重: 跟随后端 codeColor(可选 textOnly=true 时)
- 其余布局属性: 由 preset 参数覆盖(4 个预设各自差异)
$util.objToStyle 自动 camelCase → kebab-case(如 alignItems → align-items)
转换后拼接为标准 CSS 字符串,全平台兼容。
好处:
- 写法更清晰(对象语法)
- 不用手写 kebab-case
- 与项目其他地方统一风格(common/js/util.js 已有此工具)
---
components-diy/diy-recommend-code.vue | 47 +++++++++++++++------------
1 file changed, 27 insertions(+), 20 deletions(-)
diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue
index 71878ff..dc6da4b 100644
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -104,9 +104,9 @@
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
@@ -175,9 +175,9 @@
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
-
+
📋
- {{ nc.copyButtonText || '复制推荐码' }}
+ {{ nc.copyButtonText || '复制推荐码' }}
@@ -802,21 +802,28 @@ export default {
].join('');
},
/**
- * 复制按钮边框色(跟随后端 diyData.codeColor)
- * 返回字符串,兼容 H5/小程序/APP/鸿蒙
+ * 复制按钮样式对象(跟随后端 diyData.codeColor)
+ * 返回对象,用 $util.objToStyle 转字符串,
+ * 兼容 H5/小程序/APP/鸿蒙
+ * @param {Object} preset 预设差异(可选,如 {borderRadius:'32rpx',height:'64rpx'})
+ * @param {Boolean} textOnly 只返回文字样式(用于内嵌 text 节点)
*/
- copyBtnBorderStyle() {
+ copyBtnStyleObj(preset, textOnly) {
const v = this.nc;
const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
- return `2rpx solid ${codeColor}`;
- },
- /**
- * 复制按钮文字色(跟随后端 diyData.codeColor)
- */
- copyBtnTextColor() {
- const v = this.nc;
- const codeColor = (v && v.codeColor) ? v.codeColor : '#DC143C';
- return codeColor;
+ if (textOnly) {
+ return Object.assign({
+ fontSize: '24rpx',
+ color: codeColor,
+ fontWeight: '600'
+ }, preset || {});
+ }
+ const base = {
+ background: '#FFFFFF',
+ border: `2rpx solid ${codeColor}`,
+ boxSizing: 'border-box'
+ };
+ return Object.assign(base, preset || {});
},
px2rpx(val) {
return Number(val || 0) * 2