feat: 修复rate组件中wx小程序使用问题

didi · Dec 19, 2024 · b24de1d · b24de1d
1 parent 2dc6d72
commit b24de1d
Show file tree

Hide file tree

Showing 18 changed files with 566 additions and 120 deletions.
diff --git a/example/app.mpx b/example/app.mpx
@@ -45,7 +45,8 @@
       "./pages/textarea/index",
       "./pages/float-ball/index",
       "./pages/rate/index",
-      "./pages/switch/index"
+      "./pages/switch/index",
+      "./pages/loading/index"
     ]
   }
 </script>

diff --git a/example/common/config.ts b/example/common/config.ts
@@ -42,7 +42,8 @@ export default {
           'divider',
           'float-ball',
           'rate',
-          'switch'
+          'switch',
+          'loading'
         ]
       },
       {

diff --git a/example/pages/loading/README.md b/example/pages/loading/README.md
@@ -0,0 +1,29 @@
+## Cube-Segment-Picker
+
+<card>
+
+### 介绍
+
+段选择器，用于实现多段的选择，比如选择时间段：2010年9月1日 - 2014年6月30日。
+
+</card>
+
+## 示例
+
+<card>
+
+### 城市选择器
+
+可以配置多段城市选择。
+
+<!-- @example: segment-city-picker -->
+
+</card>
+
+<card>
+
+### 日期选择器
+
+<!-- @example: segment-date-picker -->
+
+</card>
diff --git a/example/pages/loading/index.mpx b/example/pages/loading/index.mpx
@@ -0,0 +1,41 @@
+<template>
+  <view class="loading-page">
+    <base-container>
+      <view class="describe">默认大小</view>
+      <cube-loading></cube-loading>
+      <view class="describe">36大小</view>
+      <cube-loading size="{{36}}"></cube-loading>
+      <view class="describe">48大小</view>
+      <cube-loading size="{{48}}"></cube-loading>
+    </base-container>
+  </view>
+</template>
+
+<script>
+  import { createPage } from '@mpxjs/core'
+
+  createPage({
+    data: {
+    },
+    methods: {
+    }
+  })
+</script>
+
+<style lang="stylus">
+.loading-page
+  padding-top: 10px
+  height 100%
+  background-color rgba(239, 239, 244, .7)
+  .describe
+    margin: 10px 0
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index.mpx",
+      "cube-loading": "@mpxjs/mpx-cube-ui/src/components/loading/index"
+    }
+  }
+</script>
diff --git a/example/pages/rate/index.mpx b/example/pages/rate/index.mpx
@@ -4,61 +4,60 @@
       <view class="content">
         <view class="rate-wrapper">
           <rate wx:model="{{value}}" wx:model-prop="value" disabled="{{disabled}}" max="{{_max}}" justify="{{justify}}" allowHalf="{{allowHalf}}">
-            <rate-item wx:for="{{_max}}" wx:key="item" index="{{item}}" value="{{value}}">
-              <view class="rate-item" wx:if="{{customStar}}"></view>
-            </rate-item>
           </rate>
-      </view>
-      <view class="options">
-        <view class="title">Options</view>
-        <view class="option-list">
-          <view class="option-list">
-          <view class="group">
-            <view class="group-item">
-              <view class="item">Disabled</view>
-              <switch 
-                color="{{ switchColor }}"
-                checked="{{ disabled }}"
-                bindchange="updateDisabled"
-              />
-            </view>
-            <view class="group-item">
-              <view class="item sub">Star Numbers</view>
-              <input
-                class="input-maxlength"
-                type="number"
-                value="{{ max }}"
-                bind:input="updateMaxLength"
-              />
-            </view>
-            <view class="group-item">
-              <view class="item">Justify</view>
-              <switch 
-                color="{{ switchColor }}"
-                checked="{{ justify }}"
-                bindchange="updateJustify"
-              />
-            </view>
-            <view class="group-item">
-              <view class="item">CustomStar</view>
-              <switch 
-                color="{{ switchColor }}"
-                checked="{{ customStar }}"
-                bindchange="updateCustomStar"
-              />
-            </view>
-            <view class="group-item">
-              <view class="item">AllowHalf</view>
-              <switch 
-                color="{{ switchColor }}"
-                checked="{{ allowHalf }}"
-                bindchange="updateAllowHalf"
-              />
-            </view>
-          </view>
         </view>
