做网站公司怎么样,网站建设网站制作需要多少钱,网络营销是什么部门,wordpress手机站如何做将动作或菜单折叠到下拉菜单中。 1.如何使用#xff1f;
移动到下拉菜单上#xff0c;展开更多操作。
//通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下#xff0c;下拉按钮只要hover即可#xff0c;无需点击也会显示下拉菜… 将动作或菜单折叠到下拉菜单中。 1.如何使用
移动到下拉菜单上展开更多操作。
//通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。默认情况下下拉按钮只要hover即可无需点击也会显示下拉菜单。el-dropdownspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item disabled双皮奶/el-dropdown-itemel-dropdown-item divided蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownstyle.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
/style
2.触发对象
可使用按钮触发下拉菜单。
//设置split-button属性来让触发下拉元素呈现为按钮组左边是功能按钮右边是触发下拉菜单的按钮设置为true即可。el-dropdownel-button typeprimary更多菜单i classel-icon-arrow-down el-icon--right/i/el-buttonel-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item双皮奶/el-dropdown-itemel-dropdown-item蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdown
el-dropdown split-button typeprimary clickhandleClick更多菜单el-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item双皮奶/el-dropdown-itemel-dropdown-item蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownstyle.el-dropdown {vertical-align: top;}.el-dropdown .el-dropdown {margin-left: 15px;}.el-icon-arrow-down {font-size: 12px;}
/stylescriptexport default {methods: {handleClick() {alert(button click);}}}
/script
3.触发方式
可以配置 click 激活或者 hover 激活。
在trigger属性设置为click即可。el-row classblock-col-2el-col :span12span classdemonstrationhover 激活/spanel-dropdownspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item iconel-icon-plus黄金糕/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus狮子头/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus-outline螺蛳粉/el-dropdown-itemel-dropdown-item iconel-icon-check双皮奶/el-dropdown-itemel-dropdown-item iconel-icon-circle-check蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdown/el-colel-col :span12span classdemonstrationclick 激活/spanel-dropdown triggerclickspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item iconel-icon-plus黄金糕/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus狮子头/el-dropdown-itemel-dropdown-item iconel-icon-circle-plus-outline螺蛳粉/el-dropdown-itemel-dropdown-item iconel-icon-check双皮奶/el-dropdown-itemel-dropdown-item iconel-icon-circle-check蚵仔煎/el-dropdown-item/el-dropdown-menu/el-dropdown/el-col
/el-rowstyle.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}.demonstration {display: block;color: #8492a6;font-size: 14px;margin-bottom: 20px;}
/style
4.菜单隐藏方式
可以hide-on-click属性来配置。
//下拉菜单默认在点击菜单项后会被隐藏将hide-on-click属性默认为false可以关闭此功能。el-dropdown :hide-on-clickfalsespan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item disabled双皮奶/el-dropdown-itemel-dropdown-item divided蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownstyle.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
/style
5.指令事件
点击菜单项后会触发事件用户可以通过相应的菜单项 key 进行不同的操作
el-dropdown commandhandleCommandspan classel-dropdown-link下拉菜单i classel-icon-arrow-down el-icon--right/i/spanel-dropdown-menu slotdropdownel-dropdown-item commanda黄金糕/el-dropdown-itemel-dropdown-item commandb狮子头/el-dropdown-itemel-dropdown-item commandc螺蛳粉/el-dropdown-itemel-dropdown-item commandd disabled双皮奶/el-dropdown-itemel-dropdown-item commande divided蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownstyle.el-dropdown-link {cursor: pointer;color: #409EFF;}.el-icon-arrow-down {font-size: 12px;}
/stylescriptexport default {methods: {handleCommand(command) {this.$message(click on item command);}}}
/script
6. 不同尺寸
Dropdown 组件提供除了默认值以外的三种尺寸可以在不同场景下选择合适的尺寸。
//额外的尺寸medium、small、mini通过设置size属性来配置它们。el-dropdown split-button typeprimary默认尺寸el-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item双皮奶/el-dropdown-itemel-dropdown-item蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownel-dropdown sizemedium split-button typeprimary中等尺寸el-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item双皮奶/el-dropdown-itemel-dropdown-item蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownel-dropdown sizesmall split-button typeprimary小型尺寸el-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item双皮奶/el-dropdown-itemel-dropdown-item蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdownel-dropdown sizemini split-button typeprimary超小尺寸el-dropdown-menu slotdropdownel-dropdown-item黄金糕/el-dropdown-itemel-dropdown-item狮子头/el-dropdown-itemel-dropdown-item螺蛳粉/el-dropdown-itemel-dropdown-item双皮奶/el-dropdown-itemel-dropdown-item蚵仔煎/el-dropdown-item/el-dropdown-menu
/el-dropdown
