@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27

package/dist/components-harmony-ets/radio.ets

@@ -0,0 +1,225 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
+  TaroElement,
+  TaroAny,
+  TaroEvent
+} from '@tarojs/runtime'
+
+import { createNode } from './render'
+import TaroComponentWrapper from './base'
+import { AttributeManager } from './utils/AttributeManager'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { createTaroEvent } from './utils/events'
+import { FlexManager } from './utils/FlexManager'
+import { shouldBindEvent, getNormalAttributes, getNodeThresholds, bindAnimation } from './utils/helper'
+
+import type { TaroRadioGroupElement, TaroRadioElement } from './element'
+import type { TaroStyleType, HarmonyType } from '@tarojs/runtime'
+
+interface RadioOptions {
+  group: string
+  value: string
+}
+interface RadioAttrs {
+  radioStyle?: HarmonyType.RadioStyle
+  themeStyles?: boolean
+}
+
+@Extend(Radio)
+function style (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Extend(Radio)
+function radioAttr (attr: RadioAttrs) {
+  .radioStyle(attr.radioStyle)
+  .themeStyles(attr.themeStyles)
+}
+
+function getAttributes (node: TaroRadioElement): RadioAttrs {
+  const radioAttrs: RadioAttrs = {}
+  radioAttrs.radioStyle = {
+    checkedBackgroundColor: node._attrs.color || '#1aad19'
+  }
+  radioAttrs.themeStyles = !!node._attrs.disabled
+  return radioAttrs
+}
+
+@Extend(Radio)
+function themeStyles(isDisabled: boolean) {
+  .opacity(isDisabled ? 0.4 : 1)
+}
+
+@Component
+export struct TaroRadio {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroRadioElement
+
+  @State checked: boolean = false
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+
+    this.checked = !!this.node._attrs.checked
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Stack() {
+        Row() {
+          Radio({
+            group: this.node.group || this.node.parentNode?._nid || '',
+            value: this.node._attrs.value || '',
+          })
+            .checked(this.checked)
+            .defaultEvent()
+            .style(getNormalAttributes(this.node))
+            .radioAttr(getAttributes(this.node))
+            .onChange((value: boolean) => {
+              if (!!this.node._attrs.disabled) {
+                // FIXME 找下文档是否有强制刷新方法
+                this.checked = !this.checked
+                this.checked = !this.checked
+              } else {
+                this.checked = value
+                if (this.checked) {
+                  const event: TaroEvent = createTaroEvent('change', { detail: { value: this.node._attrs.value } }, this.node)
+                  eventHandler(event, 'change', this.node)
+                }
+              }
+            })
+          Text(this.node.textContent)
+            .textAlign(TextAlign.Center)
+            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+        }
+        .onClick(() => {
+          if (!this.checked) {
+            this.checked = !this.checked
+          }
+        })
+      }
+    }
+  }
+}
+
+@Extend(Flex)
+function radioGroupAttrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+
+@Component
+export struct TaroRadioGroup {
+  nodeInfoMap: TaroAny = {}
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  @ObjectLink node: TaroRadioGroupElement
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+    const childList = this.node.getElementsByTagName<TaroRadioElement>('RADIO')
+    childList.forEach(element => {
+      element.group = this.node._attrs.name || this.node._nid
+    })
+    // 阻止事件冒泡传递上去
+    this.node.addEventListener('change', (e: TaroEvent) => e.stopPropagation())
+  }
+
+  // Element使用的获取器
+  getValue (): string | undefined {
+    const childList = this.node.getElementsByTagName<TaroRadioElement>('RADIO')
+    for (let i = 0; i < childList.length; i++) {
+      if (childList[i]._instance.checked) {
+        return childList[i]._attrs.value
+      }
+    }
+    return undefined
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      Flex(FlexManager.flexOptions(this.node)) {
+        ForEach(this.node.childNodes, (item: TaroElement) => {
+          createNode(item)
+        }, (item: TaroElement) => item._nid)
+      }
+      .radioGroupAttrs(getNormalAttributes(this.node))
+      .defaultEvent()
+      .visibleChangeEvent()
+    }
+  }
+}

package/dist/components-harmony-ets/richText.ets