+        <view class="options">
+          <view class="title">Options</view>
+            <view class="rate-option-list">
+             <view class="group">
+                <view class="group-item">
+                  <text class="item">Disabled</text>
+                  <switch 
+                    color="{{ switchColor }}"
+                    checked="{{ disabled }}"
+                    bindchange="updateDisabled"
+                  />
+                </view>
+                <view class="group-item">
+                  <view class="item sub">Star Numbers</view>
+                  <input
+                    class="input-maxlength"
+                    type="number"
+                    value="{{ max }}"
+                    bind:input="updateMaxLength"
+                  />
+                </view>
+                <view class="group-item">
+                  <view class="item">Justify</view>
+                  <switch 
+                    color="{{ switchColor }}"
+                    checked="{{ justify }}"
+                    bindchange="updateJustify"
+                  />
+                </view>
+                <view class="group-item">
+                  <view class="item">CustomStar</view>
+                  <switch 
+                    color="{{ switchColor }}"
+                    checked="{{ customStar }}"
+                    bindchange="updateCustomStar"
+                  />
+                </view>
+                <view class="group-item">
+                  <view class="item">AllowHalf</view>
+                  <switch 
+                    color="{{ switchColor }}"
+                    checked="{{ allowHalf }}"
+                    bindchange="updateAllowHalf"
+                  />
+                </view>
+              </view>
+          </view>
         </view>
-      </view>
+        <cube-toast
+          txt="为方便展示，示例中星星数最多为10～"
+          wx:ref="toast">
+        </cube-toast>
       </view>
     </base-container>
   </view>
@@ -90,6 +89,10 @@
       updateMaxLength (e) {
         const { value } = e.detail
         this.max = value
+        if (value >= 10) {
+          this.$refs.toast.show()
+          this.max = '10'
+        }
       },
       updateJustify (e) {
         const { value } = e.detail
@@ -113,8 +116,32 @@
   height 100%
   background-color rgba(239, 239, 244, .7)
   .options
-    margin-top: 20px
-
+    margin: 20px 0
+    .rate-option-list
+      .group
+        border: 1px solid rgba(0, 0, 0, .1)
+        border-radius: 5px
+        .group-item
+          display: flex
+          align-items: center
+          justify-content: space-between
+          padding-right: 10px
+          border-bottom: 1px solid rgba(0, 0, 0, .1)
+          .item
+            padding-left: 15px
+            line-height: 52px
+            height: 52px
+            width: 120px
+            text-align: left
+          .sub
+            font-size: 14px
+            background-color: rgba(0, 0, 0, .04)
+          .input-maxlength
+          .input-width
+            flex: 1
+            margin-left: 15px
+        .last
+          border-bottom: none
 .desc
   margin-top 15px
 </style>
@@ -124,6 +151,7 @@
     "usingComponents": {
       "base-container": "../../components/base-container/index.mpx",
       "rate": "@mpxjs/mpx-cube-ui/src/components/rate/index.mpx",
+      "cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index",
       "rate-item": "@mpxjs/mpx-cube-ui/src/components/rate/rate-item.mpx"
     }
   }

diff --git a/example/static/wx/project.config.json b/example/static/wx/project.config.json
@@ -6,9 +6,9 @@
     "es6": false,
     "postcss": true,
     "checkSiteMap": false,
-    "minified": false,
+    "minified": true,
     "autoAudits": false,
-    "enhance": false,
+    "enhance": true,
     "preloadBackgroundData": false,
     "coverView": true,
     "showShadowRootInWxmlPanel": true,
@@ -30,27 +30,16 @@
     "useStaticServer": true,
     "useCompilerPlugins": false,
     "minifyWXML": true,
-    "ignoreUploadUnusedFiles": true
+    "ignoreUploadUnusedFiles": true,
+    "useIsolateContext": true
   },
   "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "condition": {
-    "miniprogram": {
-      "list": [
-        {
-          "name": "",
-          "pathName": "pages/picker/index",
-          "query": "",
-          "launchMode": "default",
-          "scene": null
-        }
-      ]
-    }
-  },
+  "condition": {},
   "editorSetting": {
     "tabIndent": "insertSpaces",
     "tabSize": 2
   },
-  "libVersion": "2.16.1",
+  "libVersion": "3.7.1",
   "packOptions": {
     "ignore": [],
     "include": []

diff --git a/jest.config.js b/jest.config.js
@@ -7,7 +7,8 @@ module.exports = {
   testEnvironment: 'jsdom',
   collectCoverage: false,
   testMatch: [
-    '**/__tests__/**/*.spec.js'
+    // '**/__tests__/**/*.spec.js'
+    '**/__tests__/**/rate.spec.js'
   ],
   collectCoverageFrom: ['/packages/mpx-cube-ui/src/components/**/*.{js,mpx,ts}'],
   coverageDirectory: 'test/coverage',