gulu-vue2/docs/.vuepress/dist/assets/js/6.9765cee7.js

用 Vue2 做的 UI 框架

(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{237:function(t,e,o){},238:function(t,e,o){},239:function(t,e,o){"use strict";o(237)},240:function(t,e,o){"use strict";var n={name:"GIcon",props:{name:{type:String,required:!0}},mounted(){const t=document.querySelector("script[data-ref]");if(t&&"iconScript"===t.dataset.ref)return;const e=document.createElement("script");e.src="//at.alicdn.com/t/font_718972_a5614fly5or.js",e.dataset.ref="iconScript",document.body.append(e)}},i=(o(239),o(14)),r=Object(i.a)(n,(function(){var t=this._self._c;return t("svg",{class:["g-icon",{loading:"loading"===this.name}],attrs:{"aria-hidden":"true"}},[t("use",{attrs:{"xlink:href":"#i-"+this.name}})])}),[],!1,null,"241b5f01",null);e.a=r.exports},242:function(t,e,o){"use strict";o(238)},243:function(t,e,o){"use strict";var n={name:"GButton",components:{"g-icon":o(240).a},props:{icon:{},iconPosition:{type:String,default:"left",validator:t=>["left","right"].includes(t)},loading:{type:Boolean,default:!1}}},i=(o(242),o(14)),r=Object(i.a)(n,(function(){var t=this,e=t._self._c;return e("button",{class:["g-button",{["icon-"+t.iconPosition]:t.icon}],on:{click:function(e){return t.$emit("click")}}},[t.icon&&!t.loading?e("g-icon",{staticClass:"icon",attrs:{name:t.icon}}):t._e(),t._v(" "),t.loading?e("g-icon",{staticClass:"icon",attrs:{name:"loading"}}):t._e(),t._v(" "),e("span",{staticClass:"content"},[t._t("default")],2)],1)}),[],!1,null,"43022fc6",null);e.a=r.exports},263:function(t,e,o){},301:function(t,e,o){"use strict";o(263)},325:function(t,e,o){"use strict";o.r(e);var n={name:"GPopover",data:()=>({visible:!1}),props:{position:{type:String,default:"top",validator:t=>["top","bottom","left","right"].includes(t)},trigger:{type:String,default:"click",validator:t=>["click","hover"].includes(t)}},computed:{openEvent(){return"click"===this.trigger?"click":"mouseenter"},closeEvent(){return"click"===this.trigger?"click":"mouseleave"}},mounted(){"click"===this.trigger?this.$refs.popover.addEventListener("click",this.handleTrigger):(this.$refs.popover.addEventListener("mouseenter",this.open),this.$refs.popover.addEventListener("mouseleave",this.close))},beforeDestroy(){"click"===this.trigger?this.$refs.popover.removeEventListener("click",this.handleTrigger):(this.$refs.popover.removeEventListener("mouseenter",this.open),this.$refs.popover.removeEventListener("mouseleave",this.close))},methods:{handleTrigger(t){this.$refs.triggerWrapper.contains(t.target)&&(this.visible?this.close():this.open())},open(){this.visible=!0,this.$nextTick(()=>{this.setContentPosition(),document.addEventListener("click",this.handleDocument)})},close(){this.visible=!1,document.removeEventListener("click",this.handleDocument)},setContentPosition(){const{contentWrapper:t,triggerWrapper:e}=this.$refs;document.body.appendChild(t);const{width:o,height:n,left:i,top:r}=e.getBoundingClientRect(),{width:s,height:c}=t.getBoundingClientRect(),p={top:{left:i+window.scrollX,top:r+window.scrollY-c},bottom:{left:i+window.scrollX,top:r+window.scrollY+n},left:{left:i+window.scrollX-s,top:r+window.scrollY-(c-n)/2},right:{left:i+window.scrollX+o,top:r+window.scrollY-(c-n)/2}};t.style.left=p[this.position].left+"px",t.style.top=p[this.position].top+"px"},handleDocument(t){const{popover:e,contentWrapper:o}=this.$refs;e&&(t.target===e||e.contains(t.target))||o&&(t.target===o||o.contains(t.target))||this.close()}}},i=(o(301),o(14)),r={name:"Popover-demos",components:{"g-popover":Object(i.a)(n,(function(){var t=this._self._c;return t("div",{ref:"popover",staticClass:"g-popover"},[this.visible?t("div",{ref:"contentWrapper",class:["g-popover-content-wrapper","position-"+this.position]},[this._t("content",null,{close:this.close})],2):this._e(),this._v(" "),t("div",{ref:"triggerWrapper",staticClass:"trigger-wrapper"},[this._t("default")],2)])}),[],!1,null,"a09794ec",null).exports,"g-button":o(243).a},data:()=>({code1:'\n        <g-popover>\n          <template v-slot:content>\n            <div>内容内容内容</div>\n          </template>\n          <g-button>上</g-button>\n        </g-popover>\n        <g-popover position="bottom">\n          <template v-slot:content>\n            <div>内容内容内容</div>\n          </template>\n          <g-button>下</g-button>\n        </g-popover>\n        <g-popover position="left">\n          <template v-slot:content>\n            <div>内容内容内容</div>\n          </template>\n          <g-button>左</g-button>\n        </g-popover>\n        <g-popover position="right">\n          <template v-slot:content>\n            <div>内容内容内容</div>\n          </template>\n          <g-button>右</g-button>\n        </g-popover>\n      '.replace(/^ {8}/gm,"").trim(),code2:'\n        <g-popover>\n          <template #content="{ close }">\n            <div>内容内容内容</div>\n            <g-button @click="close">关闭</g-button>\n          </template>\n          <g-button>click me</g-button>\n        </g-popover>\n      '.replace(/^ {8}/gm,"").trim(),code3:'\n        <g-popover position="top">\n          <div slot="content">内容内容 <a href="//qq.com">看新闻</a> 内容</div>\n          <g-button>click me</g-button>\n        </g-popover>\n      '.replace(/^ {8}/gm,"").trim(),code4:'\n        <g-popover trigger="hover">\n          <div slot="content">内容内容内容</div>\n          <g-button>click me</g-button>\n        </g-popover>\n      '.replace(/^ {8}/gm,"").trim()})},s=Object(i.a)(r,(function(){var t=this,e=t._self._c;return e("div",[e("section",[e("p",[t._v("四个方位展示")]),t._v(" "),e("g-popover",{scopedSlots:t._u([{key:"content",fn:function(){return[e("div",[t._v("内容内容内容")])]},proxy:!0}])},[t._v(" "),e("g-button",[t._v("上")])],1),t._v(" "),e("g-popover",{attrs:{position:"bottom"},scopedSlots:t._u([{key:"content",fn:function(){return[e("div",[t._v("内容内容内容")])]},proxy:!0}])},[t._v(" "),e("g-button",[t._v("下")])],1),t._v(" "),e("g-popover",{attrs:{position:"left"},scopedSlots:t._u([{key:"content",fn:function(){return[e("div",[t._v("内容内容内容")])]},proxy:!0}])},[t._v(" "),e("g-button",[t._v("左")])],1),t._v(" "),e("g-popover",{attrs:{position:"right"},scopedSlots:t._u([{key:"content",fn:function(){return[e("div",[t._v("内容内容内容")])]},proxy:!0}])},[t._v(" "),e("g-button",[t._v("右")])],1),t._v(" "),e("pre",[e("code",[t._v(t._s(t.code1))])])],1),t._v(" "),e("section",[e("p",[t._v("包含关闭按钮")]),t._v(" "),e("g-popover",{scopedSlots:t._u([{key:"content",fn:function({close:o}){return[e("div",[t._v("内容内容内容")]),t._v(" "),e("g-button",{on:{click:o}},[t._v("关闭")])]}}])},[t._v(" "),e("g-button",[t._v("click me")])],1),t._v(" "),e("pre",[e("code",[t._v(t._s(t.code2))])])],1),t._v(" "),e("section",[e("p",[t._v("包含 HTML 元素")]),t._v(" "),e("g-popover",{attrs:{position:"top"}},[e("div",{attrs:{slot:"content"},slot:"content"},[t._v("内容内容 "),e("a",{attrs:{href:"//qq.com"}},[t._v("看新闻")]),t._v(" 内容")]),t._v(" "),e("g-button",[t._v("click me")])],1),t._v(" "),e("pre",[e("code",[t._v(t._s(t.code3))])])],1),t._v(" "),e("section",[e("p",[t._v("鼠标移入触发")]),t._v(" "),e("g-popover",{attrs:{trigger:"hover"}},[e("div",{attrs:{slot:"content"},slot:"content"},[t._v("内容内容内容")]),t._v(" "),e("g-button",[t._v("click me")])],1),t._v(" "),e("pre",[e("code",[t._v(t._s(t.code4))])])],1)])}),[],!1,null,"d4a0c25a",null);e.default=s.exports}}]);