fes.js/assets/js/56.9f4b303c.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{425:function(t,e,a){"use strict";a.r(e);var n={data:function(){return{data1:[{content:"number 1"},{content:"number 2"},{content:"number 3"}],data2:[{content:"number 1"},{content:"number 2"},{content:"number 3",disabled:!0},{content:"number 4",divided:!0}],data3:[{content:"number 1"},{content:"number 2"},{content:"sub 1",children:[{content:"number 3"},{content:"number 4",divided:!0},{content:"sub 2",children:[{content:"sub 3",children:[{content:"number 6"}]},{content:"number 5",disabled:!0}]}]}]}},methods:{clickItem:function(t){this.$Toast(t.content+" is clicked")}}},r=a(46),l=Object(r.a)(n,(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"dropdown-下拉菜单"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-下拉菜单"}},[t._v("#")]),t._v(" Dropdown 下拉菜单")]),t._v(" "),a("p",[t._v("向下弹出的列表。")]),t._v(" "),a("h2",{attrs:{id:"概述"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[t._v("#")]),t._v(" 概述")]),t._v(" "),a("p",[t._v("当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。")]),t._v(" "),a("h2",{attrs:{id:"代码示例"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#代码示例"}},[t._v("#")]),t._v(" 代码示例")]),t._v(" "),a("ClientOnly",[a("row",[a("cell",{staticClass:"pr-20",attrs:{span:"12"}},[a("componetTemplate",{attrs:{title:"基本使用",template:"ui/templates/dropdown/1.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("Dropdown",{attrs:{data:t.data1}},[a("Wb-button",{attrs:{type:"primary"}},[t._v("Hover")])],1)]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("在data中提供下拉菜单数据内容，数据格式见API")])]},proxy:!0}])}),t._v(" "),a("componetTemplate",{attrs:{title:"多级菜单",template:"ui/templates/dropdown/2.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("Dropdown",{attrs:{data:t.data3}},[a("Wb-button",{attrs:{type:"primary"}},[t._v("Hover")])],1)]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("传入的菜单里有多个层级。")])]},proxy:!0}])}),t._v(" "),a("componetTemplate",{attrs:{title:"触发方式",template:"ui/templates/dropdown/3.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("Dropdown",{attrs:{data:t.data1,trigger:"click"}},[a("Wb-button",{attrs:{type:"primary"}},[t._v("Click")])],1)]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("下拉菜单默认是悬浮触发，当设置trigger为click时级联菜单点击触发")])]},proxy:!0}])})],1),t._v(" "),a("cell",{staticClass:"pl-20",attrs:{span:"12"}},[a("componetTemplate",{attrs:{title:"其他元素",template:"ui/templates/dropdown/4.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("Dropdown",{attrs:{data:t.data2}},[a("Wb-button",{attrs:{type:"primary"}},[t._v("Hover")])],1)]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("分割线和不可用菜单项。")])]},proxy:!0}])}),t._v(" "),a("componetTemplate",{attrs:{title:"触发事件",template:"ui/templates/dropdown/5.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[a("Dropdown",{attrs:{data:t.data1},on:{"on-choose":t.clickItem}},[a("a",{attrs:{href:"javascript:void(0)"}},[t._v("Hover")])])]},proxy:!0},{key:"description",fn:function(){return[a("p",[t._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。")])]},proxy:!0}])})],1)],1)],1),t._v(" "),a("h2",{attrs:{id:"api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[t._v("#")]),t._v(" API")]),t._v(" "),a("h3",{attrs:{id:"dropdown-props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-props"}},[t._v("#")]),t._v(" Dropdown Props")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("trigger")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("下拉菜单及级联菜单的触发方式，可选值有"),a("code",[t._v("hover")]),t._v("、"),a("code",[t._v("click")])]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("hover")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("data")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("菜单数据源")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Array")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("-")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("data.content")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("下拉菜单项数据源")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("-")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("data.divided")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("该菜单项是否禁用")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("Boolean")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("false")])]),t._v(" "),a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("data.disabled")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("该菜单项是否显示分割线")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("boolean")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("false")])])])]),t._v(" "),a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events"}},[t._v("#")]),t._v(" Dropdown Events")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",{staticStyle:{"text-align":"left"}},[t._v("事件名")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),a("th",{staticStyle:{"text-align":"left"}},[t._v("返回值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",{staticStyle:{"text-align":"left"}},[t._v("on-choose")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("点击菜单项时触发的事件")]),t._v(" "),a("td",{staticStyle:{"text-align":"left"}},[t._v("(item, event)")])])])])],1)}),[],!1,null,null,null);e.default=l.exports}}]);