vue组件实践-可搜索下拉框

绝地灬酷狼 2021-09-19 15:38 363阅读 0赞

一、效果

![70][]

二、组件代码   
dropdown.vue

<template>  
    <div class="vue-dropdown default-theme" v-show-extend="show">  
        <div class="search-module clearfix" v-show="itemlist.length">  
            <input class="search-text"   
            @keyup='search($event)' :placeholder="placeholder" />  
            <span class="glyphicon glyphicon-search search-icon"></span>  
        </div>  
        <ul class="list-module" v-show="length">  
            <li v-for ="(item,index) in datalist" @click="appClick(item)"   
            :key="index">  
                <span class="list-item-text">\{ \{item.name\}\}</span>  
            </li>  
        </ul>  
        <div class="tip\_\_nodata" v-show="!length">\{ \{nodatatext\}\}</div>  
    </div>  
</template>

<script>  
    export default \{  
        data()\{  
            return \{  
                datalist:\[\]  
            \}  
        \},  
        props:\{  
            'show':\{//用于外部控制组件的显示/隐藏  
                type:Boolean,  
                default:true  
            \},  
            'itemlist':Array,  
            'placeholder':String,  
            'nodatatext':String  
        \},  
        watch:\{  
            itemlist:function(val)\{  
                this.datalist = val.concat();  
            \}  
        \},  
        directives:\{  
            'show-extend':function(el,binding,vnode)\{//bind和 update钩子  
                let value = binding.value,searchInput = null;  
                if(value)\{  
                    el.style.display='block';  
                \}else\{//隐藏后，恢复初始状态  
                    el.style.display='none';  
                    searchInput = el.querySelector(".search-text");  
                    searchInput.value = '';  
                    vnode.context.datalist = vnode.context.itemlist;//还原渲染数据  
                \}  
            \}  
        \},  
        methods:\{  
            appClick:function(data)\{  
                this.$emit('item-click',data);  
            \},  
            search:function(e)\{  
                let vm = this,searchvalue = e.currentTarget.value;  
                vm.datalist = vm.itemlist.filter(function(item,index,arr)\{  
                    return item.name.indexOf(searchvalue) != -1;  
                \});  
            \}  
        \},  
        computed:\{  
            length:function()\{  
                return this.datalist.length;  
            \}  
        \}  
    \}  
</script>

<style lang="scss" scoped>  
    .vue-dropdown.default-theme \{  
        position: absolute;  
        left:15%;  
        display: none;  
        width: 70%;  
        margin: 0 auto;  
        margin-top: 1em;  
        padding: 1em;  
        z-index:10;  
        box-shadow: 0px 0px 10px \#ccc;  
        &.\_self-show \{  
            display: block!important;  
        \}

.search-module \{  
            position: relative;  
            .search-text \{  
                width: 100%;  
                height: 30px;  
                padding-right: 2em;  
                padding-left:0.5em;  
                border-radius: 0.5em;  
                box-shadow: none;  
                border: 1px solid \#ccc;

&:focus \{  
                    border-color: \#2198f2;  
                \}  
            \}

.search-icon \{  
                position: absolute;  
                top: 24%;  
                right: 0.5em;  
                color: \#aaa;  
            \}

\}

.list-module \{  
            max-height: 200px;  
            overflow-y: auto;  
            li \{  
                &.\_self-hide \{  
                    display: none;  
                \}  
                margin-top: 0.5em;  
                padding: 0.5em;  
                &:hover \{  
                    cursor:pointer;  
                    color: \#fff;  
                    background: \#00a0e9;

\}  
            \}  
        \}  
    \}  
    .tip\_\_nodata \{  
        font-size: 12px;  
        margin-top: 1em;  
    \}  
</style>

三、组件使用

<dropdown :itemlist="itemlist" :placeholder="placeholder" :nodatatext="nodatatext"></dropdown>

作者：wl\_   
来源：CSDN   
原文：https://blog.csdn.net/wanglei1991gao/article/details/80537421   
版权声明：本文为博主原创文章，转载请附上博文链接！

[70]: /images/20210725/ebfd19e751c84e15af93808fd785ba64.png

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 下拉搜索框实现

今天有个需求要写一个下拉搜索框，本来是下拉框的，由于内容太多，所以添加一个查找功能。根据[博客][Link 1]进行改写的。参考了他的基本框架进行实现。效果图： ![

雨点打透心脏的1/2处/ 2022年12月14日 03:58/ 0 赞/ 372 阅读

相关 vue 组件实例自动提示的搜索框

<template> <div class="wrapper"> <el-autocomplete size="small"

你的名字/ 2022年11月15日 11:25/ 0 赞/ 178 阅读

相关 Ant Design Vue下拉选择框增加可搜索功能（Ant Design Vue Select选择器）

Ant Design Vue下拉选择框增加可搜索功能打开Ant Design Vue官网，找到[Select选择器（点击进入）][Select]，见如下示例：![在这里插入

末蓝、/ 2022年10月28日 01:29/ 0 赞/ 701 阅读

相关搜索下拉框级联

$('\cat\_type').change(function()\{ var id = $(this).children(

左手的ㄟ右手/ 2022年08月10日 16:32/ 0 赞/ 262 阅读

相关【easyUI】下拉框中加datagrid-combogrid组件应用

应用效果 ![这里写图片描述][SouthEast] 代码 html代码 <input type="text" id="oldProj"> js代码

布满荆棘的人生/ 2022年06月13日 00:07/ 0 赞/ 272 阅读

相关有下拉的搜索框

今天一上就做出来这么个玩意，真的伤。。。不过总算是做出来，样式勉强能看。有需要的可以参考一下代码没有提炼比较乱就是，先看下具体样式吧 ![70][] css

淡淡的烟草味﹌/ 2022年05月22日 09:35/ 0 赞/ 261 阅读

相关 bootstrap-select插件实现下拉框搜索功能

工作上要用到在下拉框内实现搜索功能，原生的select标签是不能输入的，所以最终找到了bootstrap-select插件，功能十分强大，支持搜索，多选，分组选中等。本文摘

╰半夏微凉°/ 2022年05月12日 11:06/ 0 赞/ 608 阅读

相关 LayaAir UI 组件 # Clip 切片、ComboBox 下拉框

目录 Clip 切片默认Clip 资源自定义Clip 资源 ComboBox 编码示例 -------------------- Clip 切片

逃离我推掉我的手/ 2022年04月02日 15:36/ 0 赞/ 527 阅读

相关 layui的下拉搜索框

html部分通过给select设定属性 lay-search 来开启搜索匹配功能，给select父级layui-form的类名，一定要搭配使用才能显示 <div c

小灰灰/ 2022年03月28日 09:37/ 1 赞/ 1635 阅读

相关 vue组件实践-可搜索下拉框

一、效果 ![70][] 二、组件代码 dropdown.vue <template> <div class="vue-dropdown defaul

绝地灬酷狼/ 2021年09月19日 15:38/ 0 赞/ 364 阅读