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

头像
不简说
     四川
    阅读 8 分钟
    哈喽~ 各位码友们😄【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：

    查看所有参数

    text元素说明

    至于图中的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. 鼠标右击这个参数，点击检查

    步骤 2

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

    步骤 3

    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】其他相关功能，欢迎各位留言探讨。

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

    前端vue.jsjavascript
    不简说
    15 声望4 粉丝
    « 上一篇
    【vue-plugin-hiprint】使用-进阶篇
    下一篇 »
    【vue-plugin-hiprint】如何自定义可拖拽元素 provider

    引用和评论

    推荐阅读
    头像
    【vue-plugin-hiprint】使用-打印篇

    不简说赞 2阅读 5.4k评论 1

    头像
    100个React最佳实践小技巧

    夕水赞 30阅读 8.9k评论 3

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 23.1k评论 18

    头像
    2024最全ECharts 实战大全（速记版+资源）

    程序员海军赞 9阅读 2.9k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 5.3k评论 3

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 11阅读 3k评论 2

    头像
    一些react使用小技巧（中）

    夕水赞 7阅读 4.1k评论 4

    0 条评论
    得票最新