s-wheels-ui
Version:
1 lines • 5.91 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{103:function(t,e,n){"use strict";var o=n(43);n.n(o).a},108:function(t,e,n){"use strict";n(33);var o={data:function(){return{visible:!1}},mounted:function(){var t=this;this.timer=null,"click"===this.trigger?this.$refs.popover.addEventListener("click",this.onClick):(this.$refs.popover.addEventListener("mouseenter",(function(){console.log("mouseenter popover"),t.open(),t.hoverContentWrapper()})),this.$refs.popover.addEventListener("mouseleave",(function(){t.timer=setTimeout(t.close,200),console.log("mouseleave popover")})))},destroyed:function(){"click"===this.trigger?this.$refs.popover.removeEventListener("click",this.onClick):(this.$refs.popover.removeEventListener("mouseenter",this.open),this.$refs.popover.removeEventListener("mouseleave",this.close))},props:{position:{type:String,default:"top",validator:function(t){return["top","bottom","left","right"].indexOf(t)>=0}},trigger:{type:String,default:"click",validator:function(t){return["click","hover"].indexOf(t)>=0}}},methods:{onClick:function(t){this.$refs.triggerWrapper.contains(t.target)&&(!0===this.visible?this.close():this.open())},positionContent:function(){var t=this.$refs,e=t.contentWrapper,n=t.triggerWrapper;document.body.appendChild(e);var o=n.getBoundingClientRect(),s=o.width,i=o.height,r=o.top,p=o.left,c=e.getBoundingClientRect().height,l={top:{left:p+window.scrollX,top:r+window.scrollY},bottom:{left:p+window.scrollX,top:r+i+window.scrollY},left:{left:p+window.scrollX,top:r+(i-c)/2+window.scrollY},right:{left:p+s+window.scrollX,top:r+(i-c)/2+window.scrollY}};e.style.left=l[this.position].left+"px",e.style.top=l[this.position].top+"px"},open:function(){var t=this;this.visible=!0,this.$nextTick((function(){t.positionContent(),document.addEventListener("click",t.onClickDocument)}))},close:function(){this.visible=!1,document.removeEventListener("click",this.onClickDocument)},onClickDocument:function(t){this.$refs.popover&&(this.$refs.popover===t.target||this.$refs.popover.contains(t.target))||this.$refs.contentWrapper&&(this.$refs.contentWrapper===t.target||this.$refs.contentWrapper.contains(t.target))||this.close()},mouseEnterContentWrapper:function(){console.log("mouseenter content"),clearTimeout(this.timer),this.open()},mouseLeaveContentWrapper:function(){this.close(),this.$refs.contentWrapper.removeEventListener("mouseenter",this.mouseEnterContentWrapper),this.$refs.contentWrapper.removeEventListener("mouseleave",this.mouseLeaveContentWrapper)},hoverContentWrapper:function(){var t=this;this.$nextTick((function(){t.$refs.contentWrapper&&(console.log("content add"),t.$refs.contentWrapper.addEventListener("mouseenter",t.mouseEnterContentWrapper),t.$refs.contentWrapper.addEventListener("mouseleave",t.mouseLeaveContentWrapper))}))}}},s=(n(103),n(1)),i=Object(s.a)(o,(function(){var t,e=this.$createElement,n=this._self._c||e;return n("div",{ref:"popover",staticClass:"s-popover"},[this.visible?n("div",{ref:"contentWrapper",class:["content-wrapper",(t={},t["position-"+this.position]=!0,t)]},[this._t("content",null,{close:this.close})],2):this._e(),this._v(" "),n("span",{ref:"triggerWrapper",staticClass:"trigger-wrapper"},[this._t("default")],2)])}),[],!1,null,"c147dbb4",null);e.a=i.exports},224:function(t,e,n){"use strict";n.r(e);n(25),n(29);var o=n(108),s=n(69),i={data:function(){return{contents:'<s-popover>\n <s-button>上方弹出</s-button>\n <template slot="content">\n 弹出内容\n </template>\n </s-popover>\n <s-popover position="bottom">\n <s-button>下方弹出</s-button>\n <template slot="content">\n 弹出内容\n </template>\n </s-popover>\n <s-popover position="left">\n <s-button>左边弹出</s-button>\n <template slot="content">\n 弹出内容\n </template>\n </s-popover>\n <s-popover position="right">\n <s-button>右边弹出</s-button>\n <template slot="content">\n 弹出内容\n </template>\n</s-popover>\n '.replace(/^ {8}/gm,"").trim()}},components:{"s-popover":o.a,"s-button":s.a}},r=n(1),p=Object(r.a)(i,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("s-popover",[n("s-button",[t._v("上方弹出")]),t._v(" "),n("template",{slot:"content"},[t._v("\n 弹出内容\n ")])],2),t._v(" "),n("s-popover",{attrs:{position:"bottom"}},[n("s-button",[t._v("下方弹出")]),t._v(" "),n("template",{slot:"content"},[t._v("\n 弹出内容\n ")])],2),t._v(" "),n("s-popover",{attrs:{position:"left"}},[n("s-button",[t._v("左边弹出")]),t._v(" "),n("template",{slot:"content"},[t._v("\n 弹出内容\n ")])],2),t._v(" "),n("s-popover",{attrs:{position:"right"}},[n("s-button",[t._v("右边弹出")]),t._v(" "),n("template",{slot:"content"},[t._v("\n 弹出内容\n ")])],2),t._v(" "),n("h4",[t._v("代码")]),t._v(" "),n("pre",[n("code",[t._v(t._s(t.contents))])])],1)}),[],!1,null,null,null);e.default=p.exports},26:function(t,e,n){},43:function(t,e,n){},66:function(t,e,n){"use strict";var o=n(26);n.n(o).a},69:function(t,e,n){"use strict";var o={components:{"s-icon":n(68).a},props:{icon:String,loading:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:function(t){return console.log(t),!("left"!==t&&"right"!==t)}}}},s=(n(66),n(1)),i=Object(s.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{class:["s-button","icon-"+t.iconPosition],on:{click:function(e){return t.$emit("click",e)}}},[t.icon&&!t.loading?n("s-icon",{attrs:{name:t.icon}}):t._e(),t._v(" "),t.loading?n("s-icon",{staticClass:"loading icon",attrs:{name:"loading"}}):t._e(),t._v(" "),n("div",{staticClass:"content"},[t._t("default")],2)],1)}),[],!1,null,"561c80bf",null);e.a=i.exports}}]);