# 序在页面制作的过程中，经常需要使用到下拉框组件，有时候使用原生的 select 标签十分不便，因为存在 shadow root，shadow root 导致我们有时候修改样式时会非常麻烦 [《ShadowRoot介绍》](https://developer.mozilla.org/zh-CN/docs/Web/API/ShadowRoot) 使用 element UI 下拉框时，又遇到了选择的选项文字内容过长，不能够及时变省略号的现象，需要再次用鼠标点击后才能生效（果然 bug 依旧是程序员不变的主题） ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd64cba1a380490393077cb27aa8206b~tplv-k3u1fbpfcp-zoom-1.image) 虽然网上还有其他 UI 组件，但是因为当时我总体使用的是 element UI，不方便改用其他 UI 组件了。没有条件那就只有自己创造，自己动手丰衣足食。之前我也写过一篇下拉框组件的博客：[自定义一个适应vue的下拉框组件](https://kongchengji.blog.csdn.net/article/details/108436268) 这一次稍做修改，现在的下拉框组件由两个组件构成实现的效果： ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1378324bbc9348a1813968d4a3f4d40a~tplv-k3u1fbpfcp-zoom-1.image)

# 正文开始 ## 构思下拉框组件准备分成两个模块： * 第一块是用户能直接看到的内容框，有一个三角形箭头 * 第二块是用户点击内容框后触发的下拉列表框 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5dae3eb0a0ee40d78fb131f8df8876f8~tplv-k3u1fbpfcp-zoom-1.image) ## 外层首先，定义一个外部的模块组件 wzc-select.vue 旁边的三角符号为 font-awesome 图形，[font-awesome](https://fontawesome.dashgame.com/#top)是一个免费的图标字体库 * 使用npm install font-awesome下载 * 如果使用 main.js 的话，添加 import 'font-awesome/css/font-awesome.min.css'; * 使用 CDN 的话，用 link 引入：`````` * 使用时直接在 class 中添加相应的图表名，如`````` 外部组件调用时，可以对宽高还有 **placeholder** 进行设置这里的数据传值由父组件传给子组件数值 **props** 来完成。如果想要了解组件之间传值的方式，可以参考此文章：[《Vue 组件通信的 8 种方式》](https://xie.infoq.cn/article/d3333bb4321a8319a5141eb4f) 使用 props 接收 width、height、placeholder 三个值，可以使用 default 去设置默认值，如果外部没有传值，就会使用 default 中的数值 ```javascript props: { placeholder: { type: String, default: '请选择' }, width: { type: Number, default: 180 }, height: { type: Number, default: 40 }, } ``` 部分属性使用:root 的方式添加，这里可以自己了解 [《:root - CSS》](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:root) 在 vue 中，可以使用 compute 去设置一个styleVar对象 ```javascript computed: { styleVar() { return { '--select-height': this.height + 'px', '--select-width': this.width + 'px' } } } ``` 在 div 中通过:style 绑定styleVar ```

``` 这样就可以在下面的 style 中写 CSS 时直接使用这些宽高 ```css .wzc_select { border: 1px solid #E6E6E6; border-radius: 5px; height: var(--select-height); width: var(--select-width); line-height: var(--select-height); } ``` 外层的分为两部分，下面的 Selectlist 下拉框列表默认是隐藏的。 ```html ``` 如果需要在点击弹出下拉框时增加一些动作效果的话，可以使用``````框住下拉框。在 CSS 中写入 transition 动画效果 ```css .drop-down-enter { opacity: 0; transform:translate(0px, -80px) scaleY(0.2); } .drop-down-leave-to { opacity: 0; transform:translate(0px, -80px) scaleY(0.2); } .drop-down-enter-active { transition: all 0.5s ease-in; } .drop-down-leave-active { transition: all 0.5s ease; } ``` 在点击弹出和收起下拉框时需要做一个 document 的点击判断，如果点击在页面其他部分，就将下拉框收起 ```javascript document.addEventListener("click", function( e ){ if(_this.$refs.divSelect) { if ( !!_this.$refs.divSelect.contains(e.target) || !!_this.$refs.dropDown.contains(e.target) ) return; else _this.isListShow = false; } }) ``` 这样经过一些的考虑和操作之后，外层的部分就已经写完了让我们使用```import```将```wzc-select.vue```导入到页面中去吧，注意要在 ```components ```中注册 * 导入：```import wzcSelect from './wzc-select'``` * 注册：```components:{ wzcSelect }``` * 调用：`````` 目前当前的效果已经有了，不过比较基础 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9de02dbb1d44417b8374a079587b09c4~tplv-k3u1fbpfcp-zoom-1.image)

## 内层内层代码其实相对来说要简单的多，只需要展示外部传入的数据即可 ```html ``` 在 props 当中接收 CSS 的宽高属性，和 label 内容与 optionid 属性 ```javascript props: { // 宽 width: { type: Number, default: -1, }, // 高 height: { type: Number, default: 34, }, // 内容 label: { type: String, }, // id optionid: { type: String, }, }, ``` 在点击选择时，使用 $parent 去传递数据给外层 **wzc-select.vue** 组件 ```javascript currentSelect() { this.$parent.label = this.label; this.$parent.optionid = this.optionid; this.$parent.isListShow = !this.$parent.isListShow; } ``` 当然别忘记导入内层组件 ```import wzcOption from './wzc-option'```

## 外层和内层结合内层主要是一个```

```对象，在外层使用时，可以使用 slot 去让内层存放在相应显示的位置有关于 slot 插槽的介绍可以参考 ( 当然具体的学习得自己慢慢过一遍 )： * [https://cn.vuejs.org/v2/api/#slot](https://cn.vuejs.org/v2/api/#slot) * [https://cn.vuejs.org/v2/guide/components-slots.html](https://cn.vuejs.org/v2/guide/components-slots.html) 在父组件中调用时就可以添加完全了 ```html ``` 使用 showlist 为测试数据 ```javascript showlist: [ { item_name: "选项00000000000000000000000000000", item_id: "0", }, { item_name: "选项11111111111111111111111111111", item_id: "1", }, { item_name: "选项222222222222222222222222222222", item_id: "2", }, { item_name: "选项33333333333333333333333333333333", item_id: "3", }, ], ``` 好了，现在下拉框的实现效果就达到了需要的样式了 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6676dd5f82ee42a3920ad38625900dd6~tplv-k3u1fbpfcp-zoom-1.image)

## 外层 wzc-select.vue 完整代码 ```html ```

## 内层 wzc-option.vue 完整代码 ```html ```