diff --git a/example/app.mpx b/example/app.mpx index c8d1ffc..dcec318 100644 --- 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" ] } diff --git a/example/common/config.ts b/example/common/config.ts index b22eb4b..c90bdca 100644 --- 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 index e05c859..9a61b0e 100644 --- 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 @@ + + 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 new file mode 100644 index 0000000..429a22e --- /dev/null +++ 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 new file mode 100644 index 0000000..030d0e1 --- /dev/null +++ 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 index 78b3fb1..18259cf 100644 --- a/packages/mpx-cube-ui/src/components/rate/index.mpx +++ b/packages/mpx-cube-ui/src/components/rate/index.mpx @@ -17,16 +17,17 @@ diff --git a/packages/mpx-cube-ui/src/components/rate/index.ts b/packages/mpx-cube-ui/src/components/rate/index.ts index ba0cd88..6091d7c 100644 --- 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 index 8e9a443..101c085 100644 --- 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 @@ + + diff --git a/packages/mpx-cube-ui/src/components/switch/index.ts b/packages/mpx-cube-ui/src/components/switch/index.ts new file mode 100644 index 0000000..841e53b --- /dev/null +++ b/packages/mpx-cube-ui/src/components/switch/index.ts @@ -0,0 +1,43 @@ +import { createComponent } from '../../common/helper/create-component' + +createComponent({ + properties: { + value: { + type: Boolean, + value: false + }, + disabled: { + type: Boolean, + value: false + } + }, + data: { + isOn: false + }, + computed: { + switchClass() { + return { + 'cube-switch': true, + 'cube-switch-on': this.isOn, + [`cube-switch-${this.themeType}`]: this.themeType + } + } + }, + watch: { + value: { + handler(newVal) { + this.isOn = newVal + }, + immediate: true + } + }, + methods: { + toggleSwitch() { + if (this.disabled) return + const newValue = !this.isOn + this.isOn = newValue + this.triggerEvent('change', { value: newValue }) + this.triggerEvent('input', { value: newValue }) + } + } +})