UNPKG

gulu-vue2

Version:

用 Vue2 做的 UI 框架

1 lines • 3.3 kB
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{259:function(e,t,s){},260:function(e,t,s){},297:function(e,t,s){"use strict";s(259)},298:function(e,t,s){"use strict";s(260)},321:function(e,t,s){"use strict";s.r(t);s(90);var i=s(0),l={name:"GCollapse",props:{single:{type:Boolean,default:!1},selected:{type:Array,default:()=>[]}},data:()=>({eventBus:new i.a}),provide(){return{eventBus:this.eventBus}},mounted(){this.eventBus.$emit("update:selected",this.selected),this.eventBus.$on("update:addSelected",e=>{let t=JSON.parse(JSON.stringify(this.selected));this.single?t=[e]:t.push(e),this.eventBus.$emit("update:selected",t),this.$emit("update:selected",t)}),this.eventBus.$on("update:removeSelected",e=>{let t=JSON.parse(JSON.stringify(this.selected)),s=t.indexOf(e);t.splice(s,1),this.eventBus.$emit("update:selected",t),this.$emit("update:selected",t)})}},n=(s(297),s(14)),a=Object(n.a)(l,(function(){return(0,this._self._c)("div",{staticClass:"g-collapse"},[this._t("default")],2)}),[],!1,null,"40cd5b08",null).exports,c={name:"GCollapseItem",inject:["eventBus"],props:{title:{type:String,required:!0},name:{type:String,required:!0}},data:()=>({open:!1}),mounted(){this.eventBus&&this.eventBus.$on("update:selected",e=>{e&&e.length&&(this.open=e.includes(this.name))})},methods:{toggle(){this.eventBus&&(this.open?this.eventBus.$emit("update:removeSelected",this.name):this.eventBus.$emit("update:addSelected",this.name))}}},o=(s(298),{name:"Collapse-demos",components:{"g-collapse":a,"g-collapse-item":Object(n.a)(c,(function(){var e=this._self._c;return e("div",{staticClass:"g-collapseItem"},[e("div",{staticClass:"title",attrs:{"data-name":this.name},on:{click:this.toggle}},[this._v(this._s(this.title))]),this._v(" "),e("div",{directives:[{name:"show",rawName:"v-show",value:this.open,expression:"open"}],ref:"content",staticClass:"content"},[this._t("default")],2)])}),[],!1,null,"05a63e33",null).exports},data:()=>({selected1:["item2"],selected2:[]})}),d=Object(n.a)(o,(function(){var e=this,t=e._self._c;return t("div",[t("section",[t("p",[e._v("基本使用")]),e._v(" "),t("g-collapse",[t("g-collapse-item",{attrs:{title:"标题1",name:"item1"}},[e._v("内容1")]),e._v(" "),t("g-collapse-item",{attrs:{title:"标题2",name:"item2"}},[e._v("内容2")]),e._v(" "),t("g-collapse-item",{attrs:{title:"标题3",name:"item3"}},[e._v("内容3")])],1)],1),e._v(" "),t("section",[t("p",[e._v("默认展开")]),e._v(" "),t("g-collapse",{attrs:{single:!0,selected:e.selected1},on:{"update:selected":function(t){e.selected1=t}}},[t("g-collapse-item",{attrs:{title:"标题1",name:"item1"}},[e._v("内容1")]),e._v(" "),t("g-collapse-item",{attrs:{title:"标题2",name:"item2"}},[e._v("内容2")]),e._v(" "),t("g-collapse-item",{attrs:{title:"标题3",name:"item3"}},[e._v("内容3")])],1)],1),e._v(" "),t("section",[t("p",[e._v("允许展开多个")]),e._v(" "),t("g-collapse",{attrs:{single:!1,selected:e.selected2},on:{"update:selected":function(t){e.selected2=t}}},[t("g-collapse-item",{attrs:{title:"标题1",name:"item1"}},[e._v("内容1")]),e._v(" "),t("g-collapse-item",{attrs:{title:"标题2",name:"item2"}},[e._v("内容2")]),e._v(" "),t("g-collapse-item",{attrs:{title:"标题3",name:"item3"}},[e._v("内容3")])],1)],1)])}),[],!1,null,"ce3209b4",null);t.default=d.exports}}]);