跳至主要內容

元素参数重写&新增

参数说明

参数大致可以分为三类.

  1. 元素值参数:
    如 标题,字段名,显示规则等等. 它的值 用于代码 内部处理.
    • 这一类参数 相对是固定的,是框架内置的部分参数. 一般可重写, 比如字体大小扩展跟多选项, 或者用其他 UI 重写.
  2. 元素样式参数:
    如 字体,颜色,对齐等等. 它的值用于 css 样式设置 jquery.css({'样式键name':'样式值value'}).
    • 这一类参数 也是最容易扩展的. 只要 html css 支持,就可以扩展出 更多的 参数. 比如 缩放,变形等等.
  3. 元素函数参数:
    如 格式化函数, 样式函数, 分组函数等等. 它的回调函数值是 内部规定的 在特定场景处理. 需要返回对应的 格式值.
    • 这一类参数 较难扩展. 一般用于 插件 回调 插件对象,用于自定义 参数的处理. 比如 echarts 插件的 echarts渲染函数.

参数的格式说明

原始参数对象:

const colorOption = (function () {
  function t() {
    this.name = "color";
  }
  // 这个参数 属于 第二类 样式参数, 所以需要 一个 css 方法,用于设置样式.
  // 可想而知，肯定会返回对应的 元素对象 和 样式值
  return t.prototype.css = function (t, e) {
    if (t && t.length) {
      if (e) return t.css("color", e), "color:" + e;
      t[0].style.color = "";
    }
    return null;
  }, 
  // jQuery 创建 DOM
  t.prototype.createTarget = function (printElement, options, printElementType) {
    this.target = $(`
      <div class="hiprint-option-item hiprint-option-item-row">
        <div class="hiprint-option-item-label">字体颜色</div>
        <div class="hiprint-option-item-field">
          <input type="text" class="auto-submit"/>
        </div>
      </div>
    `);
    return this.target;
  }, 
  // 获取这个参数的 值
  t.prototype.getValue = function () {
    var t = this.target.find("input").val();
    if (t) return t.toString();
  }, 
  // 设置这个参数的 值
  t.prototype.setValue = function (t) {
    this.target.find("input").minicolors({
      defaultValue: t || "",
      theme: "bootstrap"
    }), this.target.find("input").val(t);
  }, 
  // 销毁这个参数 (比如点击其他元素的时候，移除这个 DOM)
  t.prototype.destroy = function () {
    this.target.remove();
  }, t;
})()

转为ES6对象格式:

const colorOption = function () {
  class ColorOption {
    // 唯一的 参数 键. 如果重复 后面的将覆盖前面的
    public name = "color";
    constructor() {}
    
    target = null;
    
    css(t,e) {
      if (t && t.length) {
        if (e) return t.css("color", e), "color:" + e;
        t[0].style.color = "";
      }
      return null;
    }
    createTarget(printElement, options, printElementType) {
      this.target = $(`
      <div class="hiprint-option-item hiprint-option-item-row">
        <div class="hiprint-option-item-label">字体颜色</div>
        <div class="hiprint-option-item-field">
          <input type="text" class="auto-submit"/>
        </div>
      </div>
    `);
      return this.target;
    }
    // 获取这个参数的 值
    getValue() {
      var t = this.target.find("input").val();
      if (t) return t.toString();
    }
    // 设置这个参数的 值
    setValue(t) {
      this.target.find("input").minicolors({
        defaultValue: t || "",
        theme: "bootstrap"
      }), this.target.find("input").val(t);
    }
    // 销毁这个参数 (比如点击其他元素的时候，移除这个 DOM)
    destroy() {
      this.target.remove();
    }
  }
  return function() {
    return new ColorOption()
  };
}

重写参数

重写参数: 调整现有的参数的UI或者参数值做. 比如 字体大小

示例: 调整 字体大小参数的UI和值

新建一个 fontSize.js

export default (function () {
  function t() {
    this.name = "fontSize"; // 重写的参数 key
  }
  // 涉及修改元素样式， 添加一个 css 方法
  return t.prototype.css = function (t, e) {
    if (t && t.length) {
      if (e) return t.css("font-size", e + "pt"), "font-size:" + e + "pt";
      t[0].style.fontSize = "";
    }
    return null;
  },
  // 创建 DOM
  t.prototype.createTarget = function (printElement, options, printElementType) {
    // !! 把字体改成 更多选项
    let list = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
    let fontSizeList = '<option value="" >默认</option>';
    list.forEach(function (e) {
      fontSizeList += '<option value="' + e + '">' + e + 'pt</option>';
    })
    this.target = $(`
      <div class="hiprint-option-item hiprint-option-item-row">
        <div class="hiprint-option-item-label">字体大小</div>
        <div class="hiprint-option-item-field">
          <select class="auto-submit"></select>
        </div>
      </div>
    `);
    this.target.find(".auto-submit").append($(fontSizeList));
    return this.target;
  },
  // 获取值
  t.prototype.getValue = function () {
    var t = this.target.find("select").val();
    if (t) return parseFloat(t.toString());
  },
  // 设置值
  t.prototype.setValue = function (t) {
    t && (this.target.find('option[value="' + t + '"]').length || this.target.find("select").prepend('<option value="' + t + '" >' + t + "</option>"));
    this.target.find("select").val(t);
  },
  // 销毁 DOM
  t.prototype.destroy = function () {
    this.target.remove();
  }, t;
}())

