@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();
  });

Package Sidebar

Install

npm i @ctmobile/ui-fontsizesetting-sd

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

17.6 kB

Total Files

8

Last publish

Collaborators

  • playerljc