web技术分享| 基于vue3实现自己的组件库，第一章：Message组件

大家好今天将开始新的系列基于vue3实现自己的组件库,本文默认你会安装和创建vue3项目，如果不会请参考vue官网,废话不多说开始实现本章的目标Message组件；

创建组件库工程目录

• vair是组件库的名字(名字大家随意)

安装项目依赖

npm install less -D
npm install less-loader -D

template

<template>
    <div class='v-message'>
        <div v-for='(config, index) in messageList' :key='config.id' 
        :ref= 'el => { if (el) contentList[index] = el}'
        :class='["message-item", config.customClass, config.type, { center: config.center }]'>
            <i :class='[config.iconClass, "icon"]'></i>
            <p class='content'>{
  { config.message }}</p>
            <i class='close iconfont icon-guanbi1' @click='close(config)' v-if='config.showClose'></i>
        </div>
    </div>
</template>

script

import { ref， defineComponent } from 'vue';

export default defineComponent({
    name: 'message',
    setup () {
        // 消息列表
        const messageList = ref([]);
        // ref列表
        const contentList = ref([]);

        const message = (options) => {
            computedConfig(options);
        }

        const success = (options) => {
            computedConfig(options, 'success');
        }

        const warning = (options) => {
            computedConfig(options, 'warning');
        }

        const error = (options) => {
            computedConfig(options, 'error');
        }

        const computedConfig = (options, ty