温馨提示

可以改成 ES6 写法: 传参数, 动态创建 是选择框,还是 输入框等等.

注册重写的参数:

import {hiprint} from 'sv-print';
// import {hiprint} from '@sv-print/hiprint';
// 不 import, hiprint 也挂载到了全局

import fontSize from './fontSize.js';

hiprint.setConfig({
  optionItems: [
    fontSize,
  ]
})

进阶版重写参数

ES6写法: 传参数, 动态创建 是选择框,还是 输入框等等.

新建 fontSizeAdv.js

export const fontSizeAdv = (options) => {
  class FontSizeOption {
    // 唯一的 参数 键. 如果重复 后面的将覆盖前面的
    public name = 'fontSize';
    isInput = false;

    constructor(options) {
      isInput = options.isInput || false;
    }

    target = null;

    createTarget(printElement, options, printElementType) {
      const input = `<input type="number" class="auto-submit"/>`;
      const select = `<select class="auto-submit"></select>`;
      this.target = $(`
      <div class="hiprint-option-item hiprint-option-item-row">
        <div class="hiprint-option-item-label">字体大小</div>
        <div class="hiprint-option-item-field">
          ${ this.isInput ? input : select }
        </div>
      </div>
    `);
      // 不是输入框, 就插入 select option
      if (!this.isInput) {
        let list = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
        let fontSizeList = '<option value="" >默认</option>';
        list.forEach(function(e) {
          fontSizeList += '<option value="' + e + '">' + e + 'pt</option>';
        });
        this.target.find('.auto-submit').append($(fontSizeList));
      }
      // 别忘了 getValue, setValue, 也需要做对应调整
      return this.target;
    }

    // 获取这个参数的 值
    getValue() {
      var t = '';
      if (this.isInput) {
        t = this.target.find('input').val();
      } else {
        t = this.target.find('select').val();
      }
      if (t) return parseFloat(t.toString());
    }

    // 设置这个参数的 值
    setValue(t) {
      if (this.isInput) {
        return t && this.target.find('input').val(t);
      }
      t && (this.target.find('option[value="' + t + '"]').length || this.target.find('select').prepend('<option value="' + t + '" >' + t + '</option>'));
      this.target.find('select').val(t);
    }

    // 销毁这个参数 (比如点击其他元素的时候，移除这个 DOM)
    destroy() {
      this.target.remove();
    }
  }

  return function () { 
    return new FontSizeOption(options) 
  };
};

注册重写的参数:

import {hiprint} from 'sv-print';
// import {hiprint} from '@sv-print/hiprint';
// 不 import, hiprint 也挂载到了全局

import fontSizeAdv from './fontSizeAdv.js';

hiprint.setConfig({
  optionItems: [
    fontSizeAdv({isInput: true}), // 使用输入框
    // fontSizeAdv(), // 默认使用选择框
  ]
})

新增参数

新增参与重写参数一样, 区别在于 新增参数, 需要设置 新参数适用于哪类打印元素.

示例: 新增 参数: 缩放

创建文件 scale.js

export default (function () {
  function t() {
    // json模板 options 对应键值 key
    this.name = "scale";
  }
  // 涉及修改元素样式， 添加一个 css 方法
  // t: 元素对象， e 参数值
  return t.prototype.css = function (t, e) {
    if (t && t.length) {
      if (e) return t.css({
        transform: "scale(" + e + ")",
        "transform-origin": "0 0",
      });
    }
    return null;
  },
  // 创建 DOM
  t.prototype.createTarget = function (printElement, options, printElementType) {
    this.target = $(`
      <div class="hiprint-option-item">
        <div class="hiprint-option-item-label hiprint-option-item-row">缩放</div>
        <div class="hiprint-option-item-field">
          <input type="number" value="1" step="0.1" min="0.1" max="3" class="auto-submit"/>
        </div>
      </div>
    `);
    return  this.target;
  },
  // 获取值
  t.prototype.getValue = function () {
    var t = this.target.find("input").val();
    if (t) return parseFloat(t.toString());
  },
  // 设置值
  t.prototype.setValue = function (t) { //  t: options 对应键的值
    this.target.find("input").val(t);
  },
  // 销毁 DOM
  t.prototype.destroy = function () {
    this.target.remove();
  }, t;
}())

注册新的参数, 并指定适用元素:

import {hiprint} from 'sv-print';
// import {hiprint} from '@sv-print/hiprint';
// 不 import, hiprint 也挂载到了全局

import scale from './scale.js';

hiprint.setConfig({
  optionItems: [
    scale,
  ],
  // 缩放参数 适用于哪些元素
  // 文本元素
  text: {
    tabs: [
      {},
      // 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
      {
        name: '样式', options: [
          {
            name:'scale',
            before: 'color', // 自定义参数，插入在 color 之前
            hidden: false
          },
        ]
      },
    ],
  },
  // 图片元素
  image: {
    tabs: [
      {},
      // 当修改第二个 tabs 时,必须把他之前的 tabs 都列举出来.
      {
        name: '样式', options: [
          {
            name:'scale',
            before: 'color', // 自定义参数，插入在 color 之前
            hidden: false
          },
        ]
      },
    ],
  }
})
最近更新
贡献者: Canim