新西兰服务器

怎么用VuePress开发一个代码复制插件


怎么用VuePress开发一个代码复制插件

发布时间:2022-02-14 15:21:36 来源:高防服务器网 阅读:97 作者:iii 栏目:编程语言

今天小编给大家分享一下怎么用VuePress开发一个代码复制插件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

本地开发

但是如果你在配置文件中要做的事情太多了,最好还是将它们提取到单独的插件中,然后通过设置绝对路径或者通过 require 来使用它们:

module.exports = {    plugins: [      path.resolve(__dirname, './path/to/your-plugin.js'),      require('./another-plugin'),    ],  }

那就让我们开始吧!

初始化项目

我们在 .vuepress 文件夹下新建一个 vuepress-plugin-code-copy 的文件夹,用于存放插件相关的代码,然后命令行进入到该文件夹,执行 npm init,创建 package.json,此时文件的目录为:

.vuepress  ├─ vuepress-plugin-code-copy   │  └─ package.json  └─ config.js

我们在 vuepress-plugin-code-copy下新建一个 index.js 文件,参照官方文档插件示例中的写法,我们使用返回对象的函数形式,这个函数接受插件的配置选项作为第一个参数、包含编译期上下文的 ctx 对象作为第二个参数:

module.exports = (options, ctx) => {     return {        // ...     }  }

再参照官方文档 Option API 中的 name,以及生命周期函数中的 ready 钩子,我们写一个初始的测试代码:

module.exports = (options, ctx) => {      return {          name: 'vuepress-plugin-code-copy',          async ready() {              console.log('Hello World!');          }      }   }

此时我们运行下 yarn run docs:dev,可以在运行过程中看到我们的插件名字和打印结果:

插件设计

现在我们可以设想下我们的代码复制插件的效果了,我想要实现的效果是:

在代码块的右下角有一个 Copy 文字按钮,点击后文字变为 Copied!然后一秒后文字重新变为 Copy,而代码块里的代码则在点击的时候复制到剪切板中。

插件开发

如果是在 Vue 组件中,我们很容易实现这个效果,在根组件 mounted 或者 updated的时候,使用 document.querySelector获取所有的代码块,插入一个按钮元素,再在按钮元素上绑定点击事件,当触发点击事件的时候,代码复制到剪切板,然后修改文字,1s 后再修改下文字。

那 VuePress 插件有方法可以控制根组件的生命周期吗?我们查阅下 VuePress 官方文档的 Option API,可以发现 VuePress 提供了一个 clientRootMixin 方法:

指向 mixin 文件的路径,它让你可以控制根组件的生命周期

看下示例代码:

// 插件的入口  const path = require('path')    module.exports = {    clientRootMixin: path.resolve(__dirname, 'mixin.js')  }
// mixin.js  export default {    created () {},    mounted () {}  }

这不就是我们需要的吗?那我们动手吧,修改 index.js的内容为:

const path = require('path');    module.exports = (options, ctx) => {      return {          name: 'vuepress-plugin-code-copy',          clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')      }   }

vuepress-plugin-code-copy下新建一个 clientRootMixin.js文件,代码写入:

export default {      updated() {          setTimeout(() => {              document.querySelectorAll('div[class*="language-"] pre').forEach(el => {  								console.log('one code block')              })          }, 100)      }  }

刷新下浏览器里的页面,然后查看打印:

接下来就要思考如何写入按钮元素了。

当然我们可以使用原生 JavaScript 一点点的创建元素,然后插入其中,但我们其实是在一个支持 Vue 语法的项目里,其实我们完全可以创建一个 Vue 组件,然后将组件的实例挂载到元素上。那用什么方法挂载呢?

我们可以在 Vue 的全局 API 里,找到 Vue.extendAPI,看一下使用示例:

// 要挂载的元素  <div id="mount-point"></div>
// 创建构造器  var Profile = Vue.extend({    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',    data: function () {      return {        firstName: 'Walter',        lastName: 'White',        alias: 'Heisenberg'      }    }  })  // 创建 Profile 实例,并挂载到一个元素上。  new Profile().$mount('#mount-point')

结果如下:

// 结果为:  <p>Walter White aka Heisenberg</p>

那接下来,我们就创建一个 Vue 组件,然后通过 Vue.extend 方法,挂载到每个代码块元素中。

vuepress-plugin-code-copy下新建一个 CodeCopy.vue 文件,写入代码如下:

<template>      <span class="code-copy-btn" @click="copyToClipboard">{{ buttonText }}</span>  </template>    <script>  export default {      data() {          return {              buttonText: 'Copy'          }      },      methods: {          copyToClipboard(el) {              this.setClipboard(this.code, this.setText);          },          setClipboard(code, cb) {              if (navigator.clipboard) {                  navigator.clipboard.writeText(code).then(                      cb,                      () => {}                  )              } else {                  let copyelement = document.createElement('textarea')                  document.body.appendChild(copyelement)                  copyelement.value = code                  copyelement.select()                  document.execCommand('Copy')                  copyelement.remove()                  cb()              }          },          setText() {              this.buttonText = 'Copied!'                setTimeout(() => {                  this.buttonText = 'Copy'              }, 1000)          }      }  }  </script>    <style scoped>  .code-copy-btn {      position: absolute;      bottom: 10px;      right: 7.5px;      opacity: 0.75;      cursor: pointer;      font-size: 14px;  }    .code-copy-btn:hover {      opacity: 1;  }  </style>

该组件实现了按钮的样式和点击时将代码写入剪切版的效果,整体代码比较简单,就不多叙述了。

我们修改一下 clientRootMixin.js

import CodeCopy from './CodeCopy.vue'  import Vue from 'vue'    export default {      updated() {          // 防止阻塞          setTimeout(() => {              document.querySelectorAll('div[class*="language-"] pre').forEach(el => {                	// 防止重复写入                  if (el.classList.contains('code-copy-added')) return                  let ComponentClass = Vue.extend(CodeCopy)                  let instance = new ComponentClass()                  instance.code = el.innerText                  instance.$mount()                  el.classList.add('code-copy-added')                  el.appendChild(instance.$el)              })          }, 100)      }  }

这里注意两点,第一是我们通过 el.innerText 获取要复制的代码内容,然后写入到实例的 code 属性,在组件中,我们是通过 this.code获取的。

第二是我们没有使用 $mount(element),直接传入一个要挂载的节点元素,这是因为 $mount() 的挂载会清空目标元素,但是这里我们需要添加到元素中,所以我们在执行 instance.$mount()后,通过 instance.$el获取了实例元素,然后再将其 appendChild 到每个代码块中。关于 $el的使用可以参考官方文档的 el 章节 。

此时,我们的文件目录如下:

.vuepress  ├─ vuepress-plugin-code-copy   │  ├─ CodeCopy.vue  │  ├─ clientRootMixin.js  │  ├─ index.js  │  └─ package.json  └─ config.js

至此,其实我们就已经实现了代码复制的功能。

插件选项

有的时候,为了增加插件的可拓展性,会允许配置可选项,就比如我们不希望按钮的文字是 Copy,而是中文的「复制」,复制完后,文字变为 「已复制!」,该如何实现呢?

前面讲到,我们的 index.js导出的函数,第一个参数就是 options 参数:

const path = require('path');    module.exports = (options, ctx) => {      return {          name: 'vuepress-plugin-code-copy',          clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')      }   }

我们在 config.js先写入需要用到的选项:

module.exports = {      plugins: [        [          require('./vuepress-plugin-code-copy'),          {            'copybuttonText': '复制',            'copiedButtonText': '已复制!'          }        ]      ]  }

我们 index.js中通过 options参数可以接收到我们在 config.js 写入的选项,但我们怎么把这些参数传入 CodeCopy.vue 文件呢?

我们再翻下 VuePress 提供的 Option API,可以发现有一个 define API,其实这个 define 属性就是定义我们插件内部使用的全局变量。我们修改下 index.js

const path = require('path');    module.exports = (options, ctx) => {      return {          name: 'vuepress-plugin-code-copy',          define: {              copybuttonText: options.copybuttonText || 'copy',              copiedButtonText: options.copiedButtonText || "copied!"          },          clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js')      }   }

现在我们已经写入了两个全局变量,组件里怎么使用呢?答案是直接使用!

我们修改下 CodeCopy.vue 的代码:

// ...  <script>  export default {      data() {          return {              buttonText: copybuttonText          }      },      methods: {          copyToClipboard(el) {              this.setClipboard(this.code, this.setText);          },          setClipboard(code, cb) {              if (navigator.clipboard) {                  navigator.clipboard.writeText(code).then(                      cb,                      () => {}                  )              } else {                  let copyelement = document.createElement('textarea')                  document.body.appendChild(copyelement)                  copyelement.value = code                  copyelement.select()                  document.execCommand('Copy')                  copyelement.remove()                  cb()              }          },          setText() {              this.buttonText = copiedButtonText                setTimeout(() => {                  this.buttonText = copybuttonText              }, 1000)          }      }  }  </script>  // ...

以上就是“怎么用VuePress开发一个代码复制插件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注高防服务器网行业资讯频道。

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[