this.$emit('eventName', params) // eventName: 事件名 params: 参数,多个时使用,号隔开
// on 是用来监控emit抛出的事件(方法)的,如:
this.$on('eventClick', params)
methods: {
eventClick: function(params) {
}
}
// 大概就是这样子,希望能帮到你~
你这个问题全部内容应该是如下吧:在视频播放的时候,能够用on监听事件的触发,如下:player.on('pause',function(){console.log('视频暂停');})player.on('ended',function(){console.log('视频结束')})这个是什么原理,怎么自定义类似pause、ended的事件,并能够用on监听?麻烦指教相当于来说你要维护一个事件队列。player对象大概有这么些属性{on: func(key, callback),emit: func(key),events: object}events是一个对象,数据结构如下:{pause: [func, func]}调用on函数时,把event的key以及callback添加到events中。调用emit函数表示相应事件触发,根据相应的key从events中获取相应的callback数组,依次执行函数。<template><div class="confirm">
<div class="shade"></div>
<div class="content">
<div class="top">提示</div>
<div class="center">{{title}}</div>
<div class="bottom">
<button v-on:click="clickBtn(true)">确定</button>
<button v-on:click="clickBtn(false)">取消</button>
</div>
</div>
</div>
</template>
<script>
// import Vue from 'vue'
export default {
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() {
//垂直居中
var windowHeight=window.innerHeight
var domObj=document.querySelector('.content')
var domObjHeight=domObj.offsetHeight
//console.log(domObjHeight)不知道为啥获取不到高
var top=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:1width: 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: 1px solid #D5D5D5
}
.center{
padding: 20px
line-height: 20px
font-size: 14px
}
.bottom{
border-top: 1px solid #D5D5D5
text-align:center
height: 46px
line-height: 46px
background: #f6f6f6}
.bottom button{width: 60px border: none height: 30px display: inline-block }
.bottom button:first-child{background-color:#1E9FFFcolor: whitemargin-right: 3px}
.bottom button:last-child{margin-left: 3px}
</style>
<!-- 插件开发教程 -->
<!-- https://cn.vuejs.org/v2/guide/plugins.html -->
<!-- 此办法行不通
http://www.cnblogs.com/yufann/p/Vue-Node8.html -->