vue3项目引入电子签名（可横屏竖屏）

实现效果：（左边横屏，右边竖屏）

前言：【使用开源项目smooth-signature 实现签名的功能。Gitee 地址是 ：GitHub - linjc/smooth-signature: H5带笔锋手写签名，支持PC端和移动端，任何前端框架均可使用

以下代码可复制粘贴直接用，改下文件路径即可】

1.在项目中安装依赖包：npm install --save smooth-signature

2.我是放到一个dialog里，可根据需求自行开发。

弹框代码：

 
  

    

      
    
    关闭
  

引入模块：

import ESign from '@/views/officeDocument/office/components/packages/ESign/src/index2.vue'

使用方法：

//电子签名
const signatureVisible = ref(false)
const signatureBtn = () => {
  signatureVisible.value = true
}
//子组件关闭调用此方法
const closeVisi = () => {
  signatureVisible.value = false
}

2.开发电子签名功能及样式

电子签名文件目录（src/index.vue省略，主要是index2.vue文件)：

packages/index.ts文件代码：

import { App, Plugin } from 'vue'

import { ESignPlugin } from './ESign'
const XiPlugin: Plugin = {
  install(app: App) {
    ESignPlugin.install?.(app)
  }
}

export default XiPlugin

export * from './ESign'

packages/Esign/index.ts文件代码：

import { App, Plugin } from 'vue'
import ESign from './src/index.vue'

export const ESignPlugin: Plugin = {
  install(app: App) {
    app.component('ESign', ESign)
  }
}

export { ESign }

 packages/Edign/src/index2.vue文件代码（主要代码）：

4.记得在项目main.js文件中引入ESign模块哦

//电子签名
import Esign from '@/views/officeDocument/office/components/packages'

最后就实现啦！本人因项目 使用比较复杂，可根据个人情况减少代码。参考前面的开源项目地址即可。