項目中會遇到一個組件/方法, 在多個地方被調用,比較方便的的方式之一,this.$custom(agruments) 這樣就比較方便
,不然用組件引入的辦法調用就就比較麻煩,每可能都需要這樣調用
import coustom from './coustom'
export default {
components: {
coustom
}
}
<coustom :data="data" v-if="show"></coustom>
換個辦法以自定義alert 爲例
就這麼一句就調用出來
this.$alert('哈哈哈');
alert.vue 如下
<template>
<transition name="dialog-fade">
<div v-if="show" class="modal fade dialog-modal" id="alert" role="dialog" data-backdrop="false" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row">
<h5 class="modal-title col-md-4">提示</h5>
<button type="button" class="close" aria-label="Close" @click="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-offset-1">{{message}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="close">確定</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Alert',
methods: {
close: function() {
this.show = false
}
}
}
</script>
對然後將Alert 掛載到vue全局 index.js
function install(Vue) {
Object.defineProperty(Vue.prototype, '$alert', {
get() {
let div = document.createElement('div')
document.body.appendChild(div);
return (message) => {
const Constructor = Vue.extend(Alert)
let Instance = new Constructor({
data() {
return {
message: message,
show: true
}
}
}).$mount(div);
};
}
});
}
export default install
最後vue.use 一下
import alert from 'index'
Vue.use(alert)
就能直接調用了
當然前面有個坑 transition 的 vue 的過渡 alert的div不是一開始就加載到文檔上的,通過後面的
document.body.appendChild(div);
動態寫入,就造成 alert 顯示時看不到transition效果,拋開vue來說也會遇到這樣的情況 可以settimeout 下 給append的元素 addClass
同理在vue 中也可以,當然還有更好的辦法暫時沒想到。。。。
alert 只是純的 傳遞一個param 但是需要 傳遞一個function 時,比如confirem
this.$confirm('請確定你是傻逼', () => console.log('yes')})
還是相同的味道,相同的道理
Confirm.vue
<template>
<transition name="dialog-fade">
<div v-if="show" class="modal fade" id="confirm" tabindex="-1" role="dialog"
data-backdrop="false" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row">
<h5 class="modal-title col-md-4">提示</h5>
<button type="button" class="close" @click="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-offset-1">{{message}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" @click="close">取消</button>
<button type="button" class="btn btn-primary" @click="ConfirmSure">確定</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Confirm',
methods: {
close: function() {
this.show = false
},
ConfirmSure() {
this.confirmSure()//確定關閉 由install 傳入
this.close()
}
}
}
</script>
import Confirm from './Confirm.vue'
function install(Vue) {
Object.defineProperty(Vue.prototype, '$confirm', {
get() {
let div = document.createElement('div')
document.body.appendChild(div);
return (message, confirmSure) => {
const Constructor = Vue.extend(Confirm)
const Instance = new Constructor({
data() {
return {
message: message,
show: true
}
},
methods: {
confirmSure: confirmSure //確定方法
}
}).$mount(div);
};
}
});
}
export default install
import alert from 'index' Vue.use(alert)
this.$confirm('你是猴子請來的唐僧麼', () => console.log('yes,哈哈哈哈哈'))
傳了兩個arguments,累了吧,輕鬆點,
片分三級,嗯········參數也得 至少能傳 三個。。。。
嗯,往哪裏看吶···!
這裏傳遞的params 才傳遞到第二個,才實現第二個功能,要麼要實現第三個功能呢,dialog對話框內容,根據環境應用環境傳遞進去顯示
<div class="midpass">
<div class="form-group form-group-inline flex" :class="errors.has('ans') ? 'has-error has-danger' : '' ">
<label class="form-control-label">1+1=?</label>
<div class="form-input-longer">
<input type="password" class="form-control form-control-title" name="ans" v-model="input.value"
v-validate="'required|min:1'" placeholder="請輸入答案">
<div class="help-block">請輸入答案</div>
</div>
</div>
</div>
export default {
name: 'oneaddone',
data() {
return {
input: {
value: null
}
}
}
}
<template>
<transition name="dialog-fade">
<div v-if="show" class="modal fade" id="popform" tabindex="-1"
role="dialog" data-backdrop="false" aria-hidden="true">
<div class="hide" id="formpop-btn" data-toggle="modal" data-target="#popform"></div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header row">
<h4 class="modal-title col-md-6 col-xs-4">{{message}}</h4>
<button type="button" class="close col-md-1" aria-label="Close" @click="close">
<span aria-hidden="true">×</span>
</button>
</div>
<form @submit.prevent="submit">
<div class="modal-body">
<keep-alive>
<component :is="modalBody" ref="forms"></component>
</keep-alive>
</div>
<div class="modal-footer">
<div class="center-block" style="width: 230px;">
<button type="button" class="btn btn-secondary" @click="close">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</div>
</form>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'dialog',
data() {
return {
Submit: () => {}
}
},
methods: {
close() {
this.show = false
},
setSubmit(dataKey, Submit) {
this.submit = () => { //給submit btn 設置提交方法
this.$children.map(function (child) {
let data = child.$data[dataKey] //data 的key 調用時傳遞的 data key 可以根據情景定義
child.$validator.validateAll().then((result) => {
if (result) {
Submit(data).then(res => {
if (res) this.close()
})
}
});
})
}
},
}
}
</script>
import dialog from './dialog.vue'
function install(Vue) {
Object.defineProperty(Vue.prototype, '$dialog', {
get() {
let div = document.createElement('div');
document.body.appendChild(div);
return (message, modalBody) => {
const Constructor = Vue.extend(dialog)
const Instance = new Constructor({
data() {
return {
message: message,
show: true,
modalBody: modalBody
}
}
}).$mount(div)
return Instance.setSubmit //放回 一個方法用於 傳遞 自定義的數據和 submit 時方法
};
}
});
}
export default install
Vue.use 同上this.$dialog('請計算下面的數學題', resolve =>
require(['./oneaddone.vue'], resolve))('input', (data) => {
this.$alert('哈哈哈,正確')
console.log(data)
return data
}
)
PS:這裏需要注意的是 this.$dialog()(); 是這樣的 因爲裏面返回的是一個方法,同時$mount 不能直接掛載在body 或者html下 必須在body的 子元素中 所以,createElement('div')
有需要的交流的可以加個好友