协议框

作用

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

下载

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 |