ซิกเนเจอร์แพด มุมมองคอมโพเนนต์

ลองใช้เครื่องมือของเราเพื่อกำจัดปัญหา

ซิกเนเจอร์แพด มุมมองคอมโพเนนต์

มุมมองซิกเนเจอร์แพด

Vue ส่วนประกอบห่อสำหรับ ซิกเนเจอร์แพด

การสาธิต

การติดตั้ง

$ yarn add vue-signature-pad

การใช้งาน

import Vue from 'vue'; import VueSignaturePad from 'vue-signature-pad'; Vue.use(VueSignaturePad); Save Undo export default { name: 'MySignaturePad', methods: { undo() { this.$refs.signaturePad.undoSignature(); }, save() { const { isEmpty, data } = this.$refs.signaturePad.saveSignature(); console.log(isEmpty); console.log(data); } } };

ดูซิกเนเจอร์แพด ใช้ szimek/signature_pad การตั้งค่าเริ่มต้นเป็น |_+_| รู้สึกอิสระกำหนดเองที่คุณต้องการตัวเลือก ใน v1.1 เพิ่ม |_+_| และ |_+_| โทรกลับเหตุการณ์:



options

อุปกรณ์ประกอบฉาก

ชื่อ พิมพ์ ค่าเริ่มต้น คำอธิบาย ตัวอย่าง
ความกว้าง สตริง onBegin ตั้งค่า |_+_| ความกว้าง. -
ความสูง สตริง onEnd ตั้งค่า |_+_| ความสูง. -
ตัวเลือก วัตถุ อ้างอิง ตั้งค่าตัวเลือกซิกเนเจอร์แพด อ้างอิง
ภาพ Array export default { methods: { onBegin() { console.log('=== Begin ==='); }, onEnd() { console.log('=== End ==='); } } }; ผสานลายเซ็นกับภาพที่จัดเตรียมไว้ 100% กำหนดเอง |_+_| สไตล์. div

วิธีการ

ชื่อ ประเภทอาร์กิวเมนต์ คำอธิบาย
100% div จะส่งคืนผ้าใบเป้าหมาย สถานะ และ ข้อมูล .
[] - เลิกทำ
['A.png'>customStyle Object {} - ชัดเจน
div |_+_| หรือ |_+_| ให้ |_+_| เป็นอุปกรณ์ประกอบฉากและจะผสานกับลายเซ็น
{ border: black 3px solid } saveSignature(type, encoderOptions) ให้ภาพผสานกับลายเซ็น อ้างอิงด้านบน |_+_| คุณสมบัติ.
(String, Number) - ล็อคซิกเนเจอร์แพดเป้าหมาย
undoSignature() - เปิดซิกเนเจอร์แพดเป้าหมาย
clearSignature() - รับข้อมูลภาพทั้งหมด
mergeImageAndSignature(signature) - ล้างภาพแคช
Object String วาดภาพจาก URL ข้อมูล
images addImages(images) ส่งกลับภาพลายเซ็นเป็นอาร์เรย์ของกลุ่มจุด
Array - วาดภาพลายเซ็นจากอาร์เรย์ของกลุ่มจุด
images - ผ้าใบลายเซ็นส่งคืนมีข้อมูล

redits

szimek/signature_pad - การวาดภาพลายเซ็นที่ราบรื่นบนผ้าใบ HTML5

ดาวน์โหลดรายละเอียด:

ผู้เขียน: ย่าน999

การสาธิตสด: https://codesandbox.io/s/n5qjp3oqv4

GitHub: https://github.com/neighborhood999/vue-signature-pad

#vuejs #javascript #vue # vue-js

ดูสิ่งนี้ด้วย:

ของใหม่

อ่านได้มากที่สุด

ตัวเลือกของบรรณาธิการ