增加了手写签名

示例路由修改部分名称

vue/src/components/SignautreBoard/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import Main from './main.vue'
+
+const Constructor = Vue.extend(Main)
+
+let instance
+
+const signature = function ({image, lineWidth = 6, lineColor = '#000000', onConfirm}) {
+    if (instance) instance.close()
+    else {
+        instance = new Constructor().$mount()
+        document.body.appendChild(instance.$el)
+    }
+    instance.image = image
+    instance.lineWidth = lineWidth
+    instance.lineColor = lineColor
+    instance.onConfirm = onConfirm
+    instance.init()
+    instance.visible = true
+    return instance
+}
+
+signature.close = function () {
+    if (instance) {
+        instance.close()
+        instance = null
+    }
+}
+
+export default signature

vue/src/components/SignautreBoard/main.vue

@@ -0,0 +1,155 @@
+<template>
+    <div v-show="visible" class="signature-board">
+        <canvas
+                ref="canvas"
+                @mousedown.prevent="drawStart"
+                @mousemove.prevent="drawMove"
+                @mouseup.prevent="drawEnd"
+                @touchstart.prevent="drawStart"
+                @touchmove.prevent="drawMove"
+                @touchend.prevent="drawEnd"
+        />
+        <div class="signature-board__footer">
+            <el-button plain size="small" @click="clear">清 空</el-button>
+            <el-button plain size="small" @click="close">关 闭</el-button>
+            <el-button size="small" type="primary" @click="confirm">确 定</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    /*
+    * 突然发现没办法做到竖屏横屏都支持，坑爹
+    * */
+
+    function getEventPoint(e) {
+        let x, y
+        if (['mousedown', 'mousemove'].includes(e.type)) {
+            x = e.clientX - e.target.offsetLeft
+            y = e.clientY - e.target.offsetTop
+        }
+        else {
+            x = e.changedTouches[0].clientX - e.target.offsetLeft
+            y = e.changedTouches[0].clientY - e.target.offsetTop
+        }
+        return {x, y}
+    }
+
+    export default {
+        name: 'SignatureBoard',
+        props: {
+            image: String,
+            lineWidth: Number,
+            lineColor: String,
+            onConfirm: Function
+        },
+        data() {
+            return {
+                visible: false,
+                drew: false,
+                drawing: false,
+                startX: 0,
+                startY: 0
+            }
+        },
+        methods: {
+            drawStart(e) {
+                const {x, y} = getEventPoint(e)
+                this.drew = true
+                this.drawing = true
+                this.startX = x
+                this.startY = y
+                this.ctx.strokeStyle = this.lineColor
+                this.ctx.lineWidth = this.lineWidth
+            },
+
+            drawMove(e) {
+                if (!this.drawing) return
+                const {x, y} = getEventPoint(e)
+                this.ctx.beginPath()
+                this.ctx.moveTo(this.startX, this.startY)
+                this.ctx.lineTo(x, y)
+                this.ctx.stroke()
+                this.ctx.closePath()
+                this.startY = y
+                this.startX = x
+            },
+
+            drawEnd() {
+                this.drawing = false
+            },
+
+            getBase64() {
+                if (!this.drew) return null
+                return this.$refs.canvas.toDataURL()
+            },
+
+            resize() {
+                const canvas = this.$refs.canvas
+
+                canvas.height = window.innerHeight
+                canvas.width = window.innerWidth
+            },
+
+            init() {
+                this.resize()
+
+                this.ctx = this.$refs.canvas.getContext('2d')
+                this.ctx.lineCap = 'round'
+                this.ctx.lineJoin = 'round'
+
+                if (this.image) {
+                    let img = new Image()
+                    img.src = this.image
+                    img.onload = () => {
+                        this.ctx.drawImage(img, 0, 0, img.width, img.height)
+                        this.drew = true
+                        img = null
+                    }
+                }
+            },
+
+            clear() {
+                this.drew = false
+                this.drawing = false
+                this.$refs.canvas && (this.$refs.canvas.height = window.innerHeight)
+            },
+
+            close() {
+                this.visible = false
+                this.clear()
+            },
+
+            confirm() {
+                this.onConfirm && this.onConfirm(this.getBase64())
+                this.visible = false
+            }
+        },
+        mounted() {
+            window.addEventListener('resize', this.resize)
+        },
+        destroyed() {
+            this.clear()
+            window.removeEventListener('resize', this.resize)
+        }
+    }
+</script>
+
+<style lang="scss">
+    .signature-board {
+        position: fixed;
+        background-color: white;
+        top: 0;
+        right: 0;
+        height: 100vh;
+        width: 100vw;
+        z-index: 100;
+        overflow: hidden;
+
+        &__footer {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+        }
+    }
+</style>

vue/src/main.js

@@ -14,6 +14,7 @@ import Guide from '@/components/Guide'
 import ImageViewer from '@/components/ImageViewer'
 import Message from '@/components/Message'
 import PuzzleVerify from '@/components/PuzzleVerify'
+import Signature from '@/components/SignautreBoard'
 
 Vue.use(Element)
 
@@ -31,6 +32,7 @@ Vue.prototype.$guide = Guide
 Vue.prototype.$image = ImageViewer
 Vue.prototype.$message = Message
 Vue.prototype.$puzzleVerify = PuzzleVerify
+Vue.prototype.$signature = Signature
 
 Vue.config.productionTip = false
 

