vue全局组件——媒体库组件

创建全局组件：
在main.js中引入MediaSelect组件，定义为全局组件

import MediaSelect from './components/common/MediaSelect'

Vue.component('MediaSelect', MediaSelect)

然后在需要使用的页面使用：

<media-select v-if="isSelect" @close="closeMedia" @overSelectMedia="overSelectMedia"></media-select>

Attributes

参数	说明	类型	方法
v-if	是否展示	string	v-if可承接一个变量，响应的显示隐藏
@close	关闭的方法	function	点击关闭按钮的回调函数，在函数内把v-if承接的变量改为false即可关闭
@overSelectMedia	媒体库选择完成回调函数	function	回调函数接收一个参数str，为选择图片的src
@overSelectFile	本地图片选择完成回调函数	function	回调函数接收一个参数str，为选择图片的src

在使用的页面需要先写入组件标签，v-if监听一个变量在页面内判断是否显示组件；@close在组件内触发页面的一个方法，在方法中把v-if监听的变量变为false来达到关闭组件的效果；@overSelectMedia通过this.$emit触发页面内一个方法并传过来选择的图片src，在页面中接收src；@overSelectFile同@overSelectMedia