inputAuto.vue 基於vue+iview的搜尋下拉選擇元件

• • • 起因
    • 直接上程式碼
    • 效果圖
    • 總結

起因

iview中的select和AutoComplete不能滿足我的需求，主動權還得在自己手中，故自己寫。

直接上程式碼

//需要引入iview和vue

<template>
<div style="width:100%;">
    <Poptip trigger="focus" :transfer="true" placement="bottom-start" :popper-
 
class="!isShow ? popperClass : ''">
        <Input style="display:inline-block;width:100%" :placeholder="placeholder" v-model.trim="inputVal" clearable  @on-focus="onFocus" @on-blur="onBlur" @on-change="onChange" :autofocus="true"
 
>
        </Input>
        <div class="api" slot="content" style="max-height:300px;height:auto;overflow:auto;" v-show="isShow">

            <div v-for="option in data" :key="option.id" @click="selectCurrentVal(option)"
 
>
                <a style="height:30px;line-height:30px;width:100%;display:inline-block;">
                    {{option.fullName || option.name}}
                </a>
            </div>
            <div v-if="data.length == 0">
                暫無資料...
            </div>
        </div>
    </Poptip>
</div>
</template>

<script>
export default {
    name: 'inputAuto',
    props: ["data", "placeholder"],
    data() {
        return {
            inputVal: "",
            isShow: false,
            popperClass: 'popper-class',
        }
    },
    methods: {
        onChange(){
            this.$emit("selectCurrentVal", {id:""});
            this.search();
        },
        onBlur() {
            this.search();
        },
        onFocus() {
            this.search();
            this.isShow = true;
        },
        search() {
            this.$emit("search", this.inputVal)
        },
        selectCurrentVal(opt) {
            this.inputVal = opt.fullName || opt.name;
            debugger
            this.$emit("selectCurrentVal", opt);
            this.isShow = false;
        }
    }
}
</script>

<style lang="" scoped>
a {
    color: #515a6e;
}

a:link {
    color: #FF0000
}

/* 未訪問時的狀態 */
a:visited {
    color: #00FF00
}

/* 已訪問過的狀態 */
a:hover {
    color: #2d8cf0
}

/* 滑鼠移動到連結上時的狀態 */
a:active {
    color: #0000FF
}

/* 滑鼠按下去時的狀態 */
</style>

效果圖

總結

現在的元件雖香，但是滿足不了個性化，自己二次封裝的能力還得有。