<template>
	<div class="login-wrap">
	    <remote-js src="https://g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></remote-js>
	    <div class="ms-login">
	       <div style="margin: 0 auto;top:0px" id="login_container"></div>
	    </div>
	</div>
</template>
<script>
import $ from 'jquery'
export default {
 components: {
	   'remote-js': {
	    render(createElement) {
	      return createElement('script', { attrs: { type: 'text/javascript', src: this.src }});
	    },
	    props: {
	      src: { type: String, required: true },
	    },
	  },
  },
  mounted: function(){
	  DDLogin({
	    id: 'login_container',
	    goto: 'https%3a%2f%2foapi.dingtalk.com%2fconnect%2foauth2%2fsns_authorize%3fappid%3ddingoawoyq6g22mupzd6mu%26response_type%3dcode%26scope%3dsnsapi_login%26state%3drk%26redirect_uri%3dhttp%3a%2f%2fapp.mysada.com%2foauth%2fdingding%2fcallback',
	    style: "",
	    href: "",
	    width: "300px",
	    height: "300px"
	});
	  if (typeof window.addEventListener != 'undefined') {
		    window.addEventListener('message', function(event) {
		   	window.location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoawoyq6g22mupzd6mu&response_type=code&scope=snsapi_login&state=rk&redirect_uri=http%3a%2f%2fapp.mysada.com%2foauth%2fdingding%2fcallback&loginTmpCode=' + event.data;
			}, false);
		 } else if (typeof window.attachEvent != 'undefined') {
			window.attachEvent('onmessage', function(event) {
		    window.location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoawoyq6g22mupzd6mu&response_type=code&scope=snsapi_login&state=rk&redirect_uri=http%3a%2f%2fapp.mysada.com%2foauth%2fdingding%2fcallback&loginTmpCode=' + event.data;
		});
	}
  },
  watch: {},
  methods: {
  },
  ready () {
	  
  }
}

$(function () {
})
</script>
<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f5f7f9;
    background-image: url(../../assets/background.png);
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
}

.append-img {
    height: 31px;
    cursor: pointer;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -5px;
}

.ms-title {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -230px;
    text-align: center;
    font-size: 30px;
    color: #fff;
}

.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 280px;
    margin: -150px 0 0 -190px;
    padding: 40px;
    border-radius: 5px;
    background: #fff;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
}
</style>

问题解决了 上下代码

<template>
	<div class="login-wrap">
	    <div class="ms-login">
	    <div id="box" style="position:relative;top:-18px;left:-33px;">
	       <div id="login_container"></div>
	       </div>
	    </div>
	</div>
</template>
<script>
export default {
	mounted: function(){
	 	this.d({
	    id: 'login_container',
	    goto: 'https%3a%2f%2foapi.dingtalk.com%2fconnect%2foauth2%2fsns_authorize%3fappid%3ddingoawoyq6g22mupzd6mu%26response_type%3dcode%26scope%3dsnsapi_login%26state%3drk%26redirect_uri%3dhttp%3a%2f%2fapp.mysada.com%2foauth%2fdingding%2fcallback',
	    style: "",
	    href: "",
	    width: "300px",
	    height: "300px"
	});
	if (typeof window.addEventListener != 'undefined') {
		    window.addEventListener('message', function(event) {
		   	window.location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoawoyq6g22mupzd6mu&response_type=code&scope=snsapi_login&state=rk&redirect_uri=http%3a%2f%2fapp.mysada.com%2foauth%2fdingding%2fcallback&loginTmpCode=' + event.data;
			}, false);
		 } else if (typeof window.attachEvent != 'undefined') {
			window.attachEvent('onmessage', function(event) {
		    window.location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoawoyq6g22mupzd6mu&response_type=code&scope=snsapi_login&state=rk&redirect_uri=http%3a%2f%2fapp.mysada.com%2foauth%2fdingding%2fcallback&loginTmpCode=' + event.data;
		});
	}
  },
  watch: {},
  methods: {
  	d(a) {
        var e, c = document.createElement("iframe"),
            d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto ;
        d += a.style ? "&style=" + a.style : "",
            d += a.href ? "&href=" + a.href : "",
            c.src = d,
            c.frameBorder = "0",
            c.allowTransparency = "true",
            c.scrolling = "no",
            c.width =  "365px",
            c.height = "400px",
            e = document.getElementById(a.id),
            e.innerHTML = "",
            e.appendChild(c)
    }
  }
}
</script>
<style scoped>
.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f5f7f9;
    background-image: url(../../assets/background.png);
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
}
.append-img {
    height: 31px;
    cursor: pointer;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -5px;
}

.ms-title {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -230px;
    text-align: center;
    font-size: 30px;
    color: #fff;
}

.ms-login {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 280px;
    margin: -150px 0 0 -190px;
    padding: 40px;
    border-radius: 5px;
    background: #fff;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 100%;
    height: 36px;
}
</style>