@ctmobile/ui-fontsizesetting-sd

    1.0.1 • Public • Published

    FontSizeSetting

    基本布局

    常见的布局如下:

    
    
    • ct-fontsizesetting - 代表是一个fontsizesetting组件

    初始化

    
      import FontSizeSetting from '@ctmobile/ui-fontsizesetting';
      const fontsizesetting = FontSizeSetting(el,{
        min: '0',
        max: '100',
        setp: '1',
        value: '33.3',
      });
    
    

    例子

    html

    
      <div style="margin-top:10px;">
        设置值:<input type="number" maxlength="3" id="setCurValue"><br>
        当前值:
      </div>
      <p style="font-size: .7rem" id="font">我是一个粉刷匠</p>
    
    

    js

    
      import FontSizeSetting from '@ctmobile/ui-fontsizesetting/fontsizesetting';
      import '@ctmobile/ui-fontsizesetting/fontsizesetting.less';
      import '@ctmobile/ui-fontsizesetting/themes/default/fontsizesetting.less';
    
      const fontDom = $('#font')[0];
      const curValueDom = $('#setCurValue')[0];
      const baseRem = 0.7, baseValue = 33.3;
    
      curValueDom.addEventListener('input', () => {
        fontSizeSetting.setValue(curValueDom.value);
      });
    
      const fontSizeSetting = FontSizeSetting($('#ct-fontsizesetting-demo')[0], {
        min: '0',
        max: '100',
        setp: '1',
        value: '33.3',
      });
      fontSizeSetting.on('change', (value) => {
        let val = parseInt(value);
        if (val === 0) {
          val = 1;
        }
        fontDom.style.fontSize = `${(value * baseRem / baseValue)}rem`;
        $('#curValue')[0].innerText = fontSizeSetting.getValue();
      });
    
    

    方法

    setMin(min) - 设置最小值

    • min-number 最小值

    setMax(max) - 设置最大值

    • setMax-number 最大值

    setSetp(step) - 设置步进

    • step-number 最步进

    setValue(value) - 设置当前值

    • value-number 当前值

    getValue() - 获取当前值

    on(type, handler) - 注册事件

    • type-string 注册事件的类型,包括[change]
    • handler-Function 注册事件的回调函数

    事件

    名称 说明
    change 值发生改变的时候出发
    
      import FontSizeSetting from '@ctmobile/ui-fontsizesetting/fontsizesetting';
      import '@ctmobile/ui-fontsizesetting/fontsizesetting.less';
      import '@ctmobile/ui-fontsizesetting/themes/default/fontsizesetting.less';
    
      const fontDom = $('#font')[0];
      const curValueDom = $('#setCurValue')[0];
      const baseRem = 0.7, baseValue = 33.3;
    
      curValueDom.addEventListener('input', () => {
        fontSizeSetting.setValue(curValueDom.value);
      });
    
      const fontSizeSetting = FontSizeSetting($('#ct-fontsizesetting-demo')[0], {
        min: '0',
        max: '100',
        setp: '1',
        value: '33.3',
      });
      fontSizeSetting.on('change', (value) => {
        let val = parseInt(value);
        if (val === 0) {
          val = 1;
        }
        fontDom.style.fontSize = `${(value * baseRem / baseValue)}rem`;
        $('#curValue')[0].innerText = fontSizeSetting.getValue();
      });
    
    

    Install

    npm i @ctmobile/ui-fontsizesetting-sd

    DownloadsWeekly Downloads

    5

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    17.6 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar