大家好今天將開始新的系列`基於vue3實現自己的元件庫`,本文預設你會安裝和建立vue3專案，如果不會請參考[vue官網](https://v3.cn.vuejs.org/guide/installation.html),廢話不多說開始實現本章的目標`Message`元件；

### 建立元件庫工程目錄

- `vair是元件庫的名字(名字大家隨意)`

![image.png](https://img-blog.csdnimg.cn/img_convert/efa342cc12816d137389ab8e8ef8ec95.png)

### 安裝專案依賴

```
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" 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 computedIconClass = (type) => {
            switch (type) {
                case 'prompt':
                    return 'iconfont icon-tishi';
                case 'success':
                    return 'iconfont icon-success';
                case 'warning':
                    return 'iconfont icon-jinggao--';
                case 'error':
                    return 'iconfont icon-cuowu';
            }
        };

return {
            messageList,
            contentList,
            close,
            message,
            success,
            warning,
            error
        }
    }
});
```

### css

```
<style lang="less" scoped="">
@import url('http://blog.itpub.net/assets/css/animation.css');
.v-message {
    position: fixed;
    z-index: 99999;
    top: 50px;
    left: 0;
    right: 0;
    margin: auto;
    width: 380px;
    .message-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        box-sizing: border-box;
        border-radius: 6px;
        padding: 14px;
        overflow: hidden;
        border: 1px solid transparent;
        animation: messageShow .5s;
        animation-fill-mode: forwards;
        .content {
            font-size: 12px;
            line-height: 20px;
            flex: 1;
        }
        .close {
            cursor: pointer;
            &:hover {
                color: #6b6b6b;
            }
        }
        i {
            font-size: 18px;
        }
        .icon {
            margin-right: 14px;
        }
    }
    .center {
        justify-content: center;
        .content {
            flex: 0 1 auto;
        }
    }
    .messageHide {
        animation: messageHide .2s linear;
        animation-fill-mode: forwards;
    }
    .prompt {
        border: 1px solid #ebeef5;
        background-color: #edf2fc;
        .content, i {
            color: #909399;
        }
    }
    .success {
        background-color: #f0f9eb;
        border-color: #e1f3d8;
        .content, i {
            color: #67C23A;
        }
    }
    .warning {
        background-color: #fdf6ec;
        border-color: #faecd8;
        .content, i {
            color: #E6A23C;
        }
    }
    .error {
        background-color: #fef0f0;
        border-color: #fde2e2;
        .content, i {
            color: #F56C6C;
        }
    }
}
</style>
```

### animation.css

- `這個檔案的功能就是定義元件所需的動畫`

```
@keyframes messageShow {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes messageHide {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);
        opacity: 0;
    }
}
```

### 編寫message.js

```
import Message from "./Message.vue";
import { createApp } from "vue";

const createMessage = function () {
    const div = document.createElement("div");
    div.id = "v-message";
    document.body.appendChild(div);
    return createApp(Message).mount("#v-message");
};

export default createMessage();
```

### 編寫vair出口 index.js

- `後續這個檔案會引入很多元件`

```
// Message 訊息提示
import Message from './components/Message/message.js';

const Vair = function(Vue) {
    // Message 訊息提示
    Vue.config.globalProperties.$message = Message;
}

export default Vair;
```

### 使用元件庫

- `在main.js中引入`

```
import { createApp } from 'vue';
import App from './App.vue';
import Vair from './libs/vair/index.js';

const app = createApp(App);
app.use(Vair).mount('#app');
```

### App.vue中呼叫

```
<template>
    <div class="message">
        <p class="button">成功</p>
        <p class="button">警告</p>
        <p class="button">錯誤</p>
        <p class="button">可關閉</p>
        <p class="button">文字居中</p>
    </div>
</template>

### 效果展示

![image.png](https://img-blog.csdnimg.cn/img_convert/bf956112b1f5e65b690fa1f6851c76d4.png)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/8c1d2cfd240e4595b7e16e5c7b4652ab.jpeg#pic_center)

web技術分享| 基於vue3實現自己的元件庫，第一章：Message元件

相關文章