Я использую vue js 2.5.16 . Браузер Mozilla, Chrome работает отлично, но браузер Safari не работает идеально.
Мое окружение:
Отображение этого кода
Title: {{dataInfo.sTitle}}
Desc: {{datainfo.sDesc}}
Мой полный код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="css/weui/jquery-weui.min.css" />
<link rel="stylesheet" href="css/weui/weui.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/MyCard.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/weui_js/jquery-weui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<title>Business Card</title>
</head>
<body>
<div class="container">
<div class="card_box">
<div class="top_line">
<img v-bind:src="dataInfo.sAvatar" />
<div class="top_right">
<div class="top_one">
<span class="name">{{dataInfo.sRealName}}</span>
<span class="name_e">{{dataInfo.sEnglishName}}</span>
</div>
<div class="top_two">
<span class="company">{{dataInfo.sCompanyName}}</span>
<span class="position">{{dataInfo.sPositionName}}</span>
</div>
</div>
</div>
<div class="bottom_line">
<div class="relation">
<div class="relation_one" v-if="dataInfo.sPhone">
<img src="img/MyCard/office_phone@3x.png" alt="" />
<span>({{dataInfo.iZoneNum}}) {{dataInfo.sPhone}}</span>
</div>
<div class="relation_one" v-if="dataInfo.sWxAccount">
<img src="img/MyCard/office_wechat@3x.png" alt="" />
<span>{{dataInfo.sWxAccount}}</span>
</div>
<div class="relation_one" v-if="dataInfo.sFbAccount">
<img src="img/MyCard/office_fb@3x.png" alt="" />
<span>{{dataInfo.sFbAccount}}</span>
</div>
<div class="relation_one" v-if="dataInfo.sMail">
<img src="img/MyCard/office_email@3x.png" alt="" />
<span>{{dataInfo.sMail}}</span>
</div>
</div>
<div class="mdrt" v-if="hasMDRT">
<div class="mdrt_year">{{dataInfo.sMdrt.dtYear}}</div>
<img src="img/MyCard/mdrt_blue@3x.png" />
</div>
</div>
</div>
<div class="card_box" v-if="dataInfo.sDesc">
<div class="box_title">sDesc</div>
<div class="summary">{{dataInfo.sDesc}}</div>
</div>
<div class="card_box" v-if="hasCareer">
<div class="box_title">Experience</div>
<div class="experience_list" v-for="item in dataInfo.sCareer">
<div class="experience_company">{{item.sCompany}}</div>
<div class="experience_bottom">
<div class="experience_time">{{item.dtEntryTime | time}} - {{item.dtQuitTime | time}}</div>
<div class="experience_position">{{item.sPosition}}</div>
</div>
</div>
</div>
<div class="card_box" v-if="hasHonor">
<div class="box_title">Honor</div>
<div class="honor_list" v-for="item in dataInfo.sHonor">
<div class="honor_left">
<div class="honor_year">{{item.dtYear}}</div>
</div>
<div class="honor_right">
<div class="honor_one">{{item.sHonorTitle}}</div>
</div>
</div>
</div>
<div class="bottom_icon" align="center">
<img src="img/default_png_logo@3x.png" />
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '.container',
data: {
dataInfo: {},
hasCareer: false,
hasHonor: false,
hasMDRT: false,
},
})
Vue.filter('time', function(value) {
if(value == 0) return "now";
let newDate = new Date(parseInt(value) * 1000);
return newDate.format('yyyy.MM');
})
function getInfoData() {
var query = this.getParameterByName("query");
$.ajax({
type: "POST",
dataType: "json",
data: JSON.stringify({
'query': query
}),
contentType: "application/json",
url: 'https://app.example.com',
success: function(data) {
if(data) {
if(data.msg == "ok") {
vm.dataInfo = data.data;
if(data.data.sCareer.length > 0) {
vm.hasCareer = true;
}
if(data.data.sHonor.length > 0) {
vm.hasHonor = true;
}
if(data.data.sMdrt.dtYear.length > 0) {
vm.hasMDRT = true;
}
}
}
}
});
}
getInfoData();
function getParameterByName(field, url) {
var href = url ? url : window.location.href;
var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
var string = reg.exec(href);
return string ? string[1] : null;
}
</script>
</body>
</html>
PS:
Я ввел babel-polyfill и es6-обещание, но оно все равно не работает! Кто-нибудь сталкивался с такой же проблемой или мог бы помочь немного объяснить?
Спасибо