关于前端:vuepluginhiprint使用参数篇

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

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

前言

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

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

次要波及到的 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）
以表格脚显示参数为例：

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

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

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

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

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

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

首先咱们须要分明参数格局：

不波及 打印元素款式
波及 打印元素款式

如下方代码：

// 题目参数：
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】其余相干性能，欢送各位留言探讨。

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

关于前端:vuepluginhiprint使用参数篇

前言

1.查看所有参数

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

3.查看参数可选值

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

5.自定义/重写参数

总结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:vuepluginhiprint使用参数篇

前言

1.查看所有参数

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

3.查看参数 可选值

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

5.自定义/重写 参数

总结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

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

3.查看参数可选值

5.自定义/重写参数

发表回复取消回复