mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-10-14 19:22:13 +08:00
1 line
8.6 KiB
JavaScript
1 line
8.6 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{342:function(t,e,n){},404:function(t,e,n){"use strict";var l=n(342);n.n(l).a},440:function(t,e,n){"use strict";n.r(e);var l={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:{movestart:function(){},moving:function(){},moveend:function(){},change:function(t){console.log(t)}}},i=(n(404),n(46)),a=Object(i.a)(l,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"split-分割面板"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#split-分割面板"}},[t._v("#")]),t._v(" split 分割面板")]),t._v(" "),n("h2",{attrs:{id:"概述"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[t._v("#")]),t._v(" 概述")]),t._v(" "),n("p",[t._v("用于展示操作进度，告知用户当前状态")]),t._v(" "),n("h2",{attrs:{id:"代码示例"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#代码示例"}},[t._v("#")]),t._v(" 代码示例")]),t._v(" "),n("ClientOnly",[n("row",[n("cell",{staticClass:"pr-20",attrs:{span:"12"}},[n("componetTemplate",{attrs:{title:"基本使用",template:"ui/templates/split/1.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[n("div",{staticClass:"panel"},[n("split",{attrs:{diretion:"vertical"}},[n("split-item",[t._v("\n 1\n ")]),t._v(" "),n("split-item",[t._v("\n 2\n ")]),t._v(" "),n("split-item",[t._v("\n 3\n ")])],1),t._v(" "),n("split",[n("splitItem",[t._v("\n 1\n ")]),t._v(" "),n("splitItem",[t._v("\n 2\n ")]),t._v(" "),n("splitItem",[t._v("\n 3\n ")])],1)],1)]},proxy:!0},{key:"description",fn:function(){return[n("p",[t._v("用鼠标拖动俩面板之间的线，可以改变面板的大小")]),t._v(" "),n("p",[t._v("有两种方向：horizontal垂直，vertical水平")])]},proxy:!0}])}),t._v(" "),n("componetTemplate",{attrs:{title:"事件",template:"ui/templates/split/3.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[n("split",{on:{"on-move-start":t.movestart,"on-moving":t.moving,"on-move-end":t.moveend}},[n("splitItem",{on:{"on-change":t.change}},[t._v("\n 1\n ")]),t._v(" "),n("splitItem",[t._v("\n 2\n ")])],1)]},proxy:!0},{key:"description",fn:function(){return[n("p",[t._v("Split组件在拖拽时抛出on-move-start、on-moving、on-move-end三个事件")]),t._v(" "),n("p",[t._v("当SplitItem组件的宽度或者高度发生改变时，抛出on-change事件，参数为{width, height}")])]},proxy:!0}])})],1),t._v(" "),n("cell",{staticClass:"pl-20",attrs:{span:"12"}},[n("componetTemplate",{attrs:{title:"设置初始值和范围",template:"ui/templates/split/2.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[n("split",[n("splitItem",{attrs:{width:"0.3",min:"0.2",max:"0.5"}},[t._v("\n 1\n ")]),t._v(" "),n("splitItem",[t._v("\n 2\n ")]),t._v(" "),n("splitItem",[t._v("\n 3\n ")])],1)]},proxy:!0},{key:"description",fn:function(){return[n("p",[t._v("水平场景下，可以设置splitItem的初始宽度width, 最小宽度min，最大宽度max")]),t._v(" "),n("p",[t._v("垂直场景下，可以设置splitItem的初始高度height, 最小高度min，最大高度max")]),t._v(" "),n("p",[t._v("width/height/min/max如果值大于1表示绝对值px，如果小于1表示相对容器的高度或者宽度，例如0.1表示10%")])]},proxy:!0}])})],1)],1)],1),t._v(" "),n("h2",{attrs:{id:"api"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[t._v("#")]),t._v(" API")]),t._v(" "),n("h3",{attrs:{id:"split-props"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#split-props"}},[t._v("#")]),t._v(" Split props")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),n("tbody",[n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("diretion")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("面板分割的方向： vertical垂直、horizontal水平")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("String")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("horizontal")])])])]),t._v(" "),n("h3",{attrs:{id:"split-event"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#split-event"}},[t._v("#")]),t._v(" Split event")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",{staticStyle:{"text-align":"left"}},[t._v("事件名")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("返回值")])])]),t._v(" "),n("tbody",[n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("on-move-start")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("按下分割线触发")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("event")])]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("on-moving")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("按下分割线移动时触发")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("event")])]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("on-move-end")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("松开按下的分割线时触发")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("event")])])])]),t._v(" "),n("h3",{attrs:{id:"splititem-props"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#splititem-props"}},[t._v("#")]),t._v(" SplitItem props")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),n("tbody",[n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("width")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("宽度，当面板是水平方向有效")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("String、Number")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("height")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("高度，当面板是垂直方向有效")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("String、Number")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("min")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("最小宽度/高度")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("String、Number")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}})]),t._v(" "),n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("max")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("最大宽度/高度")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("String、Number")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}})])])]),t._v(" "),n("h3",{attrs:{id:"splititem-event"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#splititem-event"}},[t._v("#")]),t._v(" SplitItem event")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",{staticStyle:{"text-align":"left"}},[t._v("事件名")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),n("th",{staticStyle:{"text-align":"left"}},[t._v("回调参数")])])]),t._v(" "),n("tbody",[n("tr",[n("td",{staticStyle:{"text-align":"left"}},[t._v("on-change")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("当宽度或者高度改变时触发")]),t._v(" "),n("td",{staticStyle:{"text-align":"left"}},[t._v("{width, height}")])])])])],1)}),[],!1,null,null,null);e.default=a.exports}}]); |