@slevin/vue-wheel-drawer/lib/vue-wheel-drawer.umd.min.js

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

(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-wheel-drawer"]=t():e["vue-wheel-drawer"]=t()})("undefined"!==typeof self?self:this,(function(){return function(e){var t={};function n(a){if(t[a])return t[a].exports;var r=t[a]={i:a,l:!1,exports:{}};return e[a].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,a){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(n.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(a,r,function(t){return e[t]}.bind(null,r));return a},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="9986")}({"80ea":function(e,t,n){"use strict";var a=n("b241"),r=n.n(a);r.a},"85cb":function(e,t,n){"use strict";function a(e,t){for(var n=[],a={},r=0;r<t.length;r++){var i=t[r],o=i[0],s=i[1],p=i[2],d=i[3],c={id:e+":"+r,css:s,media:p,sourceMap:d};a[o]?a[o].parts.push(c):n.push(a[o]={id:o,parts:[c]})}return n}n.r(t),n.d(t,"default",(function(){return x}));var r="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},o=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,p=0,d=!1,c=function(){},l=null,u="data-vue-ssr-id",f="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function x(e,t,n,r){d=n,l=r||{};var o=a(e,t);return g(o),function(t){for(var n=[],r=0;r<o.length;r++){var s=o[r],p=i[s.id];p.refs--,n.push(p)}t?(o=a(e,t),g(o)):o=[];for(r=0;r<n.length;r++){p=n[r];if(0===p.refs){for(var d=0;d<p.parts.length;d++)p.parts[d]();delete i[p.id]}}}}function g(e){for(var t=0;t<e.length;t++){var n=e[t],a=i[n.id];if(a){a.refs++;for(var r=0;r<a.parts.length;r++)a.parts[r](n.parts[r]);for(;r<n.parts.length;r++)a.parts.push(b(n.parts[r]));a.parts.length>n.parts.length&&(a.parts.length=n.parts.length)}else{var o=[];for(r=0;r<n.parts.length;r++)o.push(b(n.parts[r]));i[n.id]={id:n.id,refs:1,parts:o}}}}function h(){var e=document.createElement("style");return e.type="text/css",o.appendChild(e),e}function b(e){var t,n,a=document.querySelector("style["+u+'~="'+e.id+'"]');if(a){if(d)return c;a.parentNode.removeChild(a)}if(f){var r=p++;a=s||(s=h()),t=v.bind(null,a,r,!1),n=v.bind(null,a,r,!0)}else a=h(),t=y.bind(null,a),n=function(){a.parentNode.removeChild(a)};return t(e),function(a){if(a){if(a.css===e.css&&a.media===e.media&&a.sourceMap===e.sourceMap)return;t(e=a)}else n()}}var m=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}();function v(e,t,n,a){var r=n?"":a.css;if(e.styleSheet)e.styleSheet.cssText=m(t,r);else{var i=document.createTextNode(r),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(i,o[t]):e.appendChild(i)}}function y(e,t){var n=t.css,a=t.media,r=t.sourceMap;if(a&&e.setAttribute("media",a),l.ssrId&&e.setAttribute(u,t.id),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}},9986:function(e,t,n){"use strict";var a;(n.r(t),"undefined"!==typeof window)&&(n("e67d"),(a=window.document.currentScript)&&(a=a.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=a[1]));var r=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"comp-wheel-drawer"},[n("div",{staticClass:"wheel-container",style:[e.rotateStyle]},[e.bgImg?n("div",{staticClass:"wheel-bg",style:[e.bgStyle]}):e._e(),n("canvas",{ref:"canvasRef",attrs:{id:"canvasWheel",width:e.cw,height:e.ch}})]),n("div",{staticClass:"pointer-container",on:{click:e._startClick}},[e._t("default",[n("div",{staticClass:"pointer-main pointer-main-interaction1"},[e._v("指针")])])],2)])},i=[],o={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,n=e*t+t/2,a=0;a=-1===this.preIndex?270-n:360-(e-this.preIndex)*t,this.targetDeg+=a+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()),n=Math.floor(256*Math.random());return`rgb(${e}, ${t}, ${n})`};function t(e,t,n){let a=t.split(""),r="",i=[];for(let o=0;o<a.length;o++)e.measureText(r).width>=n&&(i.push(r),n-=e.measureText(t[0]).width,r=""),r+=a[o];return i.push(r),i}const n=this.prizeList.length;let a=this.$refs.canvasRef,r=a.getContext("2d"),i=this.cw/2,o=this.ch/2,s=i>o?o:i;var p=2*Math.PI/n;for(let d=0;d<n;d++){const n=this.prizeList[d];let a=d*p,c=(d+1)*p;r.beginPath(),r.moveTo(i,o),r.arc(i,o,s,a,c),r.closePath(),r.fillStyle=this.bgImg?"rgba(255, 255, 255, 0)":n.bgColor||e(),r.fill(),r.save();let l=n.name;r.fillStyle=this.fontColor,r.font=this.fontStyle||this.customFontStyle,r.translate(i+Math.cos(a+p/2)*s,o+Math.sin(a+p/2)*s),r.rotate(a+p/2+Math.PI/2),t(r,l,this.fontLineWidth).forEach((e,t)=>{r.fillText(e,-r.measureText(e).width/2,t*this.fontGap+this.sectorPadding)}),r.restore()}}}},s=o;n("80ea");function p(e,t,n,a,r,i,o,s){var p,d="function"===typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),a&&(d.functional=!0),i&&(d._scopeId="data-v-"+i),o?(p=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},d._ssrRegister=p):r&&(p=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),p)if(d.functional){d._injectStyles=p;var c=d.render;d.render=function(e,t){return p.call(t),c(e,t)}}else{var l=d.beforeCreate;d.beforeCreate=l?[].concat(l,p):[p]}return{exports:e,options:d}}var d=p(s,r,i,!1,null,"a46cae8a",null),c=d.exports;c.install=function(e){e.component(c.name,c)};var l=c;const u=[l],f=function(e){f.installed||u.map(t=>e.component(t.name,t))};"undefined"!==typeof window&&window.Vue&&f(window.Vue);var x={install:f,wheelDrawer:l};t["default"]=x},b241:function(e,t,n){var a=n("fadc");"string"===typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);var r=n("85cb").default;r("41aa6ba8",a,!0,{sourceMap:!1,shadowMode:!1})},e67d:function(e,t){(function(e){var t="currentScript",n=e.getElementsByTagName("script");t in e||Object.defineProperty(e,t,{get:function(){try{throw new Error}catch(a){var e,t=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(a.stack)||[!1])[1];for(e in n)if(n[e].src==t||"interactive"==n[e].readyState)return n[e];return null}}})})(document)},ef74:function(e,t,n){"use strict";function a(e,t){var n=e[1]||"",a=e[3];if(!a)return n;if(t&&"function"===typeof btoa){var i=r(a),o=a.sources.map((function(e){return"/*# sourceURL=".concat(a.sourceRoot).concat(e," */")}));return[n].concat(o).concat([i]).join("\n")}return[n].join("\n")}function r(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(n," */")}e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=a(t,e);return t[2]?"@media ".concat(t[2],"{").concat(n,"}"):n})).join("")},t.i=function(e,n){"string"===typeof e&&(e=[[null,e,""]]);for(var a={},r=0;r<this.length;r++){var i=this[r][0];null!=i&&(a[i]=!0)}for(var o=0;o<e.length;o++){var s=e[o];null!=s[0]&&a[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="(".concat(s[2],") and (").concat(n,")")),t.push(s))}},t}},fadc:function(e,t,n){t=e.exports=n("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=vue-wheel-drawer.umd.min.js.map