怎么用VuePress開發(fā)一個代碼復(fù)制插件

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

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

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

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

// 插件的入口
const path = require('path')

module.exports = {
  clientRootMixin: path.resolve(__dirname, 'mixin.js')
}

// mixin.js
export default {
  created () {},
  mounted () {}
}

const path = require('path');

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

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

// 要掛載的元素

// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
  template: '
{{firstName}} {{lastName}} aka {{alias}}
',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 創(chuàng)建 Profile 實例，并掛載到一個元素上。
new Profile().$mount('#mount-point')

結(jié)果如下：

// 結(jié)果為:
Walter White aka Heisenberg

那接下來，我們就創(chuàng)建一個 Vue 組件，然后通過 Vue.extend 方法，掛載到每個代碼塊元素中。

在 vuepress-plugin-code-copy下新建一個 CodeCopy.vue 文件，寫入代碼如下：

.code-copy-btn {
    position: absolute;
    bottom: 10px;
    right: 7.5px;
    opacity: 0.75;
    cursor: pointer;
    font-size: 14px;
}

.code-copy-btn:hover {
    opacity: 1;
}

該組件實現(xiàn)了按鈕的樣式和點擊時將代碼寫入剪切版的效果，整體代碼比較簡單，就不多敘述了。

我們修改一下 clientRootMixin.js：

import CodeCopy from './CodeCopy.vue'
import Vue from 'vue'

export default {
    updated() {
        // 防止阻塞
        setTimeout(() => {
            document.querySelectorAll('div[class*="language-"] pre').forEach(el => {
              	// 防止重復(fù)寫入
                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 獲取要復(fù)制的代碼內(nèi)容，然后寫入到實例的 code 屬性，在組件中，我們是通過 this.code獲取的。

第二是我們沒有使用 $mount(element)，直接傳入一個要掛載的節(jié)點元素，這是因為 $mount() 的掛載會清空目標(biāo)元素，但是這里我們需要添加到元素中，所以我們在執(zhí)行 instance.$mount()后，通過 instance.$el獲取了實例元素，然后再將其 appendChild 到每個代碼塊中。關(guān)于 $el的使用可以參考官方文檔的 el 章節(jié) 。

此時，我們的文件目錄如下：

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

至此，其實我們就已經(jīng)實現(xiàn)了代碼復(fù)制的功能。

插件選項

有的時候，為了增加插件的可拓展性，會允許配置可選項，就比如我們不希望按鈕的文字是 Copy，而是中文的「復(fù)制」，復(fù)制完后，文字變?yōu)?「已復(fù)制！」，該如何實現(xiàn)呢？

前面講到，我們的 index.js導(dǎo)出的函數(shù)，第一個參數(shù)就是 options 參數(shù)：

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': '復(fù)制',
          'copiedButtonText': '已復(fù)制！'
        }
      ]
    ]
}

我們 index.js中通過 options參數(shù)可以接收到我們在 config.js 寫入的選項，但我們怎么把這些參數(shù)傳入 CodeCopy.vue 文件呢？

我們再翻下 VuePress 提供的 Option API，可以發(fā)現(xiàn)有一個 define API，其實這個 define 屬性就是定義我們插件內(nèi)部使用的全局變量。我們修改下 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')
    }
 }

現(xiàn)在我們已經(jīng)寫入了兩個全局變量，組件里怎么使用呢？答案是直接使用！

我們修改下 CodeCopy.vue 的代碼：

// ...

// ...

以上就是“怎么用VuePress開發(fā)一個代碼復(fù)制插件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。