feat: 补充switch

didi · Dec 5, 2024 · ffa08ce · ffa08ce
1 parent 5542d86
commit ffa08ce
Show file tree

Hide file tree

Showing 12 changed files with 258 additions and 25 deletions.
diff --git a/example/app.mpx b/example/app.mpx
@@ -44,7 +44,8 @@
       "./pages/checkbox-modal/index",
       "./pages/textarea/index",
       "./pages/float-ball/index",
-      "./pages/rate/index"
+      "./pages/rate/index",
+      "./pages/switch/index"
     ]
   }
 </script>

diff --git a/example/common/config.ts b/example/common/config.ts
@@ -40,7 +40,9 @@ export default {
           'button-group',
           'icon',
           'divider',
-          'float-ball'
+          'float-ball',
+          'rate',
+          'switch'
         ]
       },
       {

diff --git a/example/pages/rate/index.mpx b/example/pages/rate/index.mpx
@@ -69,12 +69,12 @@
 
   createPage({
     data: {
-      value: 4,
+      value: 4.5,
       max: '5',
       customStar: false,
       justify: false,
       allowHalf: true,
-      disabled: false,
+      disabled: true,
       switchColor: '#fc9153'
     },
     computed: {
@@ -109,7 +109,7 @@
 
 <style lang="stylus">
 .rate-page
-  margin-top: 10px
+  padding-top: 10px
   height 100%
   background-color rgba(239, 239, 244, .7)
   .options

diff --git a/example/pages/switch/README.md b/example/pages/switch/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/switch/index.mpx b/example/pages/switch/index.mpx
@@ -0,0 +1,71 @@
+
+<template>
+  <view class="switch-page">
+    <base-container>
+      <view class="switch-example">
+        <view class="switch-show">
+          <cube-switch wx:model="{{valueOne}}"></cube-switch>
+          <text class="switch-text">Switch</text>
+        </view>
+        <view class="switch-value">switch value: {{valueOne}}</view>
+      </view>
+      <view class="switch-example">
+        <view class="switch-show">
+          <cube-switch wx:model="{{valueTwo}}"></cube-switch>
+          <text class="switch-text">Switch</text>
+        </view>
+        <view class="switch-value">switch value: {{valueTwo}}</view>
+      </view>
+      <view class="switch-example">
+        <view class="switch-show">
+          <cube-switch disabled="{{true}}" value="{{true}}"></cube-switch>
+          <text class="switch-text">Disabled Switch</text>
+        </view>
+        <view class="switch-value">switch value: true</view>
+      </view>
+      <view class="switch-example">
+        <view class="switch-show">
+          <cube-switch disabled="{{true}}" value="{{false}}"></cube-switch>
+          <text class="switch-text">Disabled Switch</text>
+        </view>
+        <view class="switch-value">switch value:  false</view>
+      </view>
+    </base-container>
+  </view>
+</template>
+
+<script>
+  import { createPage } from '@mpxjs/core'
+
+  createPage({
+    data: {
+      valueOne: true,
+      valueTwo: false
+    }
+  })
+</script>
+
+<style lang="stylus">
+.switch-page
+  padding-top: 10px
+  height 100%
+  background-color rgba(239, 239, 244, .7)
+  .switch-example
+    .switch-show
+      display: flex
+      padding: 15px
+      background-color: white
+      .switch-text
+        margin-left: 10px
+    .switch-value
+      margin: 10px 0
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "base-container": "../../components/base-container/index.mpx",
+      "cube-switch": "@mpxjs/mpx-cube-ui/src/components/switch/index.mpx"
+    }
+  }
+</script>
diff --git a/packages/mpx-cube-ui/src/common/stylus/theme/components/rate.styl b/packages/mpx-cube-ui/src/common/stylus/theme/components/rate.styl
@@ -0,0 +1,19 @@
+// @type rate
+$rate-max-width := 100%
+$rate-justify-width := 100%
+
+
+// @type rate-item
+$rate-item-width := 32px
+$rate-item-def-width := 100%
+$rate-item-def-height := 100%
+$rate-item-def-background-size := 100%
+$rate-item-flex := 0 1 auto
+$rate-item-margin-right := 6px
+$rate-item-after-padding := 50% 0
+$rate-item-last-child-margin-right := 0
+
+
+
+
+
diff --git a/packages/mpx-cube-ui/src/common/stylus/theme/components/switch.styl b/packages/mpx-cube-ui/src/common/stylus/theme/components/switch.styl
@@ -0,0 +1,17 @@
+// @type popup
+$switch-width := 40px
+$switch-height := 24px
+$switch-bgc := #EAEAEA
+$switch-border-radius := 15px
+$switch-transition := background-color 0.3s
+
+$switch-handle-top := 2px
+$switch-handle-left := 2px
+$switch-handle-width := 20px
+$switch-handle-height := 20px
+$switch-handle-bgc := #fff
+$switch-handle-border-radius := 50%
+$switch-handle-transition := left 0.3s
+
+$switch-bgc-on := #FF6435
+$switch-handle-left-on := 18px
diff --git a/packages/mpx-cube-ui/src/components/rate/index.mpx b/packages/mpx-cube-ui/src/components/rate/index.mpx
@@ -17,16 +17,17 @@
 <script src="./index.ts" lang="ts"></script>
 
 <style lang="stylus">
-@require "@mpxjs/mpx-cube-ui/src/common/stylus/variable.styl"
+@require "@mpxjs/mpx-cube-ui/src/common/stylus/helper.styl"
 @require "@mpxjs/mpx-cube-ui/src/common/stylus/mixin.styl"
+@require "@mpxjs/mpx-cube-ui/src/common/stylus/theme/components/rate.styl"
   .cube-rate
     list-style: none
     display: inline-flex
     vertical-align: top
     flex-wrap: nowrap
-    max-width: 100%
+    max-width: $var(rate-max-width)
   .cube-rate-justify
-    width: 100%
+    width: $var(rate-justify-width)
     justify-content: space-between
 </style>
 

diff --git a/packages/mpx-cube-ui/src/components/rate/index.ts b/packages/mpx-cube-ui/src/components/rate/index.ts
@@ -13,35 +13,35 @@ createComponent({
   },
   properties: {
     /**
-     * @description 拓展 class 属性，`cube-${type}`，可用于样式覆盖和定制
+     * @description 当前评分
      */
     value: {
       type: Number,
       value: 0
     },
     /**
-     * @description 是否显示遮罩
+     * @description 星星数目
      */
     max: {
       type: Number,
       value: 0
     },
     /**
-     * @description 是否显示遮罩
+     * @description 是否禁止
      */
     disabled: {
       type: Boolean,
       value: false
     },
     /**
-     * @description 文本内容，**微信&web** 支持 `html string` 的文本格式，**支付宝**目前不支持，所以需要自己转，具体见：支付宝 [rich-text文档](https://opendocs.alipay.com/mini/component/rich-text#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)
+     * @description 星星是否均匀分布
      */
     justify: {
       type: Boolean,
       value: false
     },
     /**
-     * @description 是否居中显示
+     * @description 是否半星
      */
     allowHalf: {
       type: Boolean,
@@ -62,6 +62,7 @@ createComponent({
       handler(val) {
         if (val !== this.tempValue) {
           this.tempValue = this.handleNum(val)
+          this.triggerEvent(EVENT_INPUT, { value: this.tempValue })
         }
       }
     }
@@ -85,7 +86,6 @@ createComponent({
       }
     },
     handleMove(e) {
-      console.log('handleMove')
       if (this.disabled) return
 
       if (!isMouseEvent(e)) {
@@ -95,7 +95,6 @@ createComponent({
       }
     },
     handleEnd(e) {
-      console.log('handleEnd')
       if (this.disabled) return
       if ((!isMouseEvent(e) || this.mousePressed)) {
         if (isMouseEvent(e)) {
@@ -110,7 +109,11 @@ createComponent({
     handleNum(num) {
       if (this.allowHalf) {
         const baseNum = Math.ceil(num) - 0.5
-        num = num <= baseNum ? baseNum : baseNum + 0.5
+        if (this.disabled) {
+          num = num < baseNum ? baseNum - 0.5 : baseNum
+        } else {
+          num = num <= baseNum ? baseNum : baseNum + 0.5
+        }
       } else {
         num = Math.ceil(num)
       }

diff --git a/packages/mpx-cube-ui/src/components/rate/rate-item.mpx b/packages/mpx-cube-ui/src/components/rate/rate-item.mpx
@@ -8,24 +8,25 @@
 <script src="./rate-item-index.ts" lang="ts"></script>
 
 <style lang="stylus">
-@require "@mpxjs/mpx-cube-ui/src/common/stylus/variable.styl"
+@require "@mpxjs/mpx-cube-ui/src/common/stylus/helper.styl"
 @require "@mpxjs/mpx-cube-ui/src/common/stylus/mixin.styl"
+@require "@mpxjs/mpx-cube-ui/src/common/stylus/theme/components/rate.styl"
   .cube-rate-item
     position: relative
-    width: 32px
-    flex: 0 1 auto
-    margin-right: 6px
+    width: $var(rate-item-width)
+    flex: $var(rate-item-flex)
+    margin-right: $var(rate-item-margin-right)
     &::after
       content: ""
       display: block
-      padding: 50% 0
+      padding: $var(rate-item-after-padding)
     &:last-child
-      margin-right: 0
+      margin-right: $var(rate-item-last-child-margin-right)
     .cube-rate-item-def
       position: absolute
-      width: 100%
-      height: 100%
-      background-size: 100%
+      width: $var(rate-item-def-width)
+      height: $var(rate-item-def-height)
+      background-size: $var(rate-item-def-background-size)
       background-repeat: no-repeat
       background-position: center
       bg-image("evaluation_icon_star_gray")

diff --git a/packages/mpx-cube-ui/src/components/switch/index.mpx b/packages/mpx-cube-ui/src/components/switch/index.mpx
@@ -0,0 +1,46 @@
+<template>
+  <view
+    class="cube-switch"
+    wx:class="{{ switchClass }}"
+    bindtap="toggleSwitch"
+  >
+    <view class="cube-switch-handle" />
+  </view>
+</template>
+
+<script lang="ts" src="./index.ts"></script>
+
+<style lang="stylus">
+@require "../../common/stylus/helper.styl"
+@require "../../common/stylus/theme/components/switch.styl"
+
+.cube-switch
+  position: relative
+  width: $var(switch-width)
+  height: $var(switch-height)
+  background-color: $var(switch-bgc)
+  border-radius: $var(switch-border-radius)
+  transition: $var(switch-transition)
+
+.cube-switch-handle
+  position: absolute
+  top: $var(switch-handle-top)
+  left: $var(switch-handle-left)
+  width: $var(switch-handle-width)
+  height: $var(switch-handle-height)
+  background-color: $var(switch-handle-bgc)
+  border-radius: $var(switch-handle-border-radius)
+  transition: $var(switch-handle-transition)
+
+.cube-switch-on
+  background-color: $var(switch-bgc-on)
+  .cube-switch-handle
+    left: $var(switch-handle-left-on)
+</style>
+
+<script type="application/json">
+  {
+    "styleIsolation": "shared",
+    "component": true
+  }
+</script>