vue自定义下拉框组件,vue实现下拉菜单功能代码
这篇文章主要为大家详细介绍了某视频剪辑软件下拉菜单组件化开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件下拉菜单组件化开发的具体代码，供大家参考，具体内容如下
搞一个自定义组件，只是一个很简单的下拉菜单，也就是一个思路，整起
第一步：在项目中专门创建一个放置自定义组件的文件夹（直接成分底下的普通中)
dropdown.vue为一级盒子
dropdownMenu.vue为二级盒子
dropdownItem.vue为二级盒子内容
第二步 ：
对dropdown.vue的操作
模板
div class=box
！-给按钮加点击事件-
div @click=showM
！-一级按钮-
插槽名称=标题/插槽
/div
！-二级盒子-
！-加控制显示操作隐藏显示效果-
slot v-if= show name= drop down /slot
/div
/模板
脚本
导出默认值{
名称：下拉列表，
data() {
返回{
//默认二级盒子关闭
显示：假
}
},
方法：{
showM() {
this.show=！这个。显示
},
提交点击(值){
//向父级暴露下拉式事件，并把值传入
这个$emit(更改项目，值)
}
}
}
/脚本
样式范围。方框{
显示：内嵌-块；/* 行内块*/
位置：相对；/* 相对定位*/
top:100px；
左边距：100像素
}
/风格
对于下拉菜单仅仅只是把它当作一个盒子，只需要添加一个插槽，把盒子搭好即可
模板
div class=下拉菜单
插槽/插槽
/div
/模板
脚本
导出默认值{
名称："下拉菜单"
}
/脚本
样式范围。下拉菜单{
填充：8px 0；/* 盒子内边距上下为8px左右为0 */
边框-半径：4px/*盒子圆角*/
边框：1px固体# f2f 6 fc/* 边框为1px灰色*/
位置：绝对；/* 绝对定位*/
右：0;/* 在右侧*/
top:110%；/* 盒子在按钮下方*/
背景色：# fff/*背景颜色为白色*/
盒影：0 2px 4px rgba(0，0，0，0.12)，0 0 6px rgba(0，0，0，04);
/* 为盒子添加阴影*/
}
/风格
对下拉项目的操作
模板
div class=下拉-项目 @ click=项目点击(值)
插槽/插槽
/div
/模板
脚本
导出默认值{
名称： dropdownItem ，
道具：[值],
data() {
return { }；
},
方法：{
项目点击(值){
//console.log(值)
//通过这调用当前组件的父级的父级也就是下拉式的showM()方法来进行关闭
这个父母。$ parent。showm()；
//调用父级的父级（下拉菜单)的提交点击方法并传如价值值
这个父母。$ parent。提交点击(值)；
},
},
};
/脚本
样式范围。下拉项目{
行高：40px/*行高40px */
空白：nowrap/*不换行*/
填充：0 20px/*内边距上下为0 左右为20px */
颜色：# 606266;/* 字体颜色为灰色*/
光标：指针；/* 鼠标移入为点击样子*/
}。下拉项目：悬停{
颜色：# 409eff/*字体颜色为蓝色*/
背景色：# ECF 5 ff；/* 背景颜色为浅~~蓝色非常浅就对了*/
}
/风格
接下来对App.vue文件进行操作
模板
div id=应用程序
下拉@ change-item=更改项目
按钮槽=标题按钮/按钮
下拉菜单slot=dropdown
下拉列表-项目值=吃的吃的/下拉列表-项目
下拉列表-项目值=喝的喝的/下拉列表-项目
下拉列表-项目值=玩的玩的/下拉列表-项目
/下拉菜单
/下拉菜单
/div
/模板
脚本
从导入下拉列表。/组件/公共/下拉菜单
从导入下拉菜单./组件/常用/下拉菜单；
从""导入dropdownItem ./components/common/下拉项目；
导出默认值{
名称："应用程序",
组件：{
下拉菜单，下拉项目
},
方法：{
变更项目(e){
console.log(e)
}
}
}
/脚本
在主页。射流研究…导入组件
从" @/组件/常用/下拉菜单"导入zgDropdown
从" @/组件/常用/下拉菜单"导入zgDropdownMenu
从" @/components/common/dropdownitm "导入zgDropdownItem
vue。组件( zgdropdownitm ，zgdropdownitm)
Vue.component(zgDropdown ，zgDropdown)
Vue.component(zgDropdownMenu ，zgDropdownMenu)
app.vue也要相应修改
模板
div id=应用程序
ZG-下拉@ change-item=更改项目
按钮槽=标题按钮/按钮
ZG-下拉菜单slot=dropdown
ZG-下拉列表-项目值=吃的吃的/ZG-下拉列表-项目
ZG-下拉列表-项目值=喝的喝的/ZG-下拉列表-项目
ZG-下拉列表-项目值=玩的玩的/ZG-下拉列表-项目
/ZG-下拉菜单
/ZG-下拉列表
/div
/模板
脚本
导出默认值{
名称："应用程序",
方法：{
变更项目(e){
console.log(e)
}
}
}
/脚本
样式范围
/风格
大概就是这么一个思路。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。