uniapp 手寫簽名組件

組件地址https://ext.dcloud.net.cn/plugin?id=12795

歡迎使用 手寫簽名組件

手寫簽名組件,簽名后可以獲取到base64編碼,同時(shí)內(nèi)置了彈框簽名組件,對于不想布局的同學(xué)來說可以開箱即用」

有項(xiàng)目需要開發(fā)的請聯(lián)系 QQ:371524845

開發(fā)不易,如果幫助到你的,請支持 有問題請留言,作者會(huì)積極更新

使用方法

該組件內(nèi)置兩種組件signature和popupSignature,popupSignature是基于signature開發(fā)

signature基礎(chǔ)用法

<template>
    <view class="content">
        <signature ></signature>
    </view>
</template>
<script>
import signature from '@/components/jp-signature/index.vue'
    export default {
        components:{signature},
        data() {
            return {
                title: ''
            }
        },
    }
</script>

引入方法

   <signature ></signature>
    import signature from '@/components/jp-signature/index.vue'
    components: { signature },

方法介紹

參數(shù)

參數(shù)名 類型 默認(rèn)值 說明
height Number 屏幕高度 畫布高度
width Number 屏幕寬度 畫布寬度
strokeStyle String #000 畫筆顏色
lineWidth Number 3 畫筆大小
explain String 請?jiān)诖撕灻?/td> 提示說明
rotate Boolean false 控制生成圖片是否橫屏

方法

方法名 返回參數(shù) 說明
handleReset 清空畫布
handleConfirm Promise() 獲取簽名,成功返回 base64

popupSignature基礎(chǔ)用法

popupSignature需要手動(dòng)添加uni的uni-popup組件

<template>
    <view class="content">
        <signature v-model="title"></signature>
        {{title}}
    </view>
</template>
<script>
import signature from '@/components/jp-signature/popup.vue'
    export default {
        components:{signature},
        data() {
            return {
                title: ''
            }
        },
    }
</script>

引入方法

   <signature ></signature>
    import signature from '@/components/jp-signature/popup.vue'
    components: { signature },

方法介紹

參數(shù)

參數(shù)名 類型 默認(rèn)值 說明
value String 簽名內(nèi)容,可以通過v-model綁定
label String 手寫簽名
required Boolean false
placeholder String 點(diǎn)擊簽名 簽名說明
readonly Boolean false 是否只能可讀

方法

方法名 返回參數(shù) 說明
toPop 打開彈窗
close 關(guān)閉彈窗
deleteImg 刪除內(nèi)容

事假

事件名 返回參數(shù) 說明
input 簽名內(nèi)容 簽名內(nèi)容
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 閑來無事開發(fā)了幾個(gè)uniapp插件,因咨詢?nèi)颂?,花點(diǎn)時(shí)間寫個(gè)詳細(xì)的對接說明。 插件地址:https://ext....
    FSYANG閱讀 15,613評(píng)論 2 2
  • 最近的項(xiàng)目做了一個(gè)信息展示,客戶的需求改了,因?yàn)橐黄琳故咎嗔耍攵嗥?,還不加分頁,只能增加滾動(dòng)。 查詢了好多資料...
    風(fēng)云變色閱讀 1,685評(píng)論 0 1
  • zq-scancode插件使用說明(v1.0.3) 1、引入包 2、調(diào)用方法 2.1、開啟掃碼 2.2、關(guān)閉掃碼 ...
    js_zhiqiang閱讀 4,345評(píng)論 0 0
  • 組件是視圖層的基本組成單元。 組件是一個(gè)單獨(dú)且可復(fù)用的功能模塊的封裝。 一個(gè)組件包括開始標(biāo)簽和結(jié)束標(biāo)簽,標(biāo)簽上可以...
    鄒鄒_ZZ閱讀 648評(píng)論 0 0
  • 簡介 一款使用簡單的篩選組件,適配app、微信小程序、H5。 dcloud插件市場地址:sl-filtergith...
    SongLazy閱讀 56,732評(píng)論 9 12

友情鏈接更多精彩內(nèi)容