徐向博 / Imin.

Vue 自定义下拉框组件
作者:Imin 时间:2019-04-11 分类: 前端

好久没写东西,是时候搞一波了。

最近接手了一个新项目,设计狮要求严格按照设计稿来,so,只能放弃UI框架,自己写组件了,略苦逼。

平时用的最多的是Element-ui,组件都是很成熟的,拿来即用,很多内在的东西都不用去关心。直到需要自己去写的时候这些问题才会暴露出来,发现对于vue的基础知识欠缺很多,所以边写边学习吧。

写select组件的时候,发现有些东西还是挺 “可爱” 的,写下来分享一下,也算做一个笔记!

不怎么擅长写作,所以直接贴代码  : )

首先是模板部分:

<template>
    <div class="imSelector" @mouseleave="mouseleave">
        <p class="imSelectorTitle" @click="selectorToggle">
            {{value ? value : (title ? title : '-- 请选择 --')}} <i class="dh dhxiala"></i> 
        </p>
        <el-collapse-transition>
            <div class="imSelectorMenu" v-show="show">
                <p @click="getMenu(null, mark)">{{title ? title : '-- 请选择 --'}}</p>
                <p v-for="(menu, index) in items" :key="index" @click="getMenu(menu, mark)">
                    {{dataItem}}
                </p>
            </div>
        </el-collapse-transition>
    </div>
</template> 

其次是js:

<script>
    export default {
        name: 'imSelector',
        props:['title', 'items', 'show', 'value', 'mark'],
        methods: {
            selectorToggle: function(event){
                this.$emit('click', event);
            },
            getMenu: function(value, mark){
                this.$emit('chose', {data: value, mark: mark});
            },
            mouseleave: function(event){
                this.$emit('mouseleave', event)
            }
        }
    }
</script>


先解释一下这几个事件:

mouseleave:当鼠标滑出当前selector的时候关闭下拉选项,这里有个问题,原则上来说这个地方可以定义为组件内部事件,不需要在调用组件的时候再去添加一个mouseleave事件,但是在内部定义这个事件会在执行的时候报一个warn,大概意思是vue不建议在组件内部修改父组件传过来的数据,emmm....通常情况下我们是不关心warn的,但是强迫症你懂的,,,,这个问题肯定可以通过其他方式解决的,但由于对VUE没有很深入的研究,而且暂时没有太多时间去处理,所以先放着。

selectorToggle:没什么说的,切换下拉选项的显示 or 隐藏。

getMenu:选择某一项,带两个参数,第一个参数title 是选择项的数据,为null则代表不选择任何项。第二个参数mark用于标记当前selector,避免调用多个组件时出现冲突。点击时向父组件传递一个chose事件,参数为选择的下拉项和当前标记。

然后是 props:

title:下拉框的标题,默认为--- 请选择 ---。

items:下拉选项的列表,接受一个数组。

show:控制下拉框的显示 or 隐藏。

value:下拉框当前状态的值。

mark:下拉框唯一标记

说明:<el-collapse-transition>这里是使用了 element-ui的过渡效果,与组件内容无关。样式部分就不贴了,没什么可说的。(其实是懒)

以上,一个基本的 select 组件就算可以用了,以后有时间可以优化一下,今天到此为止。

本文标签: vue组件

说说文字: 开发中遇到的问题,这回解决了,谢谢博主~ 2019-07-03 17:06
麻辣: 如此好文章一定要留下名啊 2019-04-13 23:10
掼蛋游戏下载: 博主终于更新经典文章,看到这么好的文章,博主应该是一个厉害的人 2019-04-13 09:26
Imin: 哪位大神看到了,可以帮我优化一下啊 (๑•ᴗ•๑) 2019-04-11 14:22