Yintech-crm NPM

yintech-crm

yintech 内部跨域组件

Install

npm install yintech-crm -S

如何使用

//main.js
import Vue from 'vue'
import yintechCrm from 'yintech-crm'

Vue.use(yintechCrm)

【发送消息】参数说明 参数 | 描述 ------------- | ------------- moduleName | 对应模块名称，唯一性，on和emit必须对应，必须 message | 要发送的数据，必须 ifmId | 当前iframe的ID名称，必须 isParent | true =》top window 发送给子window ； false =》子window 发送给 top window（即父级页面）

【接收消息】参数说明 参数 | 描述 ------------- | ------------- moduleName | 对应模块名称，唯一性，on和emit必须对应，必须 callback | 回调函数，参数msg为接收到的数据，function(msg){ console.log(msg); }

  <!-- app.vue -->
  <template>
     <iframe src="http://localhost:8005/iframeTest.html" width="100%" height="600" id="ifr1"></iframe>
     <button @click="doClick">写入iframe</button>
  </template>

  <script>
    export default {
    data() {
        return {
        }
    },
    methods:{
       doClick() {
            //*********发送消息*********
            //top window父级发送消息  emit(发送的消息json,iframeId,true父级发送)
            this.$crmMessage.emit({
                moduleName:"checkLogin",
                message:{name:'hello,小子~'},
                ifmId:'ifr1',
                isParent:true
            });
           
            //iframe页面发送消息调用方法
            this.$crmMessage.emit({
                moduleName:"checkLogin",
                message:{name:'hello,小子~'}
            });
          

            //*********接收消息*********
            this.$crmMessage.on({
              moduleName:"checkLogin", //和emit保持一致
              callback:function(msg){
                console.log(msg);
              }
            });
       }
    }
}
  </script>