NutzCN Logo
问答 请教一个js 转vue的代码
发布于 31天前 作者 Rekoe 68 次浏览 复制 上一个帖子 下一个帖子
标签:

html 代码

<!-- https://github.com/yourtion/yourtion.github.io/blob/86c41eabae2c3b093c704fcfad9c05dfefc186d7/_posts/2017/02/2017-02-15-vue-require-remote-js.md -->
<script src="//g.alicdn.com/dingding/dinglogin/0.0.2/ddLogin.js"></script>
<div class="container intro text-center">
    <h2 class="title">登录</h2>
    <div class="login-form">
        <div style="margin: 0 auto;" id="login_container"></div>
    </div>
</div>
<script type="text/javascript">
var obj = 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"
});
var hanndleMessage = function(event) {
    var loginTmpCode = event.data;
    var origin = event.origin;
    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=' + loginTmpCode;
};
if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', hanndleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onmessage', hanndleMessage);
}
</script>

怎么转到vue的模板中?
请教,找到了这个资料 然后就不知道怎么做了

https://github.com/yourtion/yourtion.github.io/blob/86c41eabae2c3b093c704fcfad9c05dfefc186d7/_posts/2017/02/2017-02-15-vue-require-remote-js.md
3 回复

vue不参与ajax

<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>
添加回复
请先登陆
回到顶部