vue/src/router/constant/modules/example.js

@@ -48,28 +48,34 @@ const router = {
             meta: {title: '组件'},
             children: [
                 {
-                    path: 'upload',
+                    path: 'uploadExample',
-                    name: 'upload',
+                    name: 'uploadExample',
-                    component: () => import('@/views/example/components/upload'),
+                    component: () => import('@/views/example/components/uploadExample'),
                     meta: {title: '上传文件'}
                 },
                 {
-                    path: 'picture-preview',
+                    path: 'picturePreviewExample',
-                    name: 'picturePreview',
+                    name: 'picturePreviewExample',
-                    component: () => import('@/views/example/components/picturePreview'),
+                    component: () => import('@/views/example/components/picturePreviewExample'),
                     meta: {title: '图片预览'}
                 },
                 {
-                    path: 'skeleton',
+                    path: 'skeletonExample',
-                    name: 'skeleton',
+                    name: 'skeletonExample',
-                    component: () => import('@/views/example/components/skeleton'),
+                    component: () => import('@/views/example/components/skeletonExample'),
                     meta: {title: '骨架屏'}
                 },
                 {
-                    path: 'ripple',
+                    path: 'rippleExample',
-                    name: 'ripple',
+                    name: 'rippleExample',
-                    component: () => import('@/views/example/components/ripple'),
+                    component: () => import('@/views/example/components/rippleExample'),
                     meta: {title: '波纹'}
+                },
+                {
+                    path: 'signatureExample',
+                    name: 'signatureExample',
+                    component: () => import('@/views/example/components/signatureExample'),
+                    meta: {title: '手写签名'}
                 }
             ]
         },

vue/src/views/app/login.vue

@@ -12,14 +12,14 @@
             </div>
             <el-form ref="form" :model="form" :rules="rules" autocomplete="on" label-position="left">
                 <el-form-item prop="username">
-                <span class="svg-container">
+                    <span class="svg-container">
-                    <svg-icon icon="user"/>
+                        <svg-icon icon="user"/>
-                </span>
+                    </span>
                     <el-input
                             ref="username"
                             v-model="form.username"
                             :maxlength="20"
-                            autocomplete="on"
+                            autocomplete="off"
                             name="username"
                             placeholder="请输入用户名"
                             type="text"
@@ -37,14 +37,14 @@
                             :key="passwordType"
                             :type="passwordType"
                             :maxlength="20"
-                            autocomplete="on"
+                            autocomplete="off"
                             name="password"
                             placeholder="请输入密码"
                             @keyup.enter.native="login"
                     />
                     <span @click="showPwd" class="show-pwd">
-                    <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'"/>
+                        <svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'"/>
-                </span>
+                    </span>
                 </el-form-item>
                 <el-button :loading="loading" style="width: 100%" type="primary" @click="login">登 录</el-button>
                 <div class="flex" style="margin-top: 20px">

vue/src/views/app/register.vue

@@ -12,10 +12,16 @@
             </div>
             <el-form ref="form" :model="form" :rules="rules" label-position="left">
                 <el-form-item prop="username">
-                <span class="svg-container">
+                    <span class="svg-container">
-                    <svg-icon icon="user"/>
+                        <svg-icon icon="user"/>
-                </span>
+                    </span>
-                    <el-input ref="username" v-model="form.username" :maxlength="20" placeholder="请输入用户名"/>
+                    <el-input
+                            ref="username"
+                            v-model="form.username"
+                            :maxlength="20"
+                            placeholder="请输入用户名"
+                            autocomplete="off"
+                    />
                 </el-form-item>
                 <el-form-item prop="pwd">
                     <el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">

vue/src/views/example/components/picturePreviewExample/index.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script>
-    import PhotoSwipe from "./components/PhotoSwipe"
+    import PhotoSwipe from "./PhotoSwipe"
     import Vue from 'vue'
     import Viewer from 'v-viewer'
 
     Vue.use(Viewer)
 
     export default {
-        name: "picturePreview",
+        name: "picturePreviewExample",
         components: {PhotoSwipe},
         data() {
             return {

vue/src/views/example/components/rippleExample.vue

@@ -6,6 +6,6 @@
 
 <script>
     export default {
-        name: "ripple"
+        name: "rippleExample"
     }
 </script>

vue/src/views/example/components/signatureExample.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <div class="tip-row">
+            搞了个手写签名，竖屏横屏不可兼得
+        </div>
+        <div>
+            <img :src="src" style="width: 100%;height: 500px;object-fit: contain">
+        </div>
+        <el-button plain @click="signature">点击签名</el-button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'signatureExample',
+        data() {
+            return {
+                src: null
+            }
+        },
+        methods: {
+            signature() {
+                this.$signature({
+                    image: this.src, onConfirm: img => this.src = img
+                })
+            }
+        }
+    }
+</script>

vue/src/views/example/components/skeletonExample.vue

@@ -26,7 +26,7 @@
     import {skeletonAnimations, skeletonTypes} from '@/components/Skeleton/constant'
 
     export default {
-        name: "skeleton",
+        name: "skeletonExample",
         components: {QSkeleton},
         data() {
             return {

vue/src/views/example/components/uploadExample.vue

@@ -12,7 +12,7 @@
     import request from '@/config/request'
 
     export default {
-        name: "upload",
+        name: "uploadExample",
         components: {UploadFile},
         methods: {
             change(e) {