@@ -0,0 +1,97 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo, TaroAny } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { getNodeThresholds, getNormalAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+
+import type { RichTextProps } from '@tarojs/components/types/RichText'
+import type { TaroRichTextElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+@Extend(RichText)
+function attrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Component
+export default struct TaroRichText {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroRichTextElement
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+  
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  generateText (): string {
+    return parseHtmlNode(this.node._attrs.nodes || '')
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      RichText(this.generateText())
+        .attrs(getNormalAttributes(this.node))
+        .defaultEvent()
+        .visibleChangeEvent()
+    }
+  }
+}
+
+
+// 将nodeTree转换成harmony需要的string结构
+function nodeToHtml(node: RichTextProps.Text | RichTextProps.HTMLElement): string {
+  if (node.type === 'text') {
+    return node.text;
+  }
+  if (node.attrs) {
+    const attributes = Object.entries(node.attrs)
+      .map((item: [string, string]) => `${item[0]}="${item[1]}"`)
+      .join(' ');
+    const childrenHtml: string = typeof node.children === 'string' ? node.children : (node.children || []).map((child: RichTextProps.Text | RichTextProps.HTMLElement) => nodeToHtml(child)).join('');
+    return `<${node.name}${attributes ? ' ' + attributes : ''}>${childrenHtml}</${node.name}>`;
+  }
+  return ''
+}
+
+function parseHtmlNode (nodes: Array<RichTextProps.Text | RichTextProps.HTMLElement> | string) {
+  return typeof nodes === 'string' ? nodes: `<div>${nodes.map(node => nodeToHtml(node)).join('')}</div>`
+}

package/dist/components-harmony-ets/scrollView.ets

@@ -0,0 +1,199 @@
+import { bindScrollTo, bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
+  TaroEvent, TaroAny } from '@tarojs/runtime'
+
+import { createNode } from './render'
+import TaroComponentWrapper from './base'
+import { TOUCH_EVENT_MAP } from './utils/constant/event'
+import { createTaroEvent } from './utils/events'
+import { getNodeThresholds, getNormalAttributes, shouldBindEvent, bindAnimation } from './utils/helper'
+
+import type { TaroScrollViewElement, TaroElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+interface ScrollViewAttrs {
+  scrollBar: BarState
+}
+interface ScrollViewCurrentOffset {
+  xOffset: number
+  yOffset: number
+}
+interface ScrollViewEvent {
+  deltaX: number
+  deltaY: number
+  scrollLeft: number
+  scrollTop: number
+  scrollWidth: number
+  scrollHeight: number
+}
+
+@Extend(Row)
+function rowAttrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Extend(Column)
+function columnAttrs (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+
+function getAttributes (node: TaroScrollViewElement): ScrollViewAttrs {
+  const _attrs = node._attrs
+  const scrollAttrs: ScrollViewAttrs = {
+    scrollBar: typeof _attrs.showScrollbar === 'boolean'
+      ? _attrs.showScrollbar ? BarState.On : BarState.Off
+      : BarState.Auto
+  }
+  return scrollAttrs
+}
+
+
+@Component
+export default struct TaroScrollView {
+  nodeInfoMap: TaroAny = {}
+
+  wrapper?: Area
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  scroller: Scroller = new Scroller()
+
+  @ObjectLink node: TaroScrollViewElement
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+    // 绑定动画
+    bindAnimation(this.node)
+    bindScrollTo(this.node, this)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onTouch(shouldBindEvent((e: TouchEvent) => eventHandler(e, TOUCH_EVENT_MAP.get(e.type), this.node), this.node, TOUCH_EVENT_MAP.values()))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  @Styles defaultContainerEvent () {
+    .onAreaChange(shouldBindEvent((areaResult: Area) => {
+      this.wrapper = areaResult
+    }, this.node, ['scroll', 'scrollstart', 'scrollend']))
+  }
+
+
+  handleScrollEvent (eventName = 'scroll', xOffset?: number, yOffset?: number) {
+    const currentOffset: ScrollViewCurrentOffset = this.scroller.currentOffset()
+    const currentXOffset = currentOffset.xOffset
+    const currentYOffset = currentOffset.yOffset
+    const value: ScrollViewEvent = {
+      deltaX: vp2px(xOffset),
+      deltaY: vp2px(yOffset),
+      scrollLeft: vp2px(currentXOffset),
+      scrollTop: vp2px(currentYOffset),
+      scrollWidth: vp2px(Number(this.wrapper?.width)),
+      scrollHeight: vp2px(Number(this.wrapper?.height)),
+    }
+    const event: TaroEvent = createTaroEvent(eventName, { detail: value }, this.node)
+    eventHandler(event, eventName, this.node)
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      // Copy 额外增加visibleChangeEvent
+      if (this.node._attrs.scrollX) {
+        Scroll(this.scroller) {
+          Row() {
+            ForEach(this.node.childNodes, (item: TaroElement) => {
+              createNode(item)
+            }, (item: TaroElement) => item._nid)
+          }
+          .rowAttrs(getNormalAttributes(this.node))
+          .width(null)
+          .defaultContainerEvent()
+        }
+        .flexGrow(getNormalAttributes(this.node).flexGrow)
+        .scrollable(ScrollDirection.Horizontal)
+        .scrollBar(getAttributes(this.node).scrollBar)
+        .defaultEvent()
+        .onScroll(shouldBindEvent(() => { this.handleScrollEvent('scroll') }, this.node, ['scroll']))
+        .onScrollStart(shouldBindEvent(() => { this.handleScrollEvent('scrollstart') }, this.node, ['scrollstart']))
+        .onScrollStop(shouldBindEvent(() => { this.handleScrollEvent('scrollend') }, this.node, ['scrollend']))
+        .visibleChangeEvent()
+      } else {
+        Scroll(this.scroller) {
+          Column() {
+            ForEach(this.node.childNodes, (item: TaroElement) => {
+              createNode(item)
+            }, (item: TaroElement) => item._nid)
+          }
+          .columnAttrs(getNormalAttributes(this.node))
+          .height(null)
+          .defaultContainerEvent()
+        }
+        .flexGrow(getNormalAttributes(this.node).flexGrow)
+        .scrollable(ScrollDirection.Vertical)
+        .scrollBar(getAttributes(this.node).scrollBar)
+        .defaultEvent()
+        .onScroll(shouldBindEvent(() => { this.handleScrollEvent('scroll') }, this.node, ['scroll']))
+        .onScrollStart(shouldBindEvent(() => { this.handleScrollEvent('scrollstart') }, this.node, ['scrollstart']))
+        .onScrollStop(shouldBindEvent(() => { this.handleScrollEvent('scrollend') }, this.node, ['scrollend']))
+        .visibleChangeEvent()
+      }
+    }
+  }
+}

package/dist/components-harmony-ets/slider.ets

@@ -0,0 +1,159 @@
+import { bindInstanceToNode, eventHandler, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, initComponentNodeInfo,
+  TaroEvent, TaroAny } from '@tarojs/runtime'
+
+import TaroComponentWrapper from './base'
+import { createTaroEvent } from './utils/events'
+import { getNodeThresholds, shouldBindEvent, getNormalAttributes } from './utils/helper'
+
+import type { TaroSliderElement } from './element'
+import type { TaroStyleType } from '@tarojs/runtime'
+
+interface SliderOptions {
+  min?: number
+  max?: number
+  value?: number
+  step?: number
+  style?: SliderStyle
+  direction?: Axis
+}
+interface SliderAttrs {
+  selectedColor?: ResourceColor
+  trackColor?: ResourceColor
+  trackThickness?: Length
+  blockColor?: ResourceColor
+}
+interface SliderParams {
+  width: string
+}
+
+@Extend(Slider)
+function style (style: TaroStyleType) {
+  .id(style.id)
+  .key(style.id)
+  .padding(style.padding)
+  .margin(style.margin)
+  .width(style.width)
+  .height(style.height)
+  .constraintSize(style.constraintSize)
+  .flexGrow(style.flexGrow)
+  .flexShrink(style.flexShrink)
+  .flexBasis(style.flexBasis)
+  .alignSelf(style.alignSelf)
+  .backgroundColor(style.backgroundColor)
+  .backgroundImage(style.backgroundImage, style.backgroundRepeat)
+  .backgroundImageSize(style.backgroundImageSize)
+  .rotate(style.rotate)
+  .scale(style.scale)
+  .translate(style.translate)
+  .transform(style.transform)
+  .borderStyle(style.borderStyle)
+  .borderWidth(style.borderWidth)
+  .borderColor(style.borderColor)
+  .borderRadius(style.borderRadius)
+  .linearGradient(style.linearGradient)
+  .zIndex(style.zIndex)
+  .opacity(style.opacity)
+  .clip(style.clip)
+}
+
+@Extend(Slider)
+function attrs (attr: SliderAttrs) {
+  .selectedColor(attr.selectedColor)
+  .trackColor(attr.trackColor)
+  .trackThickness(attr.trackThickness)
+  .blockColor(attr.blockColor)
+}
+
+function getAttributes (node: TaroSliderElement): SliderAttrs {
+  const _attrs = node._attrs
+  const sliderAttrs: SliderAttrs = {}
+  sliderAttrs.selectedColor = _attrs.activeColor || _attrs.selectedColor || '#1aad19'
+  sliderAttrs.trackColor = _attrs.backgroundColor || _attrs.color || '#e9e9e9'
+  sliderAttrs.trackThickness = _attrs.blockSize
+  sliderAttrs.blockColor = _attrs.blockColor || '#ffffff'
+  return sliderAttrs
+}
+
+@Extend(Slider)
+function themeStyles(isDisabled: boolean) {
+  .opacity(isDisabled ? 0.4 : 1)
+}
+
+@Component
+export default struct TaroSlider {
+  nodeInfoMap: TaroAny = {}
+
+  @ObjectLink node: TaroSliderElement
+
+  @State value: number = 0
+
+  @Styles visibleChangeEvent () {
+    .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+  }
+
+  aboutToAppear () {
+    initComponentNodeInfo(this, this.node)
+    bindInstanceToNode(this.node, this)
+
+    this.value = Number(this.node._attrs.value || 0)
+  }
+
+  @Styles defaultEvent () {
+    .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
+    .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, res => {
+      const eventResult: TaroAny = res.eventResult
+      this.nodeInfoMap[this.node._nid].areaInfo = eventResult[1]
+    }))
+  }
+
+  @Builder createSlider () {
+    Slider({
+      min: Number(this.node._attrs.min || 0),
+      max: Number(this.node._attrs.max || 100),
+      value: this.value,
+      step: Number(this.node._attrs.step || 1),
+      style: SliderStyle.OutSet,
+      direction: Axis.Horizontal
+    })
+      .defaultEvent()
+      .style(getNormalAttributes(this.node))
+      .attrs(getAttributes(this.node))
+      .width(!!this.node._attrs.showValue ? '90%' : '100%')
+      .themeStyles(!!this.node._attrs.disabled)
+      .onChange((value: number, mode: SliderChangeMode) => {
+        if (!!this.node._attrs.disabled) {
+          if (mode === SliderChangeMode.End) {
+            // FIXME 找下文档是否有强制刷新方法
+            this.value = this.value + 0.01
+            this.value = this.value - 0.01
+          }
+        } else {
+          this.value = value
+          if (mode === SliderChangeMode.End) {
+            const event: TaroEvent = createTaroEvent('change', { detail: { value: this.value } }, this.node)
+            eventHandler(event, 'change', this.node)
+          } else if (mode === SliderChangeMode.Moving) {
+            const event: TaroEvent = createTaroEvent('changing', { detail: { value: this.value } }, this.node)
+            eventHandler(event, 'changing', this.node)
+          }
+        }
+      })
+      .visibleChangeEvent()
+  }
+
+  build() {
+    TaroComponentWrapper({ node: this.node }) {
+      if (!!this.node._attrs.showValue) {
+        Row() {
+          this.createSlider()
+          Text(Number(this.value).toFixed(0))
+            .width('10%')
+            .textAlign(TextAlign.Center)
+            .opacity(!!this.node._attrs.disabled ? 0.4 : 1)
+        }
+      } else {
+        this.createSlider()
+      }
+    }
+  }
+}