H5中 手写签名

最近项目需要用户签名,网上整合了一下 发一下
首先下载一个签名插件

npm i --save sign-canvas

在 main.js中

import SignCanvas from “sign-canvas”;//签名插件
Vue.use(SignCanvas);

HTML中


CSS中

//设置提交按钮的样式
.btnList {
    position: fixed;
    bottom: 10%;
    left: -40%;
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    transform: rotate(90deg);
}
.sign{
	padding: 10px;
	overflow-x: scroll;
	.sign-title{
		font-weight: bold;
		padding: 10px 0;
	}
     .sign-canvas {
        background: #F1F1F1 !important;
        border-radius: 8px;
        position: absolute;
        right: 20px;
        border: 1px solid #000;
   }
     .signName{
        border: 1px solid #000;
    }
}

JS中


你可能感兴趣的:(vue,javascript,前端,vue.js)