哈喽~ 各位码友们【vue-plugin-hiprint】应用篇系列文章已公布四篇啦~ 置信大家曾经对根底的应用曾经很分明了；本篇次要讲一讲参数相干性能。如果大家还有什么不分明的，欢送各位留言反馈~

源码链接: https://github.com/CcSimple/vue-plugin-hiprint

前言

本篇围绕以下几点进行论述：

  1. 如何查看以后所有 参数
  2. 如何暗藏/显示/调整 元素参数 及注意事项
  3. 如何查看 参数 可选值
  4. 参数 调整及批改元素原理剖析
  5. 如何自定义/重写 参数

次要波及到的 API 就是 hiprint.setConfig

1.查看所有参数

所有参数其实先是挂载到了全局 window 对象下的 HIPRINT_CONFIG 的。所以咱们想要查看只须要拿到window.HIPRINT_CONFIG即可；在浏览器控制台输出HIPRINT_CONFIG：

至于图中的supportOptions那是还没有tabs分组时的遗留产物。如果感觉tabs分组不好，把tabs删除掉，就能够回到本来模式了。例如：

// text元素移除tabs分组hiprint.setConfig({  text: {    tabs:[]  }})

留神：如果当面板已有元素，那么设置后会应用缓存的参数配置。 此时新拖入一个text元素再次点击它查看就能够了。

2.暗藏/显示/调整 参数

每个参数都是由name和hidden组成的对象，每当点击元素去渲染参数的时候都是顺次渲染的；所以排序和暗藏/显示各个参数也就很容易配置了：

// 配置暗藏text元素的 title(题目)hiprint.setConfig({  text: {    tabs: [      {        name: '根底', // 可调整名称        // 整体替换: 相当于移除所有options, 从新插入新的参数        // replace: true,         options: [          {name: "title", hidden: true}        ]      }    ]  }})

留神：tabs的replace相当于移除所有options，从新插入新的参数；如果想要批改第2个tab，那么须要把他之前的tab也列出来 如:

// 配置暗藏text元素的 title(题目)hiprint.setConfig({  text: {    tabs: [      {        name: '根底', // 可疏忽        options: [] // 必须蕴含这个 options      },      {        name: '款式',      }    ]  }})

3.查看参数 可选值

很多老手小白或者后端大佬（大佬们都是间接上手 vue 的）们不晓得某个参数有哪些值，于是乎在配置provider的时候不怎么写，安顿：

（笔者这里应用的浏览器是Edge）
以表格脚显示参数为例：

  1. 首先点击某个元素选中找到想要查看参数

  1. 鼠标右击这个参数，点击查看

  1. 不出意外的话，能够看到这个参数DOM

OK，就是这么简略。当然对于相熟前端的码友们，不值一提。

4.参数调整及批改元素原理剖析

这一部次要分波及到hiprint元素参数实现源码打包混同后的

  • 首先咱们须要分明参数格局：
  1. 不波及 打印元素款式
  2. 波及 打印元素款式

如下方代码：

// 题目参数：function () {  function t() {    // 参数键（key）：对应 options的key    this.name = "title";   }  // jQuery 创立 DOM  // 此处可能返回参数，能够log查看  return t.prototype.createTarget = function (...args) {     return this.target = $(' <div class="hiprint-option-item hiprint-option-item-row">\n        <div class="hiprint-option-item-label">\n        题目\n        </div>\n        <div class="hiprint-option-item-field">\n        <textarea style="height:50px;" placeholder="请输出题目" class="auto-submit"></textarea>\n        </div>\n    </div>'), this.target;  },   // 获取这个参数的 值  t.prototype.getValue = function () {    var t = this.target.find("textarea").val();    if (t) return t;  },   // 设置这个参数的 值  t.prototype.setValue = function (t) {    this.target.find("textarea").val(t);  },  // 销毁这个参数 (比方点击其余元素的时候，移除这个 DOM)  t.prototype.destroy = function () {    this.target.remove();  }, t;}()

如上方代码，很显著这个title(题目)参数必定是不波及到批改打印元素款式的。外围就是：

  • 指定参数key;
  • 创立参数 DOM;
  • 获取参数值;
  • 设置参数值;
  • 销毁参数 DOM；

那么可想而知，如果某个参数波及到批改打印元素款式；那么它必定会有一个办法来批改对应的打印元素。

咱们再看看波及到批改款式的参数 (旋转角度)代码如下：

