好久没写东西，是时候搞一波了。
最近接手了一个新项目，设计狮要求严格按照设计稿来，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 组件就算可以用了，以后有时间可以优化一下，今天到此为止。