Vue封装组件

Vue组件创建与全局注册

最新推荐文章于 2025-10-16 05:48:20 发布

原创最新推荐文章于 2025-10-16 05:48:20 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

1.创建组件文件

import { withInstall } from '@/utils/tool'
import FastTableProjectColumn from './src/fast-table-project-column.vue'

export default withInstall(FastTableProjectColumn)

// 全局组件安装
export const withInstall = <T>(component: T, alias?: string) => {
	const comp = component as any
	comp.install = (app: App) => {
		app.component(comp.name || comp.displayName, component)
		if (alias) {
			app.config.globalProperties[alias] = component
		}
	}
	return component as T & Plugin
}

<template>
	<el-table-column
		:prop="prop"
		:label="label"
		:header-align="headerAlign"
		:align="align"
		:width="width"
		:min-width="minWidth"
		:class-name="className"
	>
		<template #default="scope">
			{{ getValByProjectId(store.appStore.projectList, scope.row[props.prop]) }}
		</template>
	</el-table-column>
</template>

<script setup lang="ts" name="FastTableProjectColumn">
	
import store from '@/store'
import { getValByProjectId } from '@/utils/tool'

const props = defineProps({
	prop: {
		type: String,
		required: true
	},
	label: {
		type: String,
		required: true
	},
	headerAlign: {
		type: String,
		required: false,
		default: () => 'center'
	},
	align: {
		type: String,
		required: false,
		default: () => 'center'
	},
	width: {
		type: String,
		required: false,
		default: () => ''
	},
	minWidth: {
		type: String,
		required: false,
		default: () => ''
	},
	className: {
		type: String,
		required: false,
		default: () => ''
	}
})
</script>

// 获取字典Label
export const getDictLabel = (dictList: any[], dictType: string, dictValue: string) => {
	const type = dictList.find((element: any) => element.dictType === dictType)
	if (type) {
		const val = type.dataList.find((element: any) => element.dictValue === dictValue + '')
		if (val) {
			return val.dictLabel
		} else {
			return dictValue
		}
	} else {
		return dictValue
	}
}

2.注册全局组件

import FastTableColumn from '@/components/fast-table-column'
app.use(FastTableColumn)