function () {  function t() {    this.name = "color";  }  // jQuery 批改元素 款式  // 可想而知，必定会返回对应的 元素对象 和 款式值  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  // 此处可能返回参数，能够log查看  t.prototype.createTarget = function (...args) {    return this.target = $(' <div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        字体色彩\n        </div>\n        <div class="hiprint-option-item-field">\n        <input type="text" class="auto-submit"/>\n        </div>\n    </div>'), 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;}()

看了这两个参数小伙伴们是不是豁然开朗了呢？ 波及到批改元素款式的也就多了个css办法。

参数的大略格局咱们分明了，那么它是怎么触发的呢？

几种形式能够查看元素触发事件形式，置信学习前端的小伙伴必定分明，波及到浏览器调试技巧，这里就不具体论述了.

既然咱们有源码能够查看，那么就间接搜寻吧。 怎么可能疾速搜寻想要的呢？ 找要害信息呗， 认真想了想，如同每一个元素上面都是有 确定、删除 按钮的。 那么可想而知

  • Command/Ctrl + F 输出 确认 搜寻一下试试

看了上图，啊哈哈~ WC原来也不过如此。 所以晓得为什么所有参数都蕴含"auto-submit"这个 class 了吧。

至于代码中i.submitOption()做了些什么，这里就不赘述了。各位小伙伴自行摸索吧~

咱们再来看看如何渲染的各个参数的吧：

原来就是这么回事，循环各个参数调用参数的createTarget,而后setValue。 是不是又又又豁然开朗了呢？

OK、参数这一块大抵原理我想各位应该分明些了吧~ 那么就上手重写个参数试试咯。

5.自定义/重写 参数

其实自定义/重写参数都是一样的，重写其实就是笼罩本来的参数。 自定义就是定义一个不存在的options的key，而后配置到tabs分组中。

  • 示例重写个字体大小参数

创立个 font-size.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 () {    let list = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];    let fontSizeList = '\n            <option value="" >默认</option>';    list.forEach(function (e) {      fontSizeList += '\n            <option value="' + e + '">' + e + 'pt</option>';    })    this.target = $(' <div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        字体大小\n        </div>\n        <div class="hiprint-option-item-field">\n        <select class="auto-submit">        </select>\n        </div>\n    </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;}())

OK，重写好这个参数后，咱们再调用hiprint.setConfig就好了。

import fontSize from "./font-size.js";hiprint.setConfig({  // 加载 自定义/重写 的 参数   optionItems: [    fontSize  ]})

重写 fontSize 参数 功败垂成~

  • 示例自定义个缩放参数

创立个 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 + ')');    }    return null;  },  // 创立 DOM  t.prototype.createTarget = function (t, i, e) { //  t: 元素对象，i: 元素options, e: 元素printElementType    return this.target = $('<div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        缩放\n        </div>\n        <div class="hiprint-option-item-field">\n        <input type="number" step="0.1" min="0.1" max="3" class="auto-submit"/>\n        </div>\n    </div>'), 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;}())

自定义好参数后，咱们在调用hiprint.setConfig的时候，还须要指定这个参数哪些元素可用，这个参数在哪个tab下：

import scale from "./scale.js";hiprint.setConfig({  // 加载 自定义/重写 的 参数   optionItems: [    scale  ],  // text 元素 可用  text: {    tabs: [      {        // name: '测试', // tab名称 可疏忽        options: [] // 必须蕴含 options      },// 当批改第二个 tabs 时,必须把他之前的 tabs 都列举进去.      {        name: '款式', options: [          {            name: 'scale', // 参数 key             after: 'transform', // 自定义参数，插入在 transform 之后            hidden: false          },        ]      }    ],  },})

看到这里，置信各位对 自定义参数 和 重写参数 曾经能够信手拈来了。

源码链接: https://github.com/CcSimple/vue-plugin-hiprint

本篇局部代码可在 src/demo/design 目录下查看

总结

  • 整篇下来难点并不多，老手们须要多多摸索
  • 浏览器调试技巧日常必定都在操作的，如果有不相熟的那么就查阅相干材料并相熟吧~
  • 配合本人的思路把能看到/想到的要害信息点，怎么去疾速定位代码地位
  • 代码抽离细化，日常能想到的还是抽一抽啦~

参数篇到此结束，如有不分明的知识点，大家肯定要学会本人查阅相干材料。

如果还想相熟/理解 【vue-plugin-hiprint】其余相干性能，欢送各位留言探讨。

感觉不错就点个赞再走咯~