【vue-plugin-hiprint】使用-参数篇

站长

2023年03月18日 22:27 · 阅读数 18

哈喽~ 各位码友们😄【vue-plugin-hiprint】使用篇系列文章已发布四篇🎉啦~ 相信大家已经对基础的使用已经很清楚了；本篇主要讲一讲参数相关功能。如果大家还有什么不清楚的，欢迎各位留言反馈~

源码链接: github.com/CcSimple/vu…

前言

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

如何查看当前所有参数
如何隐藏/显示/调整 元素参数 及注意事项
如何查看 参数 可选值
参数 调整及修改元素原理分析
如何自定义/重写 参数

主要涉及到的 API 就是 hiprint.setConfig

1.查看所有参数

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

【vue-plugin-hiprint】使用-参数篇

至于图中的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）以表格脚显示参数为例：

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

【vue-plugin-hiprint】使用-参数篇

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

【vue-plugin-hiprint】使用-参数篇

~~不出意外的话~~，可以看到这个参数DOM

【vue-plugin-hiprint】使用-参数篇

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 输入 确认 搜索一下试试

【vue-plugin-hiprint】使用-参数篇

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

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

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

【vue-plugin-hiprint】使用-参数篇

原来就是这么回事，循环各个参数调用参数的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
          },
        ]
      }
    ],
  },
})

看到这里，相信各位对 自定义参数 和 重写参数 已经可以信手拈来了。

源码链接: github.com/CcSimple/vu…

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

总结

整篇下来难点并不多，新手们需要多多摸索
浏览器调试技巧日常肯定都在操作的，如果有不熟悉的那么就查阅相关资料并熟悉吧~
配合自己的思路把能看到/想到的关键信息点，怎么去快速定位代码位置
代码抽离细化，日常能想到的还是抽一抽啦~

参数篇到此结束，如有不清楚的知识点，大家一定要学会自己查阅相关资料。

如果还想熟悉/了解 【vue-plugin-hiprint】其他相关功能，欢迎各位留言探讨。

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

【vue-plugin-hiprint】使用-参数篇

前言

1.查看所有参数

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

3.查看参数 可选值

4.参数调整及修改元素原理分析

5.自定义/重写 参数

总结

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

3.查看参数可选值

5.自定义/重写参数