feat: 添加vuepress

.github/workflows/deploy.yml

@@ -0,0 +1,96 @@
+# 工作流的名称，如果省略，则使用当前文件名
+name: Auto Deploy
+
+# 从工作流生成的工作流运行的名称，如果省略，则使用提交时的commit信息
+run-name: Deploy by @${{ github.actor }}
+
+# 触发部署的条件
+on:
+  # 每当 push 到 master 分支时触发部署
+  push:
+    branches: 
+      - master
+
+# 当前流程要执行的任务，可以是多个。[my_first_job]就是一个任务
+jobs:
+  my_first_job:
+    # 任务的名称，不设置则默认my_first_job
+    name: build-and-deploy
+
+    # 运行所需要的虚拟机环境
+    runs-on: ubuntu-latest
+
+    # 每个任务下的运行步骤，短横杠 - 表示一个步骤，从上至下依次执行。
+    steps:
+      # clone 该仓库的源码到工作流中
+      - name: Clone Code
+        uses: actions/checkout@v3
+        with:
+          # "最近更新时间"等 git 日志相关信息，需要拉取全部提交记录
+          fetch-depth: 0
+
+      # 安装 Node 环境
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          # 选择要使用的 node 版本
+          node-version: '20.15.0'
+
+      # 如果你的依赖是使用npm的，用这种
+      # 缓存 npm node_modules
+      - name: Cache dependencies
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-cache-
+      
+      # 安装 yarn
+      - name: Install yarn
+        run: npm install -g yarn
+
+      # 安装依赖 npm
+      - name: Install dependencies
+        # 如果没有命中缓存才执行 npm install
+        if: steps.cache-deps.outputs.cache-hit != 'true'
+        run: yarn
+
+      # 如果你的依赖是使用yarn的，用这种
+      # 缓存 yarn node_modules
+      # - name: Cache dependencies
+      #   uses: actions/cache@v3
+      #   id: yarn-cache
+      #   with:
+      #     path: |
+      #       **/node_modules
+      #     key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+      #     restore-keys: |
+      #       ${{ runner.os }}-yarn-
+
+      # 安装依赖 yarn
+      # - name: Install dependencies
+      #   # 如果没有命中缓存才执行 npm install
+      #   if: steps.npm-cache.outputs.cache-hit != 'true'
+      #   run: yarn --frozen-lockfile
+
+      # 运行构建脚本
+      - name: Run Build Script
+        run: npm run docs:build
+
+      # 部署到 GitHub Pages
+      - name: Deploy to GitHub Pages
+        # 此actions的官方文档 https://github.com/JamesIves/github-pages-deploy-action
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          # 要部署的文件夹，必填
+          FOLDER: docs/.vuepress/dist
+          # 希望部署的分支，默认gh-pages
+          BRANCH: gh-pages
+          # # 仓库范围的访问令牌，可以将个人令牌的值存储在GitHub Secrets中
+          # # 默认情况是不需要填的，如果您需要更多权限，例如部署到另一个存储库才需要填写
+          # # ACCESS_TOKEN 对应GitHub Secrets中设置的字段，不要照搬
+          # TOKEN: ${{ secrets.ACCESS_TOKEN }}
+          # # 部署到GitHub的不同仓库 <用户名>/<仓库名>
+          # # 此选项必须配置了TOKEN才能正常执行
+          # REPOSITORY-NAME: leoleor/leo2

.npmignore

@@ -0,0 +1,2 @@
+/docs/
+/.github/

docs/.vuepress/components/Normal.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="normal">
+    <div class="normal_left">
+      <el-checkbox-group v-model="checkList">
+        <el-checkbox v-for="item in leftLists" :label="item"></el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <div class="normal_right">
+      <el-checkbox v-for="item in rightList" :label="item"></el-checkbox>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ClipboardPaste } from '../../../dist/index.browser.js'
+
+const clipboard = new ClipboardPaste()
+export default {
+  data() {
+    return {
+      leftLists: [1,2,3,4,5],
+      rightList: [],
+      checkList: [],
+    }
+  },
+  created() {
+    document.addEventListener('keydown', (evt) => {
+      if (!(evt.ctrlKey || evt.metaKey)) return
+      if (evt.key === 'c') {
+        const data = JSON.stringify(this.checkList)
+        clipboard?.setCopyValue(data);
+        this.$message.success('复制成功！' + data)
+      } else if (evt.key === 'v') {
+        clipboard?.getPasteValue().then(res => {
+          this.rightList = JSON.parse(res)
+        })
+      }
+    })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.normal {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  gap: 10px;
+  height: 100px;
+  
+  & > div {
+    border: 1px solid gainsboro;
+  }
+}
+</style>

docs/.vuepress/config.js

@@ -0,0 +1,16 @@
+module.exports = {
+    base: "/clipboard_keyboard/",
+    themeConfig: {
+      sidebar: [
+        '/',
+      ],
+      search: false,
+    },
+    markdown: {
+      lineNumbers: true
+    },
+    less: {},
+    chainWebpack (config) {
+        config.resolve.alias.set('core-js/library/fn', 'core-js/features');
+    },
+  }

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,6 @@
+import Element from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+export default ({ Vue }) => {
+  Vue.use(Element);
+};

docs/README.md

@@ -0,0 +1,3 @@
+# 介绍
+
+<Normal />

package.json

@@ -9,7 +9,9 @@
   "types": "dist/types/copyandpaste.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "build:types": "tsc"
+    "build:types": "tsc",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "author": "Sean",
   "license": "MIT",
@@ -23,9 +25,13 @@
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
+    "element-ui": "^2.15.14",
     "eslint": ">=5.16.0",
     "eslint-config-google": "^0.14.0",
+    "less": "^4.2.0",
+    "less-loader": "7.3.0",
     "rollup": "^2.77.0",
-    "typescript": "^4.7.4"
+    "typescript": "^4.7.4",
+    "vuepress": "^1.9.10"
   }
-}
+}

src/copyandpaste.ts

@@ -92,21 +92,22 @@ export class ClipboardPaste implements IDispose {
   }
 
   private onPaste() {
+    const val = this.textInput.value;
     this.textInput.value = ''
     setTimeout(() => {
-      this.PasteValue$.fire(PASTE, this.textInput.value)
+      this.PasteValue$.fire(PASTE, val)
     }, 0);
     this.textInput.select();
   }
 
   private init() {
-    document.addEventListener(EventType.KEYDOWN, this.onKeydown)
+    document.addEventListener(EventType.KEYDOWN, this.onKeydown.bind(this))
 
-    document.addEventListener(EventType.KEYUP, this.onKeyup)
+    document.addEventListener(EventType.KEYUP, this.onKeyup.bind(this))
 
-    document.addEventListener(EventType.COPY, this.onCopy)
+    document.addEventListener(EventType.COPY, this.onCopy.bind(this))
 
-    document.addEventListener(EventType.PASTE, this.onPaste)
+    document.addEventListener(EventType.PASTE, this.onPaste.bind(this))
   }
 
   private initTextInput() {