vue封装element ui组件 —— 以 el-process 标签为例

1、封装

根据 element UI 的进度条 ，将你用到的一些属性都以子组件取参（props）的形式注册，必填或者指定默认值的用格式1，其他的你可以指定参数类型。其他情况请参考[官方文档]。(https://cn.vuejs.org/v2/guide/components-props.html)

<template>
	<el-progress 
	:type="type" 
	:percentage="percentage" 
	:status="status" 
	:width="width"
	:stroke-width="strokeWidth"
	/>
</template>

<script>
	export default {
		// 可以理解为注册绑定参数，并赋默认值
		props: { 
			type: {
				type: String,
				default: "circle"
			},
			percentage: {
				type: Number,
				default: 20 
			},
			colors: {
				type: String,
				default: "circle"
			},
			status: String,
			width: Number,
			strokeWidth:{
				type: Number,
				default: 6
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

2、使用

1）在需要使用的页面引入该组件，并在 components 中注册；
2）写上你需要放的参数

<template>
	<div style="background-color: #fff;padding: 30px;">
		<!-- 3、使用 -->
		<Process :strokeWidth="15" />
	</div>
</template>

<script>
	import Process from '@/components/Progress/index.vue'；// 1、导入
	export default {
		components:{Process},// 2、引入
		methods: {
			test() {}
		}
	}
</script>

<style></style>