windowvuejs

① vue.js中confirm怎樣實現

<template>
<divclass="confirm">
<divclass="shade"></div>
<divclass="content">
<divclass="top">提示</div>
<divclass="center">{{title}}</div>
<divclass="bottom">
<buttonv-on:click="clickBtn(true)">確定</button>
<buttonv-on:click="clickBtn(false)">取消</button>
</div>
</div>
</div>
</template>
<script>
//importVuefrom'vue'
exportdefault{
name:'confirmCmp',
props:['title'],
data(){return{
}},
methods:{
clickBtn(b){
this.close();
//監聽result變化,並發出通知（在angularjs中叫做廣播，angularjs提供了emit,broadcast和$on服務用於向子父中傳遞消息）
this.$emit('result',b);
},
open(){
document.querySelector('.confirm').style.display='block'
},
close(){
document.querySelector('.confirm').style.display='none'
}

},
mounted(){
//垂直居中
varwindowHeight=window.innerHeight;
vardomObj=document.querySelector('.content');
vardomObjHeight=domObj.offsetHeight;
//console.log(domObjHeight)不知道為啥獲取不到高
vartop=windowHeight/2-77;
domObj.style.top=top+'px';
},
install(Vue){//核心部分，在我們使用Vue.use()時，自動調用的是install，而install導出的必須是的組件
//console.log('confirmCmpInstall');
Vue.component('confirmCmp',this);
}
}
</script>
<style>
.confirm{display:none;
position:fixed;z-index:1;width:100%;
height:100%;
}

.shade{
position:fixed;
z-index:2;
background-color:rgb(0,0,0);
opacity:0.3;
width:100%;
height:100%;
}
.content{
background-color:white;
z-index:3;
width:260px;
margin:auto;
position:relative;
left:0;right:0;
}

.top{
padding-left:20px;
background:#f6f6f6;
/*color:#212a31;*/
font-size:16px;
font-weight:700;
height:46px;
line-height:46px;
border-bottom:1pxsolid#D5D5D5;
}
.center{
padding:20px;
line-height:20px;
font-size:14px;
}
.bottom{
border-top:1pxsolid#D5D5D5;
text-align:center;
height:46px;
line-height:46px;
background:#f6f6f6;}
.bottombutton{width:60px;border:none;height:30px;display:inline-block;}
.bottombutton:first-child{background-color:#1E9FFF;color:white;margin-right:3px}
.bottombutton:last-child{margin-left:3px}

</style>

<!--插件開發教程-->
<!--https://cn.vuejs.org/v2/guide/plugins.html-->

<!--此辦法行不通
http://www.cnblogs.com/yufann/p/Vue-Node8.html-->

② 如何在 Vue.js 中使用第三方庫

在 Vue.js 中使用第三方庫的方式有：
1.全局變數
在項目中添加第三方庫的最簡單方式是講其作為一個全局變數, 掛載到 window 對象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
這種方式不適合於服務端渲染, 因為服務端沒有 window 對象, 是 undefined, 當試圖去訪問屬性時會報錯.

2.在每個文件中引入
另一個簡單的方式是在每一個需要該庫的文件中導入:
MyComponent.vue
import _ from 'lodash';

export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}
這種方式是允許的, 但是比較繁瑣, 並且帶來的問題是: 你必須記住在哪些文件引用了該庫, 如果項目不再依賴這個庫時, 得去找到每一個引用該庫的文件並刪除該庫的引用. 如果構建工具沒設置正確, 可能導致該庫的多份拷貝被引用.

3.優雅的方式
在 Vuejs 項目中使用 javaScript 庫的一個優雅方式是講其代理到 Vue 的原型對象上去. 按照這種方式, 我們引入 Moment 庫:
entry.js
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });

由於所有的組件都會從 Vue 的原型對象上繼承它們的方法, 因此在所有組件/實例中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全局變數或者手動的引入.
MyNewComponent.vue
export default {
created() {
console.log('The time is ' . this.$moment().format("HH:mm"));
}
}

③ vue外部js動態載入

vue項目中有時候會遇到載入遠程（網路）js的情況，常用的方法有以下兩種：

以載入在線的cesium為例

在組件中可以通過window.Cesium來獲取載入的js，示例如下：

在main.js里注冊組件

注意：注冊組件一定要在newVue之前

在組件中使用：

這樣使用比較靈活還能在載入完成和載入失敗時做一些操作。