寫一個VUE元件有感

最近開始工作了，其中的一個小任務就是寫一個通用的提示元件，產品意思大概就是，滑鼠經過提示元件圖示，就出現提示資訊。

內心os: 太簡單啦～

開始動手

<template>
    <div>
        <i @mouseover="showTips()" @mouseout="showTips"></i>
        <p v-if="show">{{tipsMessage}}<p>
    </div>
</template>

showTips() {
    this.show = !this.show;
}

幾分鐘完成。

然而，帶我的看完程式碼，面色凝重，“不對，你這不對”

“那裡不對？”
“我們專案裡面有些地方沒有用到VUE，那些地方怎麼引用？”

為了在非vue的頁面也能夠使用，決定用動態新增class的方法來做，這樣在非vue的頁面可以手動去新增class來實現效果。

最終程式碼：

<template>
        <i :class="{
                `base-tips`: true,
                `after-tips`: !tipsType,
                `slot-tips`: tipsType,
                `hover-tips`: !showTips && !tipsType,
                `show-tips`: showTips && !tipsType,
                `border-tips`: borderTips && !tipsType,
                `tips-icon`: showIcon,
                `tips-force-wrap`: forceWrap,
                `this-auto-wrap`: autoWrap
                }" 
                :value="tips" 
                :style ="{ 
                    maxWidth: maxWidth+`px`, 
                    maxHeight: maxHeight + `px`, 
                    minHeight: minHeight+`px`,
                    minWidth: minWidth+`px`,
                    fontSize: fontSize+`px`,
                    color: fontColor }"
                >
            <div v-if="tipsType">
                <p class="slot-box" >
                    <slot></slot>
                </p>
            </div>
        </i>
</template>

<script>
    import Vue from `vue`
    export default {
        name: "VueTabs",
        props: {
            tipsType: { // 如果是0，就是不用換行自定義
                type: Number,
                default: 0
            },
            tips:{
                type: String,
                default: ""
            },
            showIcon: { //圖示是否顯示
                type: Boolean,
                default: true
            },
            showTips:{ //提示一開始是否顯示
                type: Boolean,
                default: false
            },
            maxHeight: {
                type: Number,
                default: null
            },
            maxWidth: {
                type: Number,
                default: null
            },
            minHeight: {
                type: Number,
                default: null
            },
            minWidth: {
                type: Number,
                default: null
            },
            autoWrap: { //自動換行
                type: Boolean,
                default: true
            },
            forceWrap: { //強制不換行，超出內容....
                type: Boolean,
                default: false
            },
            borderTips: { //是否要border
                type: Boolean,
                default: true
            },
            fontSize: { //字型大小
                type: Number,
                default: 12
            },
            fontColor: {
                type: String,
                default: `#666666`
            }
        },
        data() {
            return {
                isSlot: false
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less">
.slot-tips{
    .slot-box{
        display: none;
        position: absolute;
        margin: 0 0 0 18px;
        padding: 2px;
        background: #ffffff;
        border: 1px solid #d5d5d5;
        border-radius: 3px;
    }
    &:hover{
        .slot-box{
            display: block;
        }
    }
}
</style>

在使用元件的時候可以自定義元件內部顯示的形式，也有預設的形式，大體實現一下功能：

• 支援Vue和普通頁面使用
• 提示內容支援設定有最大和最小的高度和寬度的限制
• 圖示支援顯示隱藏

• 多種顯示方式

  • 一個圖示，滑鼠移入顯示提示內容浮層
  • 直接顯示在頁面上

• 是否支援換行

  • 可以換行

    • 超出顯示區域自動換行
    • 使用者自主換行

  • 不能換行

    • 超出內容顯示區域出現省略號，滑鼠移入顯示完整內容

小小的元件，其實程式碼並不複雜，但是在寫的時候學會去考慮很多東西，一個好的元件應該是怎樣的。
好的元件應該是通用的，在寫的時候應該去考慮各種使用環境。