在移动端开发中，我们往往需要按照设计稿去高度还原效果图，并且实现交互方式，下面看一下一个标签的表现形式： select
在iOS中的表现：
但是在安卓上并不是这样的效果
交互表现得差异性需要优化，那么问题来了，怎么优化。如何去保持同一标签可以表现相同得样式和交互方式。其实这也是前端的重要工作之一：兼容性和适配，也对应着招聘的要求之一：高度还原设计稿；言归正传，看到select不同的表现。我们如何实现这个替换呢？用过element-ui，iview等框架的小伙伴都知道，他们为了保持统一的表现，放弃了select,option;而是封装了自己的el-select 或者Select;
iviewui中的select
以上框架都实现了select的封装，但是在开放中，我们如果没有使用它们自身的框架，而是我们项目本身的框架，用起来很是费劲；大家都知道前端开发现在最火的是组件化开发，组件就是组件，可以快速移植和安装；最重要的是可以差异化这个组件，而且你也便于维护；安装其中的某个组件，你可能要花费30分钟去修改配置和调试，但是极有可能不会成功，这是很痛心、很扎心；
那么推荐下面一个最简单的替换组件，
yh-select
这个组件昨天发布，对没有错就是我写的，支持 npm install yh-select ,目前只支持vue, 安装完成后，select option ,可以用一行标签搞定了，详情请看yh-select;(如果你想一起组队开发组件，那么请加微信xingguangbi,我们一起发布自己的组件)
修复不同的表现方式和交互方式，需要我们去替换产生差异的一些标签，用相同的标签去组装我们想要的效果：
下面分享一下我替换select的思路：
ul>li存放option的每一列，外面再来一个div包裹它，下拉的箭头实现，背景色去填充，不使用图片和字体图标，好处：尽量减少组件的依赖性，减少请求；
一个点击外部的指令
const clickoutsideContext = "@@clickoutsideContext"; export default { /* @param el 指令所绑定的元素 @param binding {Object} @param vnode vue编译生成的虚拟节点 */ bind(el, binding, vnode) { const documentHandler = function(e) { if (!vnode.context || el.contains(e.target)) { return false; } if (binding.expression) { vnode.context[el[clickoutsideContext].methodName](e); } else { el[clickoutsideContext].bindingFn(e); } }; el[clickoutsideContext] = { documentHandler, methodName: binding.expression, bindingFn: binding.value }; setTimeout(() => { document.addEventListener("click", documentHandler); }, 0); }, update(el, binding) { el[clickoutsideContext].methodName = binding.expression; el[clickoutsideContext].bindingFn = binding.value; }, unbind(el) { document.removeEventListener( "click", el[clickoutsideContext].documentHandler ); } };