关于前端:vuepluginhiprint使用参数篇

2次阅读

共计 6247 个字符，预计需要花费 16 分钟才能阅读完成。

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

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

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

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

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

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

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

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

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

每个参数都是由 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: '款式',}
    ]
  }
})

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

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

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

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

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

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

这一部次要分波及到 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、参数这一块 大抵原理 我想各位 应该分明 些了吧~ 那么就 上手重写个参数 试试咯。

其实 自定义 / 重写 参数都是一样的，重写 其实就是 笼罩 本来的参数。 自定义 就是 定义 一个 不存在 的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】 其余相干性能，欢送各位留言探讨。

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

正文完

前端

发表至：前端

2023-04-07

0

关于前端:CSS和SVG实现文字渐变描边投影

关于前端:深入理解web前端JavaScript看这一篇就够了

关于前端:跨端开发技术方案怎么选

关于前端:前端周刊第十期

关于javascript:vuepluginhiprint使用进阶篇

关于前端:vuepluginhiprint使用参数篇

前言

1. 查看所有参数

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

3. 查看参数可选值

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

5. 自定义 / 重写参数

总结

站内搜索

关于前端:vuepluginhiprint使用参数篇

前言

1. 查看所有参数

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

3. 查看参数 可选值

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

5. 自定义 / 重写 参数

总结

站内搜索

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

3. 查看参数可选值

5. 自定义 / 重写参数