浏览代码

feat: collapse,countup 等组件支持暗黑模式 (#1508)

* fix: countup优化滚动逻辑

* fix: collapse 无法动态更新问题修复

* fix: 解决H5侧动态加载问题

* docs: 文档增加调试功能(Barrage、Signature、CountUp、TextArea、Collapse)

* feat: 折叠面板 collapse 单元测试

* feat: countUp 单元测试

* feat: barrage 单元测试

* fix: 签名组件单元测试

* feat: textarea 单元测试

* feat: collapse 标题多行展示,无内容不下拉,图标位置配置

* feat: textarea 自动撑开,collapse 组件能力

* fix: collapse 单元测试优化

* fix: textarea 单元测试优化

* fix: 修改input参数,maxNum 改为 maxLength,文档修改等

* fix: maxlength 值

* fix: textarea 自适应

* fix: textarea rows

* upd: notify 增加组件调用方式

* fix: demo 修改

* feat: 新增collapse组件自定义内容(不折叠)功能

* fix: notify 单元测试优化

* feat: searchbar 组件能力补充

* feat: collapse,layout 组件国际化

* upd: countup、barrage、signature、Skeleton组件国际化

* fix: demo及文档修改,组件优化

* feat: textarea 增加autofocus、disabled等属性,增加点击区域事件

* fix: 解决 flexwrap 问题

* fix: 文档修改

* fix: 优化

* fix: collaspe 数据更新支持外部调用

* fix: demo

* feat: 修复折叠面板手风琴模式

* fix: 修复notify标签式展示报错问题及class类名问题

* fix: 解决签名组件生产环境下 getContext 报错问题

* fix: 适配textarea小程序自适应高度功能

* fix: 折叠面板优化

* feat: 组件支持暗黑模式

Co-authored-by: richard1015 <51844712@qq.com>
Ymm 3 年之前
父节点
当前提交
561ab9995a

+ 7 - 0
src/packages/__VUE/barrage/index.scss

@@ -46,3 +46,10 @@
     }
   }
 }
+.nut-theme-dark {
+  .nut-barrage {
+    .dmitem {
+      color: $dark-color-gray;
+    }
+  }
+}

+ 21 - 0
src/packages/__VUE/collapseitem/index.scss

@@ -1,3 +1,24 @@
+.nut-theme-dark {
+  .nut-collapse-item {
+    .collapse-item {
+      background: $dark-background;
+      color: $dark-color;
+      box-shadow: none;
+    }
+    .collapse-wrapper {
+      .collapse-content,
+      .collapse-extraRender {
+        background: $dark-background;
+        color: $dark-color;
+      }
+    }
+    .collapse-extraWrapper {
+      .collapse-extraRender {
+        background: $dark-background;
+      }
+    }
+  }
+}
 .nut-collapse-item {
   position: relative;
   .collapse-item {

+ 5 - 1
src/packages/__VUE/countup/demo.vue

@@ -139,7 +139,11 @@ export default createDemo({
 }
 .show-demo {
   background: #ffffff;
-  padding: 0 20px;
+}
+.nut-theme-dark {
+  .show-demo {
+    background: $dark-background;
+  }
 }
 h2 {
   padding: 0 20px;

+ 24 - 3
src/packages/__VUE/countup/index.scss

@@ -1,7 +1,28 @@
+.nut-theme-dark {
+  .nut-countup {
+    background: $dark-background;
+    color: $dark-color;
+    box-shadow: none;
+  }
+  .nut-collapse-item {
+    .collapse-wrapper {
+      .collapse-content,
+      .collapse-extraRender {
+        background: $dark-background;
+        color: $dark-color;
+      }
+    }
+    .collapse-extraWrapper {
+      .collapse-extraRender {
+        background: $dark-background;
+      }
+    }
+  }
+}
 .nut-countup {
-  display: inline-block;
-  width: 100%;
-  padding: 5px;
+  display: block;
+  // width: 100%;
+  padding: 5px 20px;
   color: #000;
   font-weight: bold;
   font-family: PingFangSC-Regular;

+ 1 - 1
src/packages/__VUE/layout/demo.vue

@@ -160,7 +160,7 @@ export default createDemo({
 
 <style lang="scss" scoped>
 .box-item {
-  background: #fff;
+  background: $dark-background2;
   margin-bottom: 20px;
   padding: 20px 0;
 }

+ 9 - 1
src/packages/__VUE/signature/index.vue

@@ -26,7 +26,15 @@ export default create({
     },
     strokeStyle: {
       type: String,
-      default: '#000'
+      default: () => {
+        let bodyDom: any = document.getElementsByTagName('body');
+        let clsName = bodyDom[0]['className'];
+        if (clsName.indexOf('nut-theme-dark') == -1) {
+          return '#000';
+        } else {
+          return '#fff';
+        }
+      }
     },
     type: {
       type: String,