@minix-iot/ui/dist/packages/step/step.jsx

基于Vue的移动端轻量级UI组件库

import { Namespace } from '../../utils/namespace';
import Icon from '../icon/icon.jsx'

const namespace = Namespace.Create('step');

export default {
  name: namespace.name,
  props:{
    title:{
      type: String
    },
    desc:{
      type:String
    },
    timestamp:{
      type: String
    }
  },
  computed: {
    cls() {
      return namespace.derive();
    },
    contentCls(){
      return namespace.derive('content')
    },
    titleCls(){
      return namespace.derive('title',[
        (this.isActive || this.isFinished) && this.$parent.theme
      ])
    },
    titleStyle(){
      const res = {}
      const size = Number.parseInt(this.$parent.titleFontSize)
      if(!Number.isNaN(size)){
        res.lineHeight = res.fontSize =  `${size}px`
      }
      return res
    },
    descCls(){
      return namespace.derive('desc')
    },
    timestampCls(){
      return namespace.derive('timestamp')
    },
    iconContainerCls(){
      return namespace.derive('icon-container')
    },
    iconCls(){
      return namespace.derive('icon',[
        (this.isActive || this.isFinished) && this.$parent.theme,
        {
          horizental: this.$parent.isHorizental
        }
      ])
    },
    lineCls(){
      return namespace.derive('line',{
        horizental: this.$parent.isHorizental
      })
    },
    index(){
      return this.$parent.$children.indexOf(this)
    },
    isInactive(){
      return !(this.isActive || this.isFinished)
    },
    isActive(){
      return this.$parent.active === this.index
    },
    isFinished(){
      return this.$parent.active > this.index
    },
    containerStyle(){
      const style ={}
      const size = Number.parseInt(this.$parent.titleFontSize)
      if(!Number.isNaN(size)){
        style.top = `${size / 2}px`
      }
      return style
    },
    lineStyle(){
      const style ={}
      const size = Number.parseInt(this.$parent.titleFontSize)
      if(!Number.isNaN(size)){
        style.top = `${size / 2}px`
      }
      return style
    }
  },
  data(){
    return {
      inited:false
    }
  },
  mounted(){
    this.$nextTick(()=>this.inited = true)
  },
  methods:{
    onClick(){
      this.$parent.onClickStep?.(this.index)
    }
  },
  render() {
    const renderContent = ()=>{
      if(this.$slots.content){
        return this.$slots.content
      }
      return [renderTitle(),renderDesc(),renderTimestamp()]
    }

    const renderTitle = ()=>(
      <div class={this.titleCls} style={this.titleStyle}>
        {this.$slots.default || this.title}
      </div>
    )

    const renderDesc = ()=>{
      if(this.$slots.desc){
        return this.$slots.desc
      }
      return this.desc && <div class={this.descCls}>{this.desc}</div>
    }

    const renderTimestamp = ()=>{
      if(this.$slots.timestamp){
        return this.$slots.timestamp
      }
      return this.timestamp && <div class={this.timestampCls}>{this.timestamp}</div>
    }

    const renderIcon = ()=>{
      const {activeIcon, inactiveIcon, finishedIcon, activeColor,inActiveColor,iconPrefix, theme} = this.$parent.$props
      if(this.isInactive && inactiveIcon){
        return <Icon name={inactiveIcon} color={inActiveColor} class-prefix={iconPrefix}  size="10"/>
      }
      if(this.isActive && activeIcon){
        return <Icon name={activeIcon} theme={theme} color={activeColor} class-prefix={iconPrefix}  size="10"/>
      }
      if(this.isFinished && finishedIcon){
        return <Icon name={finishedIcon} theme={theme} color={activeColor} class-prefix={iconPrefix}  size="10"/>
      }
      return <div class={this.iconCls}></div>
    }

    return (
      <div class={this.cls} onClick={this.onClick}>
        <div class={this.contentCls}>
            {renderContent()}
        </div>
        <div class={this.iconContainerCls} style={this.containerStyle}>
          {renderIcon()}
        </div>
        <div class={this.lineCls} style={this.lineStyle}></div>
      </div>
    )
  }
}