标签：vue String default element ui components props 组件 type

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>

标签：vue,String,default,element,ui,components,props,组件,type
来源： https://blog.csdn.net/qq_43392573/article/details/118603136

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。