protocol-frame

协议框

作用

内部电子协议签署插件之一，另一个插件是签名板

下载

npm i -S protocol-frame

全局引入

import protocol-frame from 'protocol-frame';

Vue.use(protocol-frame);

更新

@1.1.7 尝试解决滚动几次后不能滚动的问题 @1.1.6 忘了有shadow-dom导致聚焦方法写错，现在改正 @1.1.5 显示时聚焦 @1.1.4 添加转义后css样式 @1.1.3 开始使用转义的HTML @1.1.2 去掉一层scroll某些ios就滑不了了，加上 @1.1.1 解决隐藏时遮挡住按钮导致无法点击问题，去掉一层scroll @1.1.0 尝试解决某些iphone iframe无法滚动问题

局部引入

import protocol-frame from 'protocol-frame';

components: {

​ ProtocolFrame,

}

如何使用

<protocol-frame @ok="handleOk" keyCode="xxx" @cancel="handleCancel" ref="pf" :url="url"></protocol-frame>
<button @click="show">显示</button>
<button @click="changeUrl">更改图片</button>

export default {
    components:{ProtocolFrame},
    data(){
        return {
            value: null,
            url: 'http://10.43.200.81:9010/fts/1158855a-0d78-4e46-8bf6-93ca89f244b5.pdf',
        }
    },
    methods:{
        show() {
            this.$refs.pf.show();
        },
        changeUrl() {
          this.url='https://gkb-prd.oss-cn-hangzhou.aliyuncs.com/202138_5a05250fe4cd48f88557456ebf5c6dc3.jpg';
        },
        handleOk() {
            console.log('他同意了');
        },
        handleCancel() {
            console.log('他拒绝了')
        }
    },
}

API

参数	说明	类型	默认值	版本
keyCode	密码（内部用的），不传相当于iframe的src为你传入的url	String	''
title	标题	String	'应用系统使用协议'
headerShow	控制要不要显示标题	Boolean	false	1.0.9
okText	@ok回调的名称	String	'签署'
cancelText	@cancel回调名称	String	'拒签'
enterText	@enter回调名称	String	'进入页面'
url	文件地址	String	''
@ok	签署回调	Function
@cancel	拒签回调	Function
@enter	在签署成功后使用this.$refs.toFinish()进入最后状态，按钮显示。暴露的函数	Function		1.0.8

加入ref后可调用api

函数	说明	用法	版本
show	显示或隐藏此协议	this.$refs.pf.show()
toFinish	进入最后状态，暴露一个按钮，前两个隐藏	this.$refs.pf.toFinish()	1.0.8