vue-captcha-code
Version:
基于Vue和canvas的验证码
2 lines • 8.61 kB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1045:function(module,exports,__webpack_require__){"use strict";__webpack_require__(3),__webpack_require__(50),__webpack_require__(41),__webpack_require__(1046),__webpack_require__(1047),__webpack_require__(7),__webpack_require__(42);var _clientApi=__webpack_require__(52),_clientLogger=__webpack_require__(34),_configFilename=__webpack_require__(1048);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}(_configFilename.args||_configFilename.argTypes)&&_clientLogger.logger.warn("Invalid args/argTypes in config, ignoring.",JSON.stringify({args:_configFilename.args,argTypes:_configFilename.argTypes})),_configFilename.decorators&&_configFilename.decorators.forEach((function(decorator){return(0,_clientApi.addDecorator)(decorator,!1)})),_configFilename.loaders&&_configFilename.loaders.forEach((function(loader){return(0,_clientApi.addLoader)(loader,!1)})),(_configFilename.parameters||_configFilename.globals||_configFilename.globalTypes)&&(0,_clientApi.addParameters)(_objectSpread(_objectSpread({},_configFilename.parameters),{},{globals:_configFilename.globals,globalTypes:_configFilename.globalTypes}),!1),_configFilename.argTypesEnhancers&&_configFilename.argTypesEnhancers.forEach((function(enhancer){return(0,_clientApi.addArgTypesEnhancer)(enhancer)}))},1048:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"parameters",(function(){return parameters}));var parameters={actions:{argTypesRegex:"^on[A-Z].*"}}},1049:function(module,exports,__webpack_require__){"use strict";(function(module){(0,__webpack_require__(341).configure)([__webpack_require__(1050),__webpack_require__(1051)],module,!1)}).call(this,__webpack_require__(104)(module))},1050:function(module,exports){function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=function(){return[]},webpackEmptyContext.resolve=webpackEmptyContext,module.exports=webpackEmptyContext,webpackEmptyContext.id=1050},1051:function(module,exports,__webpack_require__){var map={"./Captcha.stories.js":1055};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1051},1055:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"Primary",(function(){return Primary}));__webpack_require__(4),__webpack_require__(7),__webpack_require__(177),__webpack_require__(17);function randomNum(m,n){return Math.floor(Math.random()*(n-m+1)+m)}var originalCharacter=["1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","p","q","r","s","t","u","v","w","x","y","z"],src_captchavue_type_script_lang_js_={name:"VueCaptcha",props:{height:{type:Number,default:40},width:{type:Number,default:100},bgColor:{type:String,default:"#DFF0D8"},charNum:{type:Number,default:4},fontSize:{type:Number,default:25},onChange:{type:Function},className:{type:String}},components:{},data:function data(){return{}},computed:{},methods:{generateCaptcha:function generateCaptcha(){var checkCode="";if(this.$refs.canvas){var ctx=this.$refs.canvas.getContext("2d");if(ctx){ctx.clearRect(0,0,this.width,this.height),ctx.beginPath(),ctx.fillStyle=this.bgColor,ctx.fillRect(0,0,this.width,this.height);for(var i=0;i<this.charNum;i++){var charGap=Math.round(this.width/this.charNum),offset=Math.round(charGap/2)-6,code=originalCharacter[randomNum(0,originalCharacter.length-1)];checkCode+=code,ctx.save(),ctx.beginPath(),ctx.fillStyle="white",ctx.strokeStyle="rgb(".concat(randomNum(0,255),", ").concat(randomNum(0,255),", ").concat(randomNum(0,255),")"),ctx.font="".concat(this.fontSize,"px serif"),ctx.rotate(Math.PI/180*randomNum(-5,5)),ctx.strokeText(code,offset+i*charGap,this.height/2+8),ctx.beginPath(),ctx.moveTo(randomNum(0,this.width),randomNum(0,this.height)),ctx.lineTo(randomNum(0,this.width),randomNum(0,this.height)),ctx.stroke(),ctx.restore()}return checkCode}return""}return""},handleChange:function handleChange(code){this.$emit("on-change",code),this.$emit("update:captcha",code)},refreshCaptcha:function refreshCaptcha(){var code=this.generateCaptcha();this.handleChange(code)}},mounted:function mounted(){this.refreshCaptcha()}},componentNormalizer=__webpack_require__(458);const __vuedocgen_export_0=Object(componentNormalizer.a)(src_captchavue_type_script_lang_js_,(function(){var _h=this.$createElement;return(this._self._c||_h)("canvas",{ref:"canvas",attrs:{height:this.height,width:this.width},on:{click:this.refreshCaptcha}})}),[],!1,null,"4db4d68e",null).exports;var captcha=__vuedocgen_export_0;__vuedocgen_export_0.__docgenInfo={displayName:"VueCaptcha",exportName:"default",description:"",tags:{},props:[{name:"height",type:{name:"number"},defaultValue:{func:!1,value:"40"}},{name:"width",type:{name:"number"},defaultValue:{func:!1,value:"100"}},{name:"bgColor",type:{name:"string"},defaultValue:{func:!1,value:"'#DFF0D8'"}},{name:"charNum",type:{name:"number"},defaultValue:{func:!1,value:"4"}},{name:"fontSize",type:{name:"number"},defaultValue:{func:!1,value:"25"}},{name:"onChange",type:{name:"func"}},{name:"className",type:{name:"string"}}],events:[{name:"on-change",type:{names:["undefined"]}},{name:"update:captcha",type:{names:["undefined"]}}]};__webpack_exports__.default={title:"Example/Captcha",component:captcha,argTypes:{backgroundColor:{control:"color"},size:{control:{type:"select",options:["small","medium","large"]}}}};var Primary=function Template(args,_ref){var argTypes=_ref.argTypes;return{props:Object.keys(argTypes),data:function data(){return{code:""}},components:{VueCaptcha:captcha},methods:{handleChange:function handleChange(code){console.log("code: ",code)},refresh:function refresh(){this.$refs.captcha.refreshCaptcha()}},template:'\n <div>\n <vue-captcha ref="captcha" :captcha.sync="code" @on-change="handleChange"></vue-captcha>\n <div>\n <button @click="refresh">刷新</button>\n </div>\n </div>\n '}}.bind({});Primary.parameters=Object.assign({storySource:{source:'(args, { argTypes }) => ({\n props: Object.keys(argTypes),\n data: function () {\n return {\n code: \'\',\n };\n },\n components: { VueCaptcha },\n methods: {\n handleChange(code) {\n console.log(\'code: \', code);\n },\n refresh() {\n this.$refs.captcha.refreshCaptcha();\n },\n },\n template: `\n <div>\n <vue-captcha ref="captcha" :captcha.sync="code" @on-change="handleChange"></vue-captcha>\n <div>\n <button @click="refresh">刷新</button>\n </div>\n </div>\n `,\n})'}},Primary.parameters)},461:function(module,exports,__webpack_require__){__webpack_require__(462),__webpack_require__(633),__webpack_require__(634),__webpack_require__(793),__webpack_require__(1011),__webpack_require__(1019),__webpack_require__(1024),__webpack_require__(1036),__webpack_require__(1038),__webpack_require__(1043),__webpack_require__(1045),module.exports=__webpack_require__(1049)},536:function(module,exports){},634:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);__webpack_require__(341)}},[[461,1,2]]]);
//# sourceMappingURL=main.57b1fa137dce166bb1e0.bundle.js.map