vue项目封装element-ui组件

1，准备一个抽屉组件popup.vue

<template>
	<div>
		<el-drawer
		  :title="id ? '修改' : '新增'"
			:wrapper-closable="false"
			:close-on-press-escape="false"
		  :visible.sync="visible"
		  direction="rtl"
		  :before-close="handleClose"
			 @close="closeDrawer()"
			>
		  <span>内容</span>
		</el-drawer>
	</div>
</template>

<script>
	 export default {
	    data() {
	      return {
	        visible: false,
					id:null
	      };
	    },
	    methods: {
			initDrawer: function(id) {
			  this.id = id
			  this.visible = true
			},
	      handleClose:function(done) {
	        this.visible = false
	      },
		closeDrawer: function() {
		  this.id = null
		},
	    }
	  };
</script>

<style>
</style>

2，在其他vue文件中使用组件

<template>
  <div class="hello">
    <el-button type="primary" icon="el-icon-plus" @click="addOrUpdatePopupRight()">新增</el-button>
	<el-button type="danger" @click="addOrUpdatePopupRight(id)">修改</el-button>
	<!--3，使用组件 -->
    <popup-right v-if="popupRightVisible" ref="popupRight"/>
  </div>
</template>

<script>
    //1,引入
	import popupRight from '../components/popup.vue';
	export default {
		name: 'HelloWorld',
		components: { //2，挂载
		  popupRight
		},
		data() {
			return {
			  popupRightVisible: false,
			  id:1
			};
		},
		methods: {
			addOrUpdatePopupRight:function(id){
				this.popupRightVisible = true
				this.$nextTick(() => {
				  this.$refs.popupRight.initDrawer(id) //调用组件中的方法
				})
			},
			
		}
	}
</script>


<style>

</style>