美文网首页
[vue插件] vue-ele-sign插件手写签名(可横屏)

[vue插件] vue-ele-sign插件手写签名(可横屏)

作者: 北极星丶超帅的 | 来源:发表于2021-10-13 11:36 被阅读0次

最近需要实现web端手写签名的功能,找了半天,没有完全符合现有需求的插件,便基于elesigncode的代码二次处理,正好方便可以随时根据需求修改,点击vue-ele-sign跳转(只保留了适配vue框架功能),有其他需求,建议直接看elesigncode源码,elesigncode兼容了jq引入

安装依赖命令

 npm i vue-ele-sign --save-dev

使用例子(可查看App.vue文件)

<div class="elesigncode-content">
   <vue-ele-sign ref="VueEleSign" 
                    direction="direction"
                    :pen="pen"
                    :bgImg="bgImg"
                    :imgType="imgType"
                    :readOnly="readOnly"
                    :vsConsole="true"/>

       <div class="btn-box">
            <button @click="setPen">切换画笔</button>
            <button @click="onClear">清空</button>
            <button @click="onClearSign">清空签名</button>
            <button @click="setBgImg">设置背景图片</button>
            <button @click="getImg">获取图片</button>
            <button @click="getFile">获取文件</button>
            <button @click="onIsEmpty">是否有签名</button>
            </div>
        </div>
     </div>
    ...
import VueEleSign from 'vue-ele-sign'
export default {
   components: { VueEleSign }
   data() {
        return {
            show: true,
            pen: 'default',
            imgType: 'png',
            readOnly: false,
            direction: 'left', //left :向左横屏
            imgUrl: '',
            bgImg: ''
        }
    },
    methods: {
        setPen() {
            this.pen = this.pen == 'default' ? 'writing' : 'default'
        },
       onClear() {
            this.$refs.elesigncode.clear()
        },
        onClearSign() {
            this.$refs.elesigncode.clearSign()
        },
        setBgImg() {
            this.$refs.elesigncode.setBgImg(this.bgImg)
        },
        getImg() {
            this.$refs.elesigncode.getImg().then(res => {
                console.log('图片地址1', res)
                this.bgImg = res
            })
        },
        getFile() {
         this.$refs.elesigncode.getFile().then(res => {
                console.log('文件1', res)
            })
        },
        onIsEmpty() {
            let isEmpty = this.$refs.elesigncode.isEmpty()
            console.log('isEmpty--', isEmpty)
        }
    }
}

文档

文档链接

相关文章

  • [vue插件] vue-ele-sign插件手写签名(可横屏)

    最近需要实现web端手写签名的功能,找了半天,没有完全符合现有需求的插件,便基于elesigncode[https...

  • vue高级用法

    Vue 插件 plugin 1, Vue 插件 plugin 安装 Vue.js 插件。如果插件是一个对象,必须提...

  • jQuery插件开发

    一个jQuery插件框架模板 利用上面的模板开发一个轮播图插件 项目地址 说明 支持横屏/竖屏滑动 支持循环播放 ...

  • Vue 插件

    插件,通常用来为Vue 添加全局功能。引用官方文档Vue插件 使用插件 通过全局方法Vue.user()使用插件。...

  • 在vue中使用图片懒加载vue-lazyload插件

    在vue中使用图片懒加载vue-lazyload插件 使用方式 使用vue的 vue-lazyload 插件插件地...

  • vue-cli简单实现骨架屏

    Vue项目首屏加载缓慢,基于webpack插件(vue-skeleton-webpack-plugin)实现一个骨...

  • vue骨架屏插件

    这是一款通用的vue骨架屏插件 git地址: https://github.com/zhangOking/vue-...

  • tool.js

    vue时间格式过滤器(今天,昨天,周几,年月日) vue金额过滤器 手机横屏签名功能(vue)

  • signaturepad 手写签名异常,笔画不随焦点

    问题 半个月前开发H5手写签名插件,一切正常。今天合并预发布后发现手写签名异常,笔画没有显示。 原因 signat...

  • 小程序插件-手写签名

    github地址 其他组件:移步至《日历插件》 使用方法 1.声明组件 下载代码,将components文件夹拷贝...

网友评论

      本文标题:[vue插件] vue-ele-sign插件手写签名(可横屏)

      本文链接:https://www.haomeiwen.com/subject/xfbsoltx.html