t-digital-gauge2 v0.0.16

t-digital-gauge 说明

• 个人作品，纯 js 编写 canvas 实现
• 已经修复不可正常使用的问题
• 如果好用，点个赞哟

 t-digital-gauge2对上一个版本进行了完全重写
 上一代版本是临时版本，建议废弃
 绘制的重原理上进行了重新实现
 支持更多参数

安装

npm install t-digital-gauge2 -S

使用

      import { Knob, Swtich, DigitalGauge } from 't-digital-gauge2'
      let knobBOX = document.getElementById('knob')
      let swtichBOX = document.getElementById('swtich')
      let digitalgaigeBOX = document.getElementById('digitalgaige')

      let options={}    //option 是可选参数，内容为下面的配置项

      let knob = new Knob(knobBOX,options)
      let swtich = new Swtich(swtichBOX,options)
      let digitalgaige = new DigitalGauge(digitalgaigeBOX,options)

      setInterval(() => {
        digitalgaige.value = Math.random() * 100
      }, 2000)

SSR(服务端渲染)

  由于库使用到了document进行节点创建，故在服务端渲染的情况下，如下使用  下面为nextjs，nuxt中使用类似
  // import { DigitalGauge } from 't-digital-gauge2'
  function getDigitalGauge() {
    return process.browser ? require('t-digital-gauge2').DigitalGauge : function () { }
  }
  export default () => {
    useEffect(() => {
      const DigitalGauge = getDigitalGauge()
      const div = document.getElementById('digitalgauge')
      new DigitalGauge(div, { value: 50 })
    }, [])
    return <>
      <h1>这是demo</h1>
      <div id='digitalgauge' style={{ width: 200, height: 200, backgroundColor: "pink" }}></div>
    </>
  }

补充

        三个组件均提供 resize   destroy  方法，用于重新计算尺寸以及卸载组件

        组件没有使用双向绑定，但是通过setter对部分属性进行拦截
        比如 DigitalGauge
              value errorMsg  maxValue minValue time unitTitle title valueSuffix
            Swtich
              value errorMsg
            Knob
              value errorMsg
        上面经过拦截的属性，修改会即时生效

dist

  删除对moment  dayjs的依赖

配置项（option）

knob

swtich

digital-gauge

demo