@slevin/vue-wheel-drawer/dist/js/index.84c067b9.js

[](https://github.com/RichardLitt/standard-readme)

(function(e){function t(t){for(var n,o,p=t[0],s=t[1],l=t[2],c=0,x=[];c<p.length;c++)o=p[c],Object.prototype.hasOwnProperty.call(r,o)&&r[o]&&x.push(r[o][0]),r[o]=0;for(n in s)Object.prototype.hasOwnProperty.call(s,n)&&(e[n]=s[n]);d&&d(t);while(x.length)x.shift()();return i.push.apply(i,l||[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],n=!0,o=1;o<a.length;o++){var s=a[o];0!==r[s]&&(n=!1)}n&&(i.splice(t--,1),e=p(p.s=a[0]))}return e}var n={},r={index:0},i=[];function o(e){return p.p+"js/"+({}[e]||e)+"."+{"chunk-137e8b40":"660d8cb1","chunk-2305b838":"da1db236","chunk-4a4d9a06":"5d49885d","chunk-bf11671e":"30658a3f","chunk-c940370a":"922faed3"}[e]+".js"}function p(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,p),a.l=!0,a.exports}p.e=function(e){var t=[],a=r[e];if(0!==a)if(a)t.push(a[2]);else{var n=new Promise((function(t,n){a=r[e]=[t,n]}));t.push(a[2]=n);var i,s=document.createElement("script");s.charset="utf-8",s.timeout=120,p.nc&&s.setAttribute("nonce",p.nc),s.src=o(e);var l=new Error;i=function(t){s.onerror=s.onload=null,clearTimeout(c);var a=r[e];if(0!==a){if(a){var n=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+i+")",l.name="ChunkLoadError",l.type=n,l.request=i,a[1](l)}r[e]=void 0}};var c=setTimeout((function(){i({type:"timeout",target:s})}),12e4);s.onerror=s.onload=i,document.head.appendChild(s)}return Promise.all(t)},p.m=e,p.c=n,p.d=function(e,t,a){p.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},p.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},p.t=function(e,t){if(1&t&&(e=p(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(p.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)p.d(a,n,function(t){return e[t]}.bind(null,n));return a},p.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return p.d(t,"a",t),t},p.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},p.p="",p.oe=function(e){throw console.error(e),e};var s=window["webpackJsonp"]=window["webpackJsonp"]||[],l=s.push.bind(s);s.push=t,s=s.slice();for(var c=0;c<s.length;c++)t(s[c]);var d=l;i.push([0,"chunk-vendors"]),a()})({0:function(e,t,a){e.exports=a("c31f")},"0550":function(e,t,a){var n=a("0cb9");"string"===typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);var r=a("85cb").default;r("91b8c3dc",n,!0,{sourceMap:!1,shadowMode:!1})},"0cb9":function(e,t,a){t=e.exports=a("ef74")(!1),t.push([e.i,".page[data-v-77f4a474]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-top:50px}",""])},"80ea":function(e,t,a){"use strict";var n=a("b241"),r=a.n(n);r.a},b241:function(e,t,a){var n=a("fadc");"string"===typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);var r=a("85cb").default;r("41aa6ba8",n,!0,{sourceMap:!1,shadowMode:!1})},c31f:function(e,t,a){"use strict";a.r(t);a("9c3f"),a("1af7"),a("8e8a"),a("94c3");var n=a("6e6d"),r=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"page"},[a("case1"),a("case2"),a("case3"),a("case4"),a("case5")],1)},i=[],o=(a("86bd"),{components:{case1:function(){return a.e("chunk-137e8b40").then(a.bind(null,"08dc"))},case2:function(){return a.e("chunk-2305b838").then(a.bind(null,"5058"))},case3:function(){return a.e("chunk-c940370a").then(a.bind(null,"0d9c"))},case4:function(){return a.e("chunk-4a4d9a06").then(a.bind(null,"0a18"))},case5:function(){return a.e("chunk-bf11671e").then(a.bind(null,"e24b"))}},data:function(){return{}},methods:{}}),p=o,s=(a("d633"),a("4e82")),l=Object(s["a"])(p,r,i,!1,null,"77f4a474",null),c=l.exports,d=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"comp-wheel-drawer"},[a("div",{staticClass:"wheel-container",style:[e.rotateStyle]},[e.bgImg?a("div",{staticClass:"wheel-bg",style:[e.bgStyle]}):e._e(),a("canvas",{ref:"canvasRef",attrs:{id:"canvasWheel",width:e.cw,height:e.ch}})]),a("div",{staticClass:"pointer-container",on:{click:e._startClick}},[e._t("default",[a("div",{staticClass:"pointer-main pointer-main-interaction1"},[e._v("指针")])])],2)])},x=[],u={name:"wheelDrawer",props:{prizeList:{type:Array,required:!0,default:()=>[{name:"一等奖",id:234,bgColor:"#fff"},{name:"er等奖",id:334,bgColor:"pink"},{name:"san等奖",id:434},{name:"shi等奖",id:534}]},diam:{type:Number,default:()=>478},bgImg:{type:String,default:""},bgDeg:{type:Number,default:0},fontColor:{type:String,default:()=>"#FF69B4"},fontStyle:{type:String,default:""},fontWeight:{type:String,default:()=>"bold"},fontSize:{type:String,default:()=>"17px"},fontFamily:{type:String,default:()=>"Microsoft Yahei,Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,sans-serif"},fontLineWidth:{type:Number,default:()=>100},sectorPadding:{type:Number,default:()=>65},fontGap:{type:Number,default:()=>20},rounds:{type:Number,default:10},duration:{type:Number,default:5},timingFn:{type:String,default:()=>"cubic-bezier(0.11, 0.77, 0.2, 0.94)"}},data(){return{preIndex:-1,targetDeg:0,isRotating:!1}},computed:{rotateStyle(){return{transform:`rotate(${this.targetDeg}deg)`,"transition-duration":`${this.duration}s`,"transition-timing-function":`${this.timingFn}`,"transition-property":"transform","transition-delay":"0s"}},bgStyle(){return{"background-image":`url(${this.bgImg})`,transform:`rotate(${this.bgDeg}deg)`}},customFontStyle(){return`${this.fontWeight} ${this.fontSize} ${this.fontFamily}`},cw(){return this.diam},ch(){return this.diam}},mounted(){this.renderWheel()},methods:{_startClick(e){this.$emit("pointerClick",e)},go(e){if(this.isRotating)return;this.isRotating=!0;let t=360/this.prizeList.length,a=e*t+t/2,n=0;n=-1===this.preIndex?270-a:360-(e-this.preIndex)*t,this.targetDeg+=n+360*this.rounds,this.preIndex=e,setTimeout(()=>{this.isRotating=!1,this.$emit("rotateOver")},1e3*this.duration+500)},renderWheel(){let e=()=>{var e=Math.floor(256*Math.random()),t=Math.floor(256*Math.random()),a=Math.floor(256*Math.random());return`rgb(${e}, ${t}, ${a})`};function t(e,t,a){let n=t.split(""),r="",i=[];for(let o=0;o<n.length;o++)e.measureText(r).width>=a&&(i.push(r),a-=e.measureText(t[0]).width,r=""),r+=n[o];return i.push(r),i}const a=this.prizeList.length;let n=this.$refs.canvasRef,r=n.getContext("2d"),i=this.cw/2,o=this.ch/2,p=i>o?o:i;var s=2*Math.PI/a;for(let l=0;l<a;l++){const a=this.prizeList[l];let n=l*s,c=(l+1)*s;r.beginPath(),r.moveTo(i,o),r.arc(i,o,p,n,c),r.closePath(),r.fillStyle=this.bgImg?"rgba(255, 255, 255, 0)":a.bgColor||e(),r.fill(),r.save();let d=a.name;r.fillStyle=this.fontColor,r.font=this.fontStyle||this.customFontStyle,r.translate(i+Math.cos(n+s/2)*p,o+Math.sin(n+s/2)*p),r.rotate(n+s/2+Math.PI/2),t(r,d,this.fontLineWidth).forEach((e,t)=>{r.fillText(e,-r.measureText(e).width/2,t*this.fontGap+this.sectorPadding)}),r.restore()}}}},b=u,f=(a("80ea"),Object(s["a"])(b,d,x,!1,null,"a46cae8a",null)),g=f.exports;g.install=function(e){e.component(g.name,g)};var h=g;const m=[h],v=function(e){v.installed||m.map(t=>e.component(t.name,t))};"undefined"!==typeof window&&window.Vue&&v(window.Vue);var w={install:v,wheelDrawer:h};n["a"].use(w),n["a"].config.productionTip=!1,new n["a"]({render:function(e){return e(c)}}).$mount("#app")},d633:function(e,t,a){"use strict";var n=a("0550"),r=a.n(n);r.a},fadc:function(e,t,a){t=e.exports=a("ef74")(!1),t.push([e.i,'.comp-wheel-drawer[data-v-a46cae8a],.wheel-container[data-v-a46cae8a]{position:relative;display:inline-block}.wheel-container[data-v-a46cae8a]{border-radius:50%;overflow:hidden;pointer-events:none}.wheel-bg[data-v-a46cae8a]{position:absolute;width:100%;height:100%;border-radius:50%}#canvasWheel[data-v-a46cae8a],.wheel-bg[data-v-a46cae8a]{background-position:50%;background-size:cover;background-repeat:no-repeat}#canvasWheel[data-v-a46cae8a]{pointer-events:none;position:relative}.pointer-container[data-v-a46cae8a]{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);cursor:pointer}.pointer-main[data-v-a46cae8a]{width:80px;height:80px;line-height:80px;text-align:center;color:#fff;background:#00ddeb;border-radius:50%;position:relative}.pointer-main[data-v-a46cae8a]:before{content:"";display:block;width:0;height:0;border-right:30px solid transparent;border-left:30px solid transparent;border-bottom:30px solid #00ddeb;position:absolute;top:-38%;left:50%;-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%);z-index:-1}.pointer-main-interaction1[data-v-a46cae8a]{-webkit-box-shadow:0 5px #028d96;box-shadow:0 5px #028d96;-webkit-transition:all .2s ease;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;top:0}.pointer-main-interaction1[data-v-a46cae8a]:hover{-webkit-box-shadow:0 4px #006066;box-shadow:0 4px #006066}.pointer-main-interaction1[data-v-a46cae8a]:active{top:4px;-webkit-box-shadow:0 0 #d3545d;box-shadow:0 0 #d3545d}.pointer-main-interaction2[data-v-a46cae8a]{background-color:#3bb3e0;background-image:-webkit-gradient(linear,left top,left bottom,from(#2ca0ca),to(#3eb8e5));background-image:linear-gradient(180deg,#2ca0ca 0,#3eb8e5);-webkit-box-shadow:inset 0 1px 0 #7fd2f1,0 1px 0 #fff;box-shadow:inset 0 1px 0 #7fd2f1,0 1px 0 #fff;padding:10px;top:0}.pointer-main-interaction2[data-v-a46cae8a]:active{padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background-image:-webkit-gradient(linear,left top,left bottom,from(#3eb8e5),to(#2ca0ca));background-image:linear-gradient(180deg,#3eb8e5 0,#2ca0ca)}.pointer-main-interaction3[data-v-a46cae8a]{overflow:hidden;font-weight:700;color:#fff;background:#444;-webkit-box-shadow:inset 0 0 2px 2px rgba(0,0,0,.2),inset 0 0 2px 4px rgba(0,0,0,.2),inset 0 0 2px 6px rgba(0,0,0,.2),inset 0 0 1px 8px rgba(0,0,0,.5),inset 0 -4px 2px 4px rgba(0,0,0,.5),inset 0 1px 1px 8px hsla(0,0%,100%,.25),inset 0 -30px 30px rgba(0,0,0,.2),0 -4px 8px 4px rgba(0,0,0,.5),0 10px 10px rgba(0,0,0,.25),0 0 2px 2px rgba(0,0,0,.2),0 0 2px 4px rgba(0,0,0,.2),0 0 2px 6px rgba(0,0,0,.2),0 0 2px 8px rgba(0,0,0,.5),0 1px 2px 8px hsla(0,0%,100%,.25),0 -1px 2px 8px rgba(0,0,0,.5);box-shadow:inset 0 0 2px 2px rgba(0,0,0,.2),inset 0 0 2px 4px rgba(0,0,0,.2),inset 0 0 2px 6px rgba(0,0,0,.2),inset 0 0 1px 8px rgba(0,0,0,.5),inset 0 -4px 2px 4px rgba(0,0,0,.5),inset 0 1px 1px 8px hsla(0,0%,100%,.25),inset 0 -30px 30px rgba(0,0,0,.2),0 -4px 8px 4px rgba(0,0,0,.5),0 10px 10px rgba(0,0,0,.25),0 0 2px 2px rgba(0,0,0,.2),0 0 2px 4px rgba(0,0,0,.2),0 0 2px 6px rgba(0,0,0,.2),0 0 2px 8px rgba(0,0,0,.5),0 1px 2px 8px hsla(0,0%,100%,.25),0 -1px 2px 8px rgba(0,0,0,.5);text-shadow:0 1px 1px hsla(0,0%,100%,.25),0 -1px 1px rgba(0,0,0,.75)}.pointer-main-interaction3[data-v-a46cae8a]:hover{color:#0ab;text-shadow:0 0 20px rgba(143,143,239,.5),0 1px 1px hsla(0,0%,100%,.25),0 -1px 1px rgba(0,0,0,.75)}.pointer-main-interaction3[data-v-a46cae8a]:active{-webkit-box-shadow:inset 0 0 2px 2px rgba(0,0,0,.2),inset 0 0 2px 4px rgba(0,0,0,.2),inset 0 0 2px 6px rgba(0,0,0,.2),inset 0 0 1px 7px rgba(0,0,0,.5),inset 0 5px 15px 7px rgba(0,0,0,.15),inset 0 -4px 2px 3px rgba(0,0,0,.5),inset 0 1px 1px 7px hsla(0,0%,100%,.25),inset 0 -30px 30px rgba(0,0,0,.1),inset 0 30px 30px rgba(0,0,0,.2),0 -4px 8px 4px rgba(0,0,0,.5),0 5px 10px rgba(0,0,0,.25),0 0 2px 2px rgba(0,0,0,.2),0 0 2px 4px rgba(0,0,0,.2),0 0 2px 6px rgba(0,0,0,.2),0 0 2px 8px rgba(0,0,0,.5),0 1px 2px 8px hsla(0,0%,100%,.25),0 -1px 2px 8px rgba(0,0,0,.5);box-shadow:inset 0 0 2px 2px rgba(0,0,0,.2),inset 0 0 2px 4px rgba(0,0,0,.2),inset 0 0 2px 6px rgba(0,0,0,.2),inset 0 0 1px 7px rgba(0,0,0,.5),inset 0 5px 15px 7px rgba(0,0,0,.15),inset 0 -4px 2px 3px rgba(0,0,0,.5),inset 0 1px 1px 7px hsla(0,0%,100%,.25),inset 0 -30px 30px rgba(0,0,0,.1),inset 0 30px 30px rgba(0,0,0,.2),0 -4px 8px 4px rgba(0,0,0,.5),0 5px 10px rgba(0,0,0,.25),0 0 2px 2px rgba(0,0,0,.2),0 0 2px 4px rgba(0,0,0,.2),0 0 2px 6px rgba(0,0,0,.2),0 0 2px 8px rgba(0,0,0,.5),0 1px 2px 8px hsla(0,0%,100%,.25),0 -1px 2px 8px rgba(0,0,0,.5);line-height:86px}',""])}});
//# sourceMappingURL=index.84c067b9.js.map