├── .editorconfig
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── README.zh-CN.md
├── demo
    ├── App.vue
    ├── assets
    │   ├── Crested_Ibis.jpg
    │   └── demo.gif
    ├── dist
    │   ├── Crested_Ibis.61dac377.jpg
    │   ├── index.html
    │   ├── main.41d0c573.js
    │   ├── main.41d0c573.js.map
    │   └── main.c967b235.css
    ├── index.html
    └── main.js
├── dist
    ├── vue-image-painter.common.js
    ├── vue-image-painter.common.min.js
    ├── vue-image-painter.esm.js
    ├── vue-image-painter.esm.min.js
    ├── vue-image-painter.js
    └── vue-image-painter.min.js
├── package.json
├── scripts
    └── release.sh
├── src
    ├── ImagePainter
    │   ├── index.vue
    │   ├── mixins
    │   │   └── index.js
    │   └── style
    │   │   └── animation.styl
    └── index.js
└── yarn.lock


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .cache
 3 | node_modules
 4 | *.log
 5 | .idea
 6 | .vscode
 7 | package-lock.json
 8 | npm-debug.log
 9 | dev
10 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | <a name="0.1.3"></a>
 6 | ## [0.1.3](https://github.com/komomoo/vue-image-painter/compare/v0.1.2...v0.1.3) (2019-07-05)
 7 | 
 8 | 
 9 | 
10 | <a name="0.1.2"></a>
11 | ## [0.1.2](https://github.com/komomoo/vue-image-painter/compare/v0.1.1...v0.1.2) (2019-07-05)
12 | 
13 | 
14 | 
15 | <a name="0.1.1"></a>
16 | ## [0.1.1](https://github.com/komomoo/vue-image-painter/compare/v0.1.0...v0.1.1) (2019-07-05)
17 | 
18 | 
19 | ### Features
20 | 
21 | * add animation blur ([69333e9](https://github.com/komomoo/vue-image-painter/commit/69333e9))
22 | * props add animation ([d116126](https://github.com/komomoo/vue-image-painter/commit/d116126))
23 | 
24 | 
25 | 
26 | <a name="0.1.0"></a>
27 | # 0.1.0 (2019-07-05)
28 | 
29 | 
30 | ### Features
31 | 
32 | * demo ([11249d6](https://github.com/komomoo/vue-image-painter/commit/11249d6))
33 | * ImagePainter ([19d8d69](https://github.com/komomoo/vue-image-painter/commit/19d8d69))
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 komo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-image-painter
 2 | 
 3 | English | [简体中文](./README.zh-CN.md)
 4 | 
 5 | ## 🌰 Example
 6 | 
 7 | <img src="./demo/assets/demo.gif" width="320" style="margin-top: 20px;">
 8 | 
 9 | [Demo](https://komomoo.github.io/vue-image-painter/demo/dist/)
10 | 
11 | [Demo Source Code](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
12 | 
13 | ## 🚀 QuickStart
14 | 
15 | 1.  Install
16 | 
17 | ```bash
18 | yarn add vue-image-painter # OR npm i -S vue-image-painter
19 | ```
20 | 
21 | 2.  Import
22 | 
23 | ```js
24 | // main.js
25 | import ImagePainter from 'vue-image-painter'
26 | Vue.use(ImagePainter)
27 | ```
28 | 
29 | 3.  Usage. Please refer to the [Demo Source Code](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
30 | 
31 | ```html
32 | <ImagePainter :src="https://www.images.com/a.jpg"></ImagePainter>
33 | ```
34 | 
35 | ## 🔌 API
36 | 
37 | ### Props
38 | 
39 | | Name      | Description                                                                 | Type    | Default   |
40 | | --------- | --------------------------------------------------------------------------- | ------- | --------- |
41 | | src       | image URL. local images must be used `require('')`                          | String  | undefined |
42 | | alt       | image alt                                                                   | String  | undefined |
43 | | animation | animation effect. optional key: 'draw'，'blur'                              | String  | 'draw'    |
44 | | duration  | animation duration. unit: ms                                                | Number  | 4000      |
45 | | immediate | display images and animations immediately, don't wait for the image to load | Boolean | false     |
46 | 
47 | ### Events
48 | 
49 | | Name      | Description      | Parameters |
50 | | --------- | ---------------- | ---------- |
51 | | loadStart | image load start | null       |
52 | | loadEnd   | image load end   | null       |
53 | 
54 | ### Slots
55 | 
56 | | Name    | Description                                                   |
57 | | ------- | ------------------------------------------------------------- |
58 | | default | The content ImagePainter displays, before the image is loaded |
59 | 
60 | ---
61 | 
62 | 😉😘 If it is helpful to you，please encourage me with a <b>⭐️<a href="#">Star</a></b> ~
63 | 
64 | ## Inspiration
65 | 
66 | - [ImageDrawer.js](https://github.com/UstymUkhman/ImageDrawer.js)
67 | 
68 | ## [Changelog](./CHANGELOG.md)
69 | 
70 | ## License
71 | 
72 | [MIT](http://opensource.org/licenses/MIT)
73 | 
74 | Copyright (c) 2018-present, komo
75 | 


--------------------------------------------------------------------------------
/README.zh-CN.md:
--------------------------------------------------------------------------------
 1 | # vue-image-painter
 2 | 
 3 | [English](./README.md) | 简体中文
 4 | 
 5 | ## 🌰 示例
 6 | 
 7 | <img src="./demo/assets/demo.gif" width="320" style="margin-top: 20px;">
 8 | 
 9 | [Demo](https://komomoo.github.io/vue-image-painter/demo/dist/)
10 | 
11 | [Demo 源码](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
12 | 
13 | ## 🚀 快速开始
14 | 
15 | 1.  安装
16 | 
17 | ```bash
18 | yarn add vue-image-painter # 或 npm i -S vue-image-painter
19 | ```
20 | 
21 | 2.  引入
22 | 
23 | ```js
24 | // main.js 入口中
25 | import ImagePainter from 'vue-image-painter'
26 | Vue.use(ImagePainter)
27 | ```
28 | 
29 | 3.  使用，请参考[Demo 源码](https://github.com/komomoo/vue-image-painter/blob/master/demo/App.vue)
30 | 
31 | ```html
32 | <ImagePainter :src="https://www.images.com/a.jpg"></ImagePainter>
33 | ```
34 | 
35 | ## 🔌 API
36 | 
37 | ### Props
38 | 
39 | | 选项      | 说明                                    | 类型    | 默认值    |
40 | | --------- | --------------------------------------- | ------- | --------- |
41 | | src       | 图片链接。本地图片须用 require('') 引入 | String  | undefined |
42 | | alt       | 图片描述                                | String  | undefined |
43 | | animation | 动画效果，可选：'draw'，'blur'          | String  | 'draw'    |
44 | | duration  | 动画持续时间，单位 ms                   | Number  | 4000      |
45 | | immediate | 立即显示图片和动画，而不等图片加载完    | Boolean | false     |
46 | 
47 | ### Events
48 | 
49 | | 事件名    | 说明         | 回调参数 |
50 | | --------- | ------------ | -------- |
51 | | loadStart | 图片加载开始 | null     |
52 | | loadEnd   | 图片加载结束 | null     |
53 | 
54 | ### Slots
55 | 
56 | | 名称    | 说明                                        |
57 | | ------- | ------------------------------------------- |
58 | | default | 图片未加载完成前，ImagePainter 内显示的内容 |
59 | 
60 | ---
61 | 
62 | 😉😘 如果它对你有所帮助，可以点一下 <b>⭐️<a href="#">Star</a></b> ~
63 | 
64 | ## 灵感
65 | 
66 | - [ImageDrawer.js](https://github.com/UstymUkhman/ImageDrawer.js)
67 | 
68 | ## [更新日志](./CHANGELOG.md)
69 | 
70 | ## License
71 | 
72 | [MIT](http://opensource.org/licenses/MIT)
73 | 
74 | Copyright (c) 2018-present, komo
75 | 


--------------------------------------------------------------------------------
/demo/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>Image Draw</h1>
 4 | 
 5 |     <!-- 本地图片 -->
 6 |     <ImagePainter
 7 |       class="image-painter"
 8 |       :src="require('./assets/Crested_Ibis.jpg')">
 9 |       <p class="loading-text">图片加载中...</p>
10 |     </ImagePainter>
11 | 
12 |     <!-- 网络图片 -->
13 |     <!-- <ImagePainter
14 |       class="image-painter"
15 |       src="https://images3.alphacoders.com/825/825213.png">
16 |       <p class="loading-text">图片加载中...</p>
17 |     </ImagePainter> -->
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | require('./assets/Crested_Ibis.jpg')
23 | 
24 | export default {
25 |   name: 'App',
26 |   data () {
27 |     return {
28 |       loading: false,
29 |     }
30 |   },
31 |   methods: {
32 |   },
33 | }
34 | </script>
35 | 
36 | <style lang="stylus">
37 | $headerHeight = 44px;
38 | $baseColor = #6A9FB5;
39 | $bgColor = #FAFAFA;
40 | * {
41 |   padding: 0;
42 |   margin: 0;
43 |   border: none;
44 | }
45 | html, body {
46 |   width: 100%;
47 |   height: 100%;
48 |   overflow: hidden;
49 | }
50 | #app {
51 |   width: 100%;
52 |   height: 100%;
53 |   overflow: hidden;
54 |   overflow-y: scroll;
55 |   box-sizing: border-box;
56 | 
57 |   > h1 {
58 |     font-size: 24px;
59 |     padding: 0 15px;
60 |     padding-top: 40px;
61 |     padding-bottom: 20px;
62 |     // color: #6D7A80;
63 |     color: rgba(250, 140, 135, 1);
64 |   }
65 | 
66 |   .image-painter {
67 |     min-height: 300px;
68 |   }
69 | 
70 |   .loading-text {
71 |     font-size: 12px;
72 |     color: #6D7A80;
73 |     text-align: center;
74 |     margin: 160px 0;
75 |   }
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/demo/assets/Crested_Ibis.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/komomoo/vue-image-painter/29755e89175696ac55ba239e8889f369c7fae458/demo/assets/Crested_Ibis.jpg


--------------------------------------------------------------------------------
/demo/assets/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/komomoo/vue-image-painter/29755e89175696ac55ba239e8889f369c7fae458/demo/assets/demo.gif


--------------------------------------------------------------------------------
/demo/dist/Crested_Ibis.61dac377.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/komomoo/vue-image-painter/29755e89175696ac55ba239e8889f369c7fae458/demo/dist/Crested_Ibis.61dac377.jpg


--------------------------------------------------------------------------------
/demo/dist/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue-image-painter</title><link rel="stylesheet" href="main.c967b235.css"></head><body> <div id="app"></div> <script src="main.41d0c573.js"></script> </body></html>


--------------------------------------------------------------------------------
/demo/dist/main.41d0c573.js:
--------------------------------------------------------------------------------
 1 | parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"QPfz":[function(require,module,exports) {
 2 | var global = arguments[3];
 3 | var t=arguments[3];Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=Object.freeze({});function n(t){return null==t}function r(t){return null!=t}function o(t){return!0===t}function i(t){return!1===t}function a(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function s(t){return null!==t&&"object"==typeof t}var c=Object.prototype.toString;function u(t){return c.call(t).slice(8,-1)}function l(t){return"[object Object]"===c.call(t)}function f(t){return"[object RegExp]"===c.call(t)}function p(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function d(t){return r(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function v(t){return null==t?"":Array.isArray(t)||l(t)&&t.toString===c?JSON.stringify(t,null,2):String(t)}function h(t){var e=parseFloat(t);return isNaN(e)?t:e}function m(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o<r.length;o++)n[r[o]]=!0;return e?function(t){return n[t.toLowerCase()]}:function(t){return n[t]}}var y=m("slot,component",!0),g=m("key,ref,slot,slot-scope,is");function _(t,e){if(t.length){var n=t.indexOf(e);if(n>-1)return t.splice(n,1)}}var b=Object.prototype.hasOwnProperty;function C(t,e){return b.call(t,e)}function w(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var $=/-(\w)/g,A=w(function(t){return t.replace($,function(t,e){return e?e.toUpperCase():""})}),x=w(function(t){return t.charAt(0).toUpperCase()+t.slice(1)}),O=/\B([A-Z])/g,k=w(function(t){return t.replace(O,"-$1").toLowerCase()});function S(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n}function j(t,e){return t.bind(e)}var E=Function.prototype.bind?j:S;function T(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function I(t,e){for(var n in e)t[n]=e[n];return t}function D(t){for(var e={},n=0;n<t.length;n++)t[n]&&I(e,t[n]);return e}function N(t,e,n){}var L=function(t,e,n){return!1},P=function(t){return t};function M(t,e){if(t===e)return!0;var n=s(t),r=s(e);if(!n||!r)return!n&&!r&&String(t)===String(e);try{var o=Array.isArray(t),i=Array.isArray(e);if(o&&i)return t.length===e.length&&t.every(function(t,n){return M(t,e[n])});if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(o||i)return!1;var a=Object.keys(t),c=Object.keys(e);return a.length===c.length&&a.every(function(n){return M(t[n],e[n])})}catch(u){return!1}}function F(t,e){for(var n=0;n<t.length;n++)if(M(t[n],e))return n;return-1}function R(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}}var H="data-server-rendered",U=["component","directive","filter"],B=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch"],z={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:L,isReservedAttr:L,isUnknownElement:L,getTagNamespace:N,parsePlatformTagName:P,mustUseProp:L,async:!0,_lifecycleHooks:B},V=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function W(t){var e=(t+"").charCodeAt(0);return 36===e||95===e}function q(t,e,n,r){Object.defineProperty(t,e,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var K=new RegExp("[^"+V.source+".$_\\d]");function X(t){if(!K.test(t)){var e=t.split(".");return function(t){for(var n=0;n<e.length;n++){if(!t)return;t=t[e[n]]}return t}}}var G,Z="__proto__"in{},J="undefined"!=typeof window,Q="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,Y=Q&&WXEnvironment.platform.toLowerCase(),tt=J&&window.navigator.userAgent.toLowerCase(),et=tt&&/msie|trident/.test(tt),nt=tt&&tt.indexOf("msie 9.0")>0,rt=tt&&tt.indexOf("edge/")>0,ot=tt&&tt.indexOf("android")>0||"android"===Y,it=tt&&/iphone|ipad|ipod|ios/.test(tt)||"ios"===Y,at=tt&&/chrome\/\d+/.test(tt)&&!rt,st=tt&&/phantomjs/.test(tt),ct=tt&&tt.match(/firefox\/(\d+)/),ut={}.watch,lt=!1;if(J)try{var ft={};Object.defineProperty(ft,"passive",{get:function(){lt=!0}}),window.addEventListener("test-passive",null,ft)}catch(as){}var pt=function(){return void 0===G&&(G=!J&&!Q&&void 0!==t&&(t.process&&"server"===t.process.env.VUE_ENV)),G},dt=J&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function vt(t){return"function"==typeof t&&/native code/.test(t.toString())}var ht,mt="undefined"!=typeof Symbol&&vt(Symbol)&&"undefined"!=typeof Reflect&&vt(Reflect.ownKeys);ht="undefined"!=typeof Set&&vt(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var yt,gt,_t,bt,Ct=N,wt=N,$t=N,At=N,xt=0,Ot=function(){this.id=xt++,this.subs=[]};Ot.prototype.addSub=function(t){this.subs.push(t)},Ot.prototype.removeSub=function(t){_(this.subs,t)},Ot.prototype.depend=function(){Ot.target&&Ot.target.addDep(this)},Ot.prototype.notify=function(){var t=this.subs.slice();for(var e=0,n=t.length;e<n;e++)t[e].update()},Ot.target=null;var kt=[];function St(t){kt.push(t),Ot.target=t}function jt(){kt.pop(),Ot.target=kt[kt.length-1]}var Et=function(t,e,n,r,o,i,a,s){this.tag=t,this.data=e,this.children=n,this.text=r,this.elm=o,this.ns=void 0,this.context=i,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=e&&e.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=s,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},Tt={child:{configurable:!0}};Tt.child.get=function(){return this.componentInstance},Object.defineProperties(Et.prototype,Tt);var It=function(t){void 0===t&&(t="");var e=new Et;return e.text=t,e.isComment=!0,e};function Dt(t){return new Et(void 0,void 0,void 0,String(t))}function Nt(t){var e=new Et(t.tag,t.data,t.children&&t.children.slice(),t.text,t.elm,t.context,t.componentOptions,t.asyncFactory);return e.ns=t.ns,e.isStatic=t.isStatic,e.key=t.key,e.isComment=t.isComment,e.fnContext=t.fnContext,e.fnOptions=t.fnOptions,e.fnScopeId=t.fnScopeId,e.asyncMeta=t.asyncMeta,e.isCloned=!0,e}var Lt=Array.prototype,Pt=Object.create(Lt),Mt=["push","pop","shift","unshift","splice","sort","reverse"];Mt.forEach(function(t){var e=Lt[t];q(Pt,t,function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];var o,i=e.apply(this,n),a=this.__ob__;switch(t){case"push":case"unshift":o=n;break;case"splice":o=n.slice(2)}return o&&a.observeArray(o),a.dep.notify(),i})});var Ft=Object.getOwnPropertyNames(Pt),Rt=!0;function Ht(t){Rt=t}var Ut=function(t){this.value=t,this.dep=new Ot,this.vmCount=0,q(t,"__ob__",this),Array.isArray(t)?(Z?Bt(t,Pt):zt(t,Pt,Ft),this.observeArray(t)):this.walk(t)};function Bt(t,e){t.__proto__=e}function zt(t,e,n){for(var r=0,o=n.length;r<o;r++){var i=n[r];q(t,i,e[i])}}function Vt(t,e){var n;if(s(t)&&!(t instanceof Et))return C(t,"__ob__")&&t.__ob__ instanceof Ut?n=t.__ob__:Rt&&!pt()&&(Array.isArray(t)||l(t))&&Object.isExtensible(t)&&!t._isVue&&(n=new Ut(t)),e&&n&&n.vmCount++,n}function Wt(t,e,n,r,o){var i=new Ot,a=Object.getOwnPropertyDescriptor(t,e);if(!a||!1!==a.configurable){var s=a&&a.get,c=a&&a.set;s&&!c||2!==arguments.length||(n=t[e]);var u=!o&&Vt(n);Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){var e=s?s.call(t):n;return Ot.target&&(i.depend(),u&&(u.dep.depend(),Array.isArray(e)&&Xt(e))),e},set:function(e){var r=s?s.call(t):n;e===r||e!=e&&r!=r||s&&!c||(c?c.call(t,e):n=e,u=!o&&Vt(e),i.notify())}})}}function qt(t,e,n){if(Array.isArray(t)&&p(e))return t.length=Math.max(t.length,e),t.splice(e,1,n),n;if(e in t&&!(e in Object.prototype))return t[e]=n,n;var r=t.__ob__;return t._isVue||r&&r.vmCount?n:r?(Wt(r.value,e,n),r.dep.notify(),n):(t[e]=n,n)}function Kt(t,e){if(Array.isArray(t)&&p(e))t.splice(e,1);else{var n=t.__ob__;t._isVue||n&&n.vmCount||C(t,e)&&(delete t[e],n&&n.dep.notify())}}function Xt(t){for(var e=void 0,n=0,r=t.length;n<r;n++)(e=t[n])&&e.__ob__&&e.__ob__.dep.depend(),Array.isArray(e)&&Xt(e)}Ut.prototype.walk=function(t){for(var e=Object.keys(t),n=0;n<e.length;n++)Wt(t,e[n])},Ut.prototype.observeArray=function(t){for(var e=0,n=t.length;e<n;e++)Vt(t[e])};var Gt=z.optionMergeStrategies;function Zt(t,e){if(!e)return t;for(var n,r,o,i=mt?Reflect.ownKeys(e):Object.keys(e),a=0;a<i.length;a++)"__ob__"!==(n=i[a])&&(r=t[n],o=e[n],C(t,n)?r!==o&&l(r)&&l(o)&&Zt(r,o):qt(t,n,o));return t}function Jt(t,e,n){return n?function(){var r="function"==typeof e?e.call(n,n):e,o="function"==typeof t?t.call(n,n):t;return r?Zt(r,o):o}:e?t?function(){return Zt("function"==typeof e?e.call(this,this):e,"function"==typeof t?t.call(this,this):t)}:e:t}function Qt(t,e){var n=e?t?t.concat(e):Array.isArray(e)?e:[e]:t;return n?Yt(n):n}function Yt(t){for(var e=[],n=0;n<t.length;n++)-1===e.indexOf(t[n])&&e.push(t[n]);return e}function te(t,e,n,r){var o=Object.create(t||null);return e?I(o,e):o}Gt.data=function(t,e,n){return n?Jt(t,e,n):e&&"function"!=typeof e?t:Jt(t,e)},B.forEach(function(t){Gt[t]=Qt}),U.forEach(function(t){Gt[t+"s"]=te}),Gt.watch=function(t,e,n,r){if(t===ut&&(t=void 0),e===ut&&(e=void 0),!e)return Object.create(t||null);if(!t)return e;var o={};for(var i in I(o,t),e){var a=o[i],s=e[i];a&&!Array.isArray(a)&&(a=[a]),o[i]=a?a.concat(s):Array.isArray(s)?s:[s]}return o},Gt.props=Gt.methods=Gt.inject=Gt.computed=function(t,e,n,r){if(!t)return e;var o=Object.create(null);return I(o,t),e&&I(o,e),o},Gt.provide=Jt;var ee=function(t,e){return void 0===e?t:e};function ne(t){for(var e in t.components)re(e)}function re(t){new RegExp("^[a-zA-Z][\\-\\.0-9_"+V.source+"]*$").test(t)||Ct('Invalid component name: "'+t+'". Component names should conform to valid custom element name in html5 specification.'),(y(t)||z.isReservedTag(t))&&Ct("Do not use built-in or reserved HTML elements as component id: "+t)}function oe(t,e){var n=t.props;if(n){var r,o,i={};if(Array.isArray(n))for(r=n.length;r--;)"string"==typeof(o=n[r])&&(i[A(o)]={type:null});else if(l(n))for(var a in n)o=n[a],i[A(a)]=l(o)?o:{type:o};else 0;t.props=i}}function ie(t,e){var n=t.inject;if(n){var r=t.inject={};if(Array.isArray(n))for(var o=0;o<n.length;o++)r[n[o]]={from:n[o]};else if(l(n))for(var i in n){var a=n[i];r[i]=l(a)?I({from:i},a):{from:a}}else 0}}function ae(t){var e=t.directives;if(e)for(var n in e){var r=e[n];"function"==typeof r&&(e[n]={bind:r,update:r})}}function se(t,e,n){l(e)||Ct('Invalid value for option "'+t+'": expected an Object, but got '+u(e)+".",n)}function ce(t,e,n){if("function"==typeof e&&(e=e.options),oe(e,n),ie(e,n),ae(e),!e._base&&(e.extends&&(t=ce(t,e.extends,n)),e.mixins))for(var r=0,o=e.mixins.length;r<o;r++)t=ce(t,e.mixins[r],n);var i,a={};for(i in t)s(i);for(i in e)C(t,i)||s(i);function s(r){var o=Gt[r]||ee;a[r]=o(t[r],e[r],n,r)}return a}function ue(t,e,n,r){if("string"==typeof n){var o=t[e];if(C(o,n))return o[n];var i=A(n);if(C(o,i))return o[i];var a=x(i);if(C(o,a))return o[a];var s=o[n]||o[i]||o[a];return s}}function le(t,e,n,r){var o=e[t],i=!C(n,t),a=n[t],s=ye(Boolean,o.type);if(s>-1)if(i&&!C(o,"default"))a=!1;else if(""===a||a===k(t)){var c=ye(String,o.type);(c<0||s<c)&&(a=!0)}if(void 0===a){a=fe(r,o,t);var u=Rt;Ht(!0),Vt(a),Ht(u)}return a}function fe(t,e,n){if(C(e,"default")){var r=e.default;return t&&t.$options.propsData&&void 0===t.$options.propsData[n]&&void 0!==t._props[n]?t._props[n]:"function"==typeof r&&"Function"!==he(e.type)?r.call(t):r}}function pe(t,e,n,r,o){if(t.required&&o)Ct('Missing required prop: "'+e+'"',r);else if(null!=n||t.required){var i=t.type,a=!i||!0===i,s=[];if(i){Array.isArray(i)||(i=[i]);for(var c=0;c<i.length&&!a;c++){var u=ve(n,i[c]);s.push(u.expectedType||""),a=u.valid}}if(a){var l=t.validator;l&&(l(n)||Ct('Invalid prop: custom validator check failed for prop "'+e+'".',r))}else Ct(ge(e,n,s),r)}}var de=/^(String|Number|Boolean|Function|Symbol)$/;function ve(t,e){var n,r=he(e);if(de.test(r)){var o=typeof t;(n=o===r.toLowerCase())||"object"!==o||(n=t instanceof e)}else n="Object"===r?l(t):"Array"===r?Array.isArray(t):t instanceof e;return{valid:n,expectedType:r}}function he(t){var e=t&&t.toString().match(/^\s*function (\w+)/);return e?e[1]:""}function me(t,e){return he(t)===he(e)}function ye(t,e){if(!Array.isArray(e))return me(e,t)?0:-1;for(var n=0,r=e.length;n<r;n++)if(me(e[n],t))return n;return-1}function ge(t,e,n){var r='Invalid prop: type check failed for prop "'+t+'". Expected '+n.map(x).join(", "),o=n[0],i=u(e),a=_e(e,o),s=_e(e,i);return 1===n.length&&be(o)&&!Ce(o,i)&&(r+=" with value "+a),r+=", got "+i+" ",be(i)&&(r+="with value "+s+"."),r}function _e(t,e){return"String"===e?'"'+t+'"':"Number"===e?""+Number(t):""+t}function be(t){return["string","number","boolean"].some(function(e){return t.toLowerCase()===e})}function Ce(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.some(function(t){return"boolean"===t.toLowerCase()})}function we(t,e,n){St();try{if(e)for(var r=e;r=r.$parent;){var o=r.$options.errorCaptured;if(o)for(var i=0;i<o.length;i++)try{if(!1===o[i].call(r,t,e,n))return}catch(as){Ae(as,r,"errorCaptured hook")}}Ae(t,e,n)}finally{jt()}}function $e(t,e,n,r,o){var i;try{(i=n?t.apply(e,n):t.call(e))&&!i._isVue&&d(i)&&!i._handled&&(i.catch(function(t){return we(t,r,o+" (Promise/async)")}),i._handled=!0)}catch(as){we(as,r,o)}return i}function Ae(t,e,n){if(z.errorHandler)try{return z.errorHandler.call(null,t,e,n)}catch(as){as!==t&&xe(as,null,"config.errorHandler")}xe(t,e,n)}function xe(t,e,n){if(!J&&!Q||"undefined"==typeof console)throw t;console.error(t)}var Oe,ke,Se,je,Ee,Te,Ie,De,Ne,Le=!1,Pe=[],Me=!1;function Fe(){Me=!1;var t=Pe.slice(0);Pe.length=0;for(var e=0;e<t.length;e++)t[e]()}if("undefined"!=typeof Promise&&vt(Promise)){var Re=Promise.resolve();Oe=function(){Re.then(Fe),it&&setTimeout(N)},Le=!0}else if(et||"undefined"==typeof MutationObserver||!vt(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())Oe="undefined"!=typeof setImmediate&&vt(setImmediate)?function(){setImmediate(Fe)}:function(){setTimeout(Fe,0)};else{var He=1,Ue=new MutationObserver(Fe),Be=document.createTextNode(String(He));Ue.observe(Be,{characterData:!0}),Oe=function(){He=(He+1)%2,Be.data=String(He)},Le=!0}function ze(t,e){var n;if(Pe.push(function(){if(t)try{t.call(e)}catch(as){we(as,e,"nextTick")}else n&&n(e)}),Me||(Me=!0,Oe()),!t&&"undefined"!=typeof Promise)return new Promise(function(t){n=t})}var Ve,We,qe,Ke=new ht;function Xe(t){Ge(t,Ke),Ke.clear()}function Ge(t,e){var n,r,o=Array.isArray(t);if(!(!o&&!s(t)||Object.isFrozen(t)||t instanceof Et)){if(t.__ob__){var i=t.__ob__.dep.id;if(e.has(i))return;e.add(i)}if(o)for(n=t.length;n--;)Ge(t[n],e);else for(n=(r=Object.keys(t)).length;n--;)Ge(t[r[n]],e)}}var Ze=w(function(t){var e="&"===t.charAt(0),n="~"===(t=e?t.slice(1):t).charAt(0),r="!"===(t=n?t.slice(1):t).charAt(0);return{name:t=r?t.slice(1):t,once:n,capture:r,passive:e}});function Je(t,e){function n(){var t=arguments,r=n.fns;if(!Array.isArray(r))return $e(r,null,arguments,e,"v-on handler");for(var o=r.slice(),i=0;i<o.length;i++)$e(o[i],null,t,e,"v-on handler")}return n.fns=t,n}function Qe(t,e,r,i,a,s){var c,u,l,f;for(c in t)u=t[c],l=e[c],f=Ze(c),n(u)||(n(l)?(n(u.fns)&&(u=t[c]=Je(u,s)),o(f.once)&&(u=t[c]=a(f.name,u,f.capture)),r(f.name,u,f.capture,f.passive,f.params)):u!==l&&(l.fns=u,t[c]=l));for(c in e)n(t[c])&&i((f=Ze(c)).name,e[c],f.capture)}function Ye(t,e,i){var a;t instanceof Et&&(t=t.data.hook||(t.data.hook={}));var s=t[e];function c(){i.apply(this,arguments),_(a.fns,c)}n(s)?a=Je([c]):r(s.fns)&&o(s.merged)?(a=s).fns.push(c):a=Je([s,c]),a.merged=!0,t[e]=a}function tn(t,e,o){var i=e.options.props;if(!n(i)){var a={},s=t.attrs,c=t.props;if(r(s)||r(c))for(var u in i){var l=k(u);en(a,c,u,l,!0)||en(a,s,u,l,!1)}return a}}function en(t,e,n,o,i){if(r(e)){if(C(e,n))return t[n]=e[n],i||delete e[n],!0;if(C(e,o))return t[n]=e[o],i||delete e[o],!0}return!1}function nn(t){for(var e=0;e<t.length;e++)if(Array.isArray(t[e]))return Array.prototype.concat.apply([],t);return t}function rn(t){return a(t)?[Dt(t)]:Array.isArray(t)?an(t):void 0}function on(t){return r(t)&&r(t.text)&&i(t.isComment)}function an(t,e){var i,s,c,u,l=[];for(i=0;i<t.length;i++)n(s=t[i])||"boolean"==typeof s||(u=l[c=l.length-1],Array.isArray(s)?s.length>0&&(on((s=an(s,(e||"")+"_"+i))[0])&&on(u)&&(l[c]=Dt(u.text+s[0].text),s.shift()),l.push.apply(l,s)):a(s)?on(u)?l[c]=Dt(u.text+s):""!==s&&l.push(Dt(s)):on(s)&&on(u)?l[c]=Dt(u.text+s.text):(o(t._isVList)&&r(s.tag)&&n(s.key)&&r(e)&&(s.key="__vlist"+e+"_"+i+"__"),l.push(s)));return l}function sn(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}function cn(t){var e=un(t.$options.inject,t);e&&(Ht(!1),Object.keys(e).forEach(function(n){Wt(t,n,e[n])}),Ht(!0))}function un(t,e){if(t){for(var n=Object.create(null),r=mt?Reflect.ownKeys(t):Object.keys(t),o=0;o<r.length;o++){var i=r[o];if("__ob__"!==i){for(var a=t[i].from,s=e;s;){if(s._provided&&C(s._provided,a)){n[i]=s._provided[a];break}s=s.$parent}if(!s)if("default"in t[i]){var c=t[i].default;n[i]="function"==typeof c?c.call(e):c}else 0}}return n}}function ln(t,e){if(!t||!t.length)return{};for(var n={},r=0,o=t.length;r<o;r++){var i=t[r],a=i.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,i.context!==e&&i.fnContext!==e||!a||null==a.slot)(n.default||(n.default=[])).push(i);else{var s=a.slot,c=n[s]||(n[s]=[]);"template"===i.tag?c.push.apply(c,i.children||[]):c.push(i)}}for(var u in n)n[u].every(fn)&&delete n[u];return n}function fn(t){return t.isComment&&!t.asyncFactory||" "===t.text}function pn(t,n,r){var o,i=Object.keys(n).length>0,a=t?!!t.$stable:!i,s=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(a&&r&&r!==e&&s===r.$key&&!i&&!r.$hasNormal)return r;for(var c in o={},t)t[c]&&"$"!==c[0]&&(o[c]=dn(n,c,t[c]))}else o={};for(var u in n)u in o||(o[u]=vn(n,u));return t&&Object.isExtensible(t)&&(t._normalized=o),q(o,"$stable",a),q(o,"$key",s),q(o,"$hasNormal",i),o}function dn(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&"object"==typeof t&&!Array.isArray(t)?[t]:rn(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function vn(t,e){return function(){return t[e]}}function hn(t,e){var n,o,i,a,c;if(Array.isArray(t)||"string"==typeof t)for(n=new Array(t.length),o=0,i=t.length;o<i;o++)n[o]=e(t[o],o);else if("number"==typeof t)for(n=new Array(t),o=0;o<t;o++)n[o]=e(o+1,o);else if(s(t))if(mt&&t[Symbol.iterator]){n=[];for(var u=t[Symbol.iterator](),l=u.next();!l.done;)n.push(e(l.value,n.length)),l=u.next()}else for(a=Object.keys(t),n=new Array(a.length),o=0,i=a.length;o<i;o++)c=a[o],n[o]=e(t[c],c,o);return r(n)||(n=[]),n._isVList=!0,n}function mn(t,e,n,r){var o,i=this.$scopedSlots[t];i?(n=n||{},r&&(n=I(I({},r),n)),o=i(n)||e):o=this.$slots[t]||e;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},o):o}function yn(t){return ue(this.$options,"filters",t,!0)||P}function gn(t,e){return Array.isArray(t)?-1===t.indexOf(e):t!==e}function _n(t,e,n,r,o){var i=z.keyCodes[e]||n;return o&&r&&!z.keyCodes[e]?gn(o,r):i?gn(i,t):r?k(r)!==e:void 0}function bn(t,e,n,r,o){if(n)if(s(n)){var i;Array.isArray(n)&&(n=D(n));var a=function(a){if("class"===a||"style"===a||g(a))i=t;else{var s=t.attrs&&t.attrs.type;i=r||z.mustUseProp(e,s,a)?t.domProps||(t.domProps={}):t.attrs||(t.attrs={})}var c=A(a),u=k(a);c in i||u in i||(i[a]=n[a],o&&((t.on||(t.on={}))["update:"+a]=function(t){n[a]=t}))};for(var c in n)a(c)}else;return t}function Cn(t,e){var n=this._staticTrees||(this._staticTrees=[]),r=n[t];return r&&!e?r:($n(r=n[t]=this.$options.staticRenderFns[t].call(this._renderProxy,null,this),"__static__"+t,!1),r)}function wn(t,e,n){return $n(t,"__once__"+e+(n?"_"+n:""),!0),t}function $n(t,e,n){if(Array.isArray(t))for(var r=0;r<t.length;r++)t[r]&&"string"!=typeof t[r]&&An(t[r],e+"_"+r,n);else An(t,e,n)}function An(t,e,n){t.isStatic=!0,t.key=e,t.isOnce=n}function xn(t,e){if(e)if(l(e)){var n=t.on=t.on?I({},t.on):{};for(var r in e){var o=n[r],i=e[r];n[r]=o?[].concat(o,i):i}}else;return t}function On(t,e,n,r){e=e||{$stable:!n};for(var o=0;o<t.length;o++){var i=t[o];Array.isArray(i)?On(i,e,n):i&&(i.proxy&&(i.fn.proxy=!0),e[i.key]=i.fn)}return r&&(e.$key=r),e}function kn(t,e){for(var n=0;n<e.length;n+=2){var r=e[n];"string"==typeof r&&r&&(t[e[n]]=e[n+1])}return t}function Sn(t,e){return"string"==typeof t?e+t:t}function jn(t){t._o=wn,t._n=h,t._s=v,t._l=hn,t._t=mn,t._q=M,t._i=F,t._m=Cn,t._f=yn,t._k=_n,t._b=bn,t._v=Dt,t._e=It,t._u=On,t._g=xn,t._d=kn,t._p=Sn}function En(t,n,r,i,a){var s,c=this,u=a.options;C(i,"_uid")?(s=Object.create(i))._original=i:(s=i,i=i._original);var l=o(u._compiled),f=!l;this.data=t,this.props=n,this.children=r,this.parent=i,this.listeners=t.on||e,this.injections=un(u.inject,i),this.slots=function(){return c.$slots||pn(t.scopedSlots,c.$slots=ln(r,i)),c.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return pn(t.scopedSlots,this.slots())}}),l&&(this.$options=u,this.$slots=this.slots(),this.$scopedSlots=pn(t.scopedSlots,this.$slots)),u._scopeId?this._c=function(t,e,n,r){var o=zn(s,t,e,n,r,f);return o&&!Array.isArray(o)&&(o.fnScopeId=u._scopeId,o.fnContext=i),o}:this._c=function(t,e,n,r){return zn(s,t,e,n,r,f)}}function Tn(t,n,o,i,a){var s=t.options,c={},u=s.props;if(r(u))for(var l in u)c[l]=le(l,u,n||e);else r(o.attrs)&&Dn(c,o.attrs),r(o.props)&&Dn(c,o.props);var f=new En(o,c,a,i,t),p=s.render.call(null,f._c,f);if(p instanceof Et)return In(p,o,f.parent,s,f);if(Array.isArray(p)){for(var d=rn(p)||[],v=new Array(d.length),h=0;h<d.length;h++)v[h]=In(d[h],o,f.parent,s,f);return v}}function In(t,e,n,r,o){var i=Nt(t);return i.fnContext=n,i.fnOptions=r,e.slot&&((i.data||(i.data={})).slot=e.slot),i}function Dn(t,e){for(var n in e)t[A(n)]=e[n]}jn(En.prototype);var Nn={init:function(t,e){if(t.componentInstance&&!t.componentInstance._isDestroyed&&t.data.keepAlive){var n=t;Nn.prepatch(n,n)}else{(t.componentInstance=Mn(t,cr)).$mount(e?t.elm:void 0,e)}},prepatch:function(t,e){var n=e.componentOptions;vr(e.componentInstance=t.componentInstance,n.propsData,n.listeners,e,n.children)},insert:function(t){var e=t.context,n=t.componentInstance;n._isMounted||(n._isMounted=!0,gr(n,"mounted")),t.data.keepAlive&&(e._isMounted?Dr(n):mr(n,!0))},destroy:function(t){var e=t.componentInstance;e._isDestroyed||(t.data.keepAlive?yr(e,!0):e.$destroy())}},Ln=Object.keys(Nn);function Pn(t,e,i,a,c){if(!n(t)){var u=i.$options._base;if(s(t)&&(t=u.extend(t)),"function"==typeof t){var l;if(n(t.cid)&&void 0===(t=Yn(l=t,u)))return Qn(l,e,i,a,c);e=e||{},no(t),r(e.model)&&Hn(t.options,e);var f=tn(e,t,c);if(o(t.options.functional))return Tn(t,f,e,i,a);var p=e.on;if(e.on=e.nativeOn,o(t.options.abstract)){var d=e.slot;e={},d&&(e.slot=d)}Fn(e);var v=t.options.name||c;return new Et("vue-component-"+t.cid+(v?"-"+v:""),e,void 0,void 0,void 0,i,{Ctor:t,propsData:f,listeners:p,tag:c,children:a},l)}}}function Mn(t,e){var n={_isComponent:!0,_parentVnode:t,parent:e},o=t.data.inlineTemplate;return r(o)&&(n.render=o.render,n.staticRenderFns=o.staticRenderFns),new t.componentOptions.Ctor(n)}function Fn(t){for(var e=t.hook||(t.hook={}),n=0;n<Ln.length;n++){var r=Ln[n],o=e[r],i=Nn[r];o===i||o&&o._merged||(e[r]=o?Rn(i,o):i)}}function Rn(t,e){var n=function(n,r){t(n,r),e(n,r)};return n._merged=!0,n}function Hn(t,e){var n=t.model&&t.model.prop||"value",o=t.model&&t.model.event||"input";(e.attrs||(e.attrs={}))[n]=e.model.value;var i=e.on||(e.on={}),a=i[o],s=e.model.callback;r(a)?(Array.isArray(a)?-1===a.indexOf(s):a!==s)&&(i[o]=[s].concat(a)):i[o]=s}var Un=1,Bn=2;function zn(t,e,n,r,i,s){return(Array.isArray(n)||a(n))&&(i=r,r=n,n=void 0),o(s)&&(i=Bn),Vn(t,e,n,r,i)}function Vn(t,e,n,o,i){if(r(n)&&r(n.__ob__))return It();if(r(n)&&r(n.is)&&(e=n.is),!e)return It();var a,s,c;(Array.isArray(o)&&"function"==typeof o[0]&&((n=n||{}).scopedSlots={default:o[0]},o.length=0),i===Bn?o=rn(o):i===Un&&(o=nn(o)),"string"==typeof e)?(s=t.$vnode&&t.$vnode.ns||z.getTagNamespace(e),a=z.isReservedTag(e)?new Et(z.parsePlatformTagName(e),n,o,void 0,void 0,t):n&&n.pre||!r(c=ue(t.$options,"components",e))?new Et(e,n,o,void 0,void 0,t):Pn(c,n,t,o,e)):a=Pn(e,n,t,o);return Array.isArray(a)?a:r(a)?(r(s)&&Wn(a,s),r(n)&&qn(n),a):It()}function Wn(t,e,i){if(t.ns=e,"foreignObject"===t.tag&&(e=void 0,i=!0),r(t.children))for(var a=0,s=t.children.length;a<s;a++){var c=t.children[a];r(c.tag)&&(n(c.ns)||o(i)&&"svg"!==c.tag)&&Wn(c,e,i)}}function qn(t){s(t.style)&&Xe(t.style),s(t.class)&&Xe(t.class)}function Kn(t){t._vnode=null,t._staticTrees=null;var n=t.$options,r=t.$vnode=n._parentVnode,o=r&&r.context;t.$slots=ln(n._renderChildren,o),t.$scopedSlots=e,t._c=function(e,n,r,o){return zn(t,e,n,r,o,!1)},t.$createElement=function(e,n,r,o){return zn(t,e,n,r,o,!0)};var i=r&&r.data;Wt(t,"$attrs",i&&i.attrs||e,null,!0),Wt(t,"$listeners",n._parentListeners||e,null,!0)}var Xn,Gn=null;function Zn(t){jn(t.prototype),t.prototype.$nextTick=function(t){return ze(t,this)},t.prototype._render=function(){var t,e=this,n=e.$options,r=n.render,o=n._parentVnode;o&&(e.$scopedSlots=pn(o.data.scopedSlots,e.$slots,e.$scopedSlots)),e.$vnode=o;try{Gn=e,t=r.call(e._renderProxy,e.$createElement)}catch(as){we(as,e,"render"),t=e._vnode}finally{Gn=null}return Array.isArray(t)&&1===t.length&&(t=t[0]),t instanceof Et||(t=It()),t.parent=o,t}}function Jn(t,e){return(t.__esModule||mt&&"Module"===t[Symbol.toStringTag])&&(t=t.default),s(t)?e.extend(t):t}function Qn(t,e,n,r,o){var i=It();return i.asyncFactory=t,i.asyncMeta={data:e,context:n,children:r,tag:o},i}function Yn(t,e){if(o(t.error)&&r(t.errorComp))return t.errorComp;if(r(t.resolved))return t.resolved;var i=Gn;if(i&&r(t.owners)&&-1===t.owners.indexOf(i)&&t.owners.push(i),o(t.loading)&&r(t.loadingComp))return t.loadingComp;if(i&&!r(t.owners)){var a=t.owners=[i],c=!0,u=null,l=null;i.$on("hook:destroyed",function(){return _(a,i)});var f=function(t){for(var e=0,n=a.length;e<n;e++)a[e].$forceUpdate();t&&(a.length=0,null!==u&&(clearTimeout(u),u=null),null!==l&&(clearTimeout(l),l=null))},p=R(function(n){t.resolved=Jn(n,e),c?a.length=0:f(!0)}),v=R(function(e){r(t.errorComp)&&(t.error=!0,f(!0))}),h=t(p,v);return s(h)&&(d(h)?n(t.resolved)&&h.then(p,v):d(h.component)&&(h.component.then(p,v),r(h.error)&&(t.errorComp=Jn(h.error,e)),r(h.loading)&&(t.loadingComp=Jn(h.loading,e),0===h.delay?t.loading=!0:u=setTimeout(function(){u=null,n(t.resolved)&&n(t.error)&&(t.loading=!0,f(!1))},h.delay||200)),r(h.timeout)&&(l=setTimeout(function(){l=null,n(t.resolved)&&v(null)},h.timeout)))),c=!1,t.loading?t.loadingComp:t.resolved}}function tr(t){return t.isComment&&t.asyncFactory}function er(t){if(Array.isArray(t))for(var e=0;e<t.length;e++){var n=t[e];if(r(n)&&(r(n.componentOptions)||tr(n)))return n}}function nr(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&ar(t,e)}function rr(t,e){Xn.$on(t,e)}function or(t,e){Xn.$off(t,e)}function ir(t,e){var n=Xn;return function r(){null!==e.apply(null,arguments)&&n.$off(t,r)}}function ar(t,e,n){Xn=t,Qe(e,n||{},rr,or,ir,t),Xn=void 0}function sr(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var o=0,i=t.length;o<i;o++)r.$on(t[o],n);else(r._events[t]||(r._events[t]=[])).push(n),e.test(t)&&(r._hasHookEvent=!0);return r},t.prototype.$once=function(t,e){var n=this;function r(){n.$off(t,r),e.apply(n,arguments)}return r.fn=e,n.$on(t,r),n},t.prototype.$off=function(t,e){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(t)){for(var r=0,o=t.length;r<o;r++)n.$off(t[r],e);return n}var i,a=n._events[t];if(!a)return n;if(!e)return n._events[t]=null,n;for(var s=a.length;s--;)if((i=a[s])===e||i.fn===e){a.splice(s,1);break}return n},t.prototype.$emit=function(t){var e=this,n=e._events[t];if(n){n=n.length>1?T(n):n;for(var r=T(arguments,1),o='event handler for "'+t+'"',i=0,a=n.length;i<a;i++)$e(n[i],e,r,e,o)}return e}}var cr=null,ur=!1;function lr(t){var e=cr;return cr=t,function(){cr=e}}function fr(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}function pr(t){t.prototype._update=function(t,e){var n=this,r=n.$el,o=n._vnode,i=lr(n);n._vnode=t,n.$el=o?n.__patch__(o,t):n.__patch__(n.$el,t,e,!1),i(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)},t.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},t.prototype.$destroy=function(){var t=this;if(!t._isBeingDestroyed){gr(t,"beforeDestroy"),t._isBeingDestroyed=!0;var e=t.$parent;!e||e._isBeingDestroyed||t.$options.abstract||_(e.$children,t),t._watcher&&t._watcher.teardown();for(var n=t._watchers.length;n--;)t._watchers[n].teardown();t._data.__ob__&&t._data.__ob__.vmCount--,t._isDestroyed=!0,t.__patch__(t._vnode,null),gr(t,"destroyed"),t.$off(),t.$el&&(t.$el.__vue__=null),t.$vnode&&(t.$vnode.parent=null)}}}function dr(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=It),gr(t,"beforeMount"),r=function(){t._update(t._render(),n)},new Mr(t,r,N,{before:function(){t._isMounted&&!t._isDestroyed&&gr(t,"beforeUpdate")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,gr(t,"mounted")),t}function vr(t,n,r,o,i){var a=o.data.scopedSlots,s=t.$scopedSlots,c=!!(a&&!a.$stable||s!==e&&!s.$stable||a&&t.$scopedSlots.$key!==a.$key),u=!!(i||t.$options._renderChildren||c);if(t.$options._parentVnode=o,t.$vnode=o,t._vnode&&(t._vnode.parent=o),t.$options._renderChildren=i,t.$attrs=o.data.attrs||e,t.$listeners=r||e,n&&t.$options.props){Ht(!1);for(var l=t._props,f=t.$options._propKeys||[],p=0;p<f.length;p++){var d=f[p],v=t.$options.props;l[d]=le(d,v,n,t)}Ht(!0),t.$options.propsData=n}r=r||e;var h=t.$options._parentListeners;t.$options._parentListeners=r,ar(t,r,h),u&&(t.$slots=ln(i,o.context),t.$forceUpdate())}function hr(t){for(;t&&(t=t.$parent);)if(t._inactive)return!0;return!1}function mr(t,e){if(e){if(t._directInactive=!1,hr(t))return}else if(t._directInactive)return;if(t._inactive||null===t._inactive){t._inactive=!1;for(var n=0;n<t.$children.length;n++)mr(t.$children[n]);gr(t,"activated")}}function yr(t,e){if(!(e&&(t._directInactive=!0,hr(t))||t._inactive)){t._inactive=!0;for(var n=0;n<t.$children.length;n++)yr(t.$children[n]);gr(t,"deactivated")}}function gr(t,e){St();var n=t.$options[e],r=e+" hook";if(n)for(var o=0,i=n.length;o<i;o++)$e(n[o],t,null,t,r);t._hasHookEvent&&t.$emit("hook:"+e),jt()}var _r=100,br=[],Cr=[],wr={},$r={},Ar=!1,xr=!1,Or=0;function kr(){Or=br.length=Cr.length=0,wr={},Ar=xr=!1}var Sr=0,jr=Date.now;if(J&&!et){var Er=window.performance;Er&&"function"==typeof Er.now&&jr()>document.createEvent("Event").timeStamp&&(jr=function(){return Er.now()})}function Tr(){var t,e;for(Sr=jr(),xr=!0,br.sort(function(t,e){return t.id-e.id}),Or=0;Or<br.length;Or++)(t=br[Or]).before&&t.before(),e=t.id,wr[e]=null,t.run();var n=Cr.slice(),r=br.slice();kr(),Nr(n),Ir(r),dt&&z.devtools&&dt.emit("flush")}function Ir(t){for(var e=t.length;e--;){var n=t[e],r=n.vm;r._watcher===n&&r._isMounted&&!r._isDestroyed&&gr(r,"updated")}}function Dr(t){t._inactive=!1,Cr.push(t)}function Nr(t){for(var e=0;e<t.length;e++)t[e]._inactive=!0,mr(t[e],!0)}function Lr(t){var e=t.id;if(null==wr[e]){if(wr[e]=!0,xr){for(var n=br.length-1;n>Or&&br[n].id>t.id;)n--;br.splice(n+1,0,t)}else br.push(t);Ar||(Ar=!0,ze(Tr))}}var Pr=0,Mr=function(t,e,n,r,o){this.vm=t,o&&(t._watcher=this),t._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++Pr,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new ht,this.newDepIds=new ht,this.expression="","function"==typeof e?this.getter=e:(this.getter=X(e),this.getter||(this.getter=N)),this.value=this.lazy?void 0:this.get()};Mr.prototype.get=function(){var t;St(this);var e=this.vm;try{t=this.getter.call(e,e)}catch(as){if(!this.user)throw as;we(as,e,'getter for watcher "'+this.expression+'"')}finally{this.deep&&Xe(t),jt(),this.cleanupDeps()}return t},Mr.prototype.addDep=function(t){var e=t.id;this.newDepIds.has(e)||(this.newDepIds.add(e),this.newDeps.push(t),this.depIds.has(e)||t.addSub(this))},Mr.prototype.cleanupDeps=function(){for(var t=this.deps.length;t--;){var e=this.deps[t];this.newDepIds.has(e.id)||e.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},Mr.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():Lr(this)},Mr.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||s(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(as){we(as,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},Mr.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Mr.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},Mr.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||_(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var Fr={enumerable:!0,configurable:!0,get:N,set:N};function Rr(t,e,n){Fr.get=function(){return this[e][n]},Fr.set=function(t){this[e][n]=t},Object.defineProperty(t,n,Fr)}function Hr(t){t._watchers=[];var e=t.$options;e.props&&Ur(t,e.props),e.methods&&Gr(t,e.methods),e.data?Br(t):Vt(t._data={},!0),e.computed&&Wr(t,e.computed),e.watch&&e.watch!==ut&&Zr(t,e.watch)}function Ur(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[],i=!t.$parent;i||Ht(!1);var a=function(i){o.push(i);var a=le(i,e,n,t);Wt(r,i,a),i in t||Rr(t,"_props",i)};for(var s in e)a(s);Ht(!0)}function Br(t){var e=t.$options.data;l(e=t._data="function"==typeof e?zr(e,t):e||{})||(e={});for(var n=Object.keys(e),r=t.$options.props,o=(t.$options.methods,n.length);o--;){var i=n[o];0,r&&C(r,i)||W(i)||Rr(t,"_data",i)}Vt(e,!0)}function zr(t,e){St();try{return t.call(e,e)}catch(as){return we(as,e,"data()"),{}}finally{jt()}}var Vr={lazy:!0};function Wr(t,e){var n=t._computedWatchers=Object.create(null),r=pt();for(var o in e){var i=e[o],a="function"==typeof i?i:i.get;0,r||(n[o]=new Mr(t,a||N,N,Vr)),o in t||qr(t,o,i)}}function qr(t,e,n){var r=!pt();"function"==typeof n?(Fr.get=r?Kr(e):Xr(n),Fr.set=N):(Fr.get=n.get?r&&!1!==n.cache?Kr(e):Xr(n.get):N,Fr.set=n.set||N),Object.defineProperty(t,e,Fr)}function Kr(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),Ot.target&&e.depend(),e.value}}function Xr(t){return function(){return t.call(this,this)}}function Gr(t,e){t.$options.props;for(var n in e)t[n]="function"!=typeof e[n]?N:E(e[n],t)}function Zr(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o<r.length;o++)Jr(t,n,r[o]);else Jr(t,n,r)}}function Jr(t,e,n,r){return l(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=t[n]),t.$watch(e,n,r)}function Qr(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,"$data",e),Object.defineProperty(t.prototype,"$props",n),t.prototype.$set=qt,t.prototype.$delete=Kt,t.prototype.$watch=function(t,e,n){if(l(e))return Jr(this,t,e,n);(n=n||{}).user=!0;var r=new Mr(this,t,e,n);if(n.immediate)try{e.call(this,r.value)}catch(o){we(o,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}var Yr=0;function to(t){t.prototype._init=function(t){var e=this;e._uid=Yr++,e._isVue=!0,t&&t._isComponent?eo(e,t):e.$options=ce(no(e.constructor),t||{},e),e._renderProxy=e,e._self=e,fr(e),nr(e),Kn(e),gr(e,"beforeCreate"),cn(e),Hr(e),sn(e),gr(e,"created"),e.$options.el&&e.$mount(e.$options.el)}}function eo(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}function no(t){var e=t.options;if(t.super){var n=no(t.super);if(n!==t.superOptions){t.superOptions=n;var r=ro(t);r&&I(t.extendOptions,r),(e=t.options=ce(n,t.extendOptions)).name&&(e.components[e.name]=t)}}return e}function ro(t){var e,n=t.options,r=t.sealedOptions;for(var o in n)n[o]!==r[o]&&(e||(e={}),e[o]=n[o]);return e}function oo(t){this._init(t)}function io(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=T(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}function ao(t){t.mixin=function(t){return this.options=ce(this.options,t),this}}function so(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,o=t._Ctor||(t._Ctor={});if(o[r])return o[r];var i=t.name||n.options.name;var a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=ce(n.options,t),a.super=n,a.options.props&&co(a),a.options.computed&&uo(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,U.forEach(function(t){a[t]=n[t]}),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=I({},a.options),o[r]=a,a}}function co(t){var e=t.options.props;for(var n in e)Rr(t.prototype,"_props",n)}function uo(t){var e=t.options.computed;for(var n in e)qr(t.prototype,n,e[n])}function lo(t){U.forEach(function(e){t[e]=function(t,n){return n?("component"===e&&l(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}})}function fo(t){return t&&(t.Ctor.options.name||t.tag)}function po(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!f(t)&&t.test(e)}function vo(t,e){var n=t.cache,r=t.keys,o=t._vnode;for(var i in n){var a=n[i];if(a){var s=fo(a.componentOptions);s&&!e(s)&&ho(n,i,r,o)}}}function ho(t,e,n,r){var o=t[e];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),t[e]=null,_(n,e)}to(oo),Qr(oo),sr(oo),pr(oo),Zn(oo);var mo=[String,RegExp,Array],yo={name:"keep-alive",abstract:!0,props:{include:mo,exclude:mo,max:[String,Number]},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var t in this.cache)ho(this.cache,t,this.keys)},mounted:function(){var t=this;this.$watch("include",function(e){vo(t,function(t){return po(e,t)})}),this.$watch("exclude",function(e){vo(t,function(t){return!po(e,t)})})},render:function(){var t=this.$slots.default,e=er(t),n=e&&e.componentOptions;if(n){var r=fo(n),o=this.include,i=this.exclude;if(o&&(!r||!po(o,r))||i&&r&&po(i,r))return e;var a=this.cache,s=this.keys,c=null==e.key?n.Ctor.cid+(n.tag?"::"+n.tag:""):e.key;a[c]?(e.componentInstance=a[c].componentInstance,_(s,c),s.push(c)):(a[c]=e,s.push(c),this.max&&s.length>parseInt(this.max)&&ho(a,s[0],s,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}},go={KeepAlive:yo};function _o(t){var e={get:function(){return z}};Object.defineProperty(t,"config",e),t.util={warn:Ct,extend:I,mergeOptions:ce,defineReactive:Wt},t.set=qt,t.delete=Kt,t.nextTick=ze,t.observable=function(t){return Vt(t),t},t.options=Object.create(null),U.forEach(function(e){t.options[e+"s"]=Object.create(null)}),t.options._base=t,I(t.options.components,go),io(t),ao(t),so(t),lo(t)}_o(oo),Object.defineProperty(oo.prototype,"$isServer",{get:pt}),Object.defineProperty(oo.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(oo,"FunctionalRenderContext",{value:En}),oo.version="2.6.10";var bo=m("style,class"),Co=m("input,textarea,option,select,progress"),wo=function(t,e,n){return"value"===n&&Co(t)&&"button"!==e||"selected"===n&&"option"===t||"checked"===n&&"input"===t||"muted"===n&&"video"===t},$o=m("contenteditable,draggable,spellcheck"),Ao=m("events,caret,typing,plaintext-only"),xo=function(t,e){return Eo(e)||"false"===e?"false":"contenteditable"===t&&Ao(e)?e:"true"},Oo=m("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),ko="http://www.w3.org/1999/xlink",So=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},jo=function(t){return So(t)?t.slice(6,t.length):""},Eo=function(t){return null==t||!1===t};function To(t){for(var e=t.data,n=t,o=t;r(o.componentInstance);)(o=o.componentInstance._vnode)&&o.data&&(e=Io(o.data,e));for(;r(n=n.parent);)n&&n.data&&(e=Io(e,n.data));return Do(e.staticClass,e.class)}function Io(t,e){return{staticClass:No(t.staticClass,e.staticClass),class:r(t.class)?[t.class,e.class]:e.class}}function Do(t,e){return r(t)||r(e)?No(t,Lo(e)):""}function No(t,e){return t?e?t+" "+e:t:e||""}function Lo(t){return Array.isArray(t)?Po(t):s(t)?Mo(t):"string"==typeof t?t:""}function Po(t){for(var e,n="",o=0,i=t.length;o<i;o++)r(e=Lo(t[o]))&&""!==e&&(n&&(n+=" "),n+=e);return n}function Mo(t){var e="";for(var n in t)t[n]&&(e&&(e+=" "),e+=n);return e}var Fo={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},Ro=m("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),Ho=m("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),Uo=function(t){return Ro(t)||Ho(t)};function Bo(t){return Ho(t)?"svg":"math"===t?"math":void 0}var zo=Object.create(null);function Vo(t){if(!J)return!0;if(Uo(t))return!1;if(t=t.toLowerCase(),null!=zo[t])return zo[t];var e=document.createElement(t);return t.indexOf("-")>-1?zo[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:zo[t]=/HTMLUnknownElement/.test(e.toString())}var Wo=m("text,number,password,search,email,tel,url");function qo(t){if("string"==typeof t){var e=document.querySelector(t);return e||document.createElement("div")}return t}function Ko(t,e){var n=document.createElement(t);return"select"!==t?n:(e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n)}function Xo(t,e){return document.createElementNS(Fo[t],e)}function Go(t){return document.createTextNode(t)}function Zo(t){return document.createComment(t)}function Jo(t,e,n){t.insertBefore(e,n)}function Qo(t,e){t.removeChild(e)}function Yo(t,e){t.appendChild(e)}function ti(t){return t.parentNode}function ei(t){return t.nextSibling}function ni(t){return t.tagName}function ri(t,e){t.textContent=e}function oi(t,e){t.setAttribute(e,"")}var ii=Object.freeze({createElement:Ko,createElementNS:Xo,createTextNode:Go,createComment:Zo,insertBefore:Jo,removeChild:Qo,appendChild:Yo,parentNode:ti,nextSibling:ei,tagName:ni,setTextContent:ri,setStyleScope:oi}),ai={create:function(t,e){si(e)},update:function(t,e){t.data.ref!==e.data.ref&&(si(t,!0),si(e))},destroy:function(t){si(t,!0)}};function si(t,e){var n=t.data.ref;if(r(n)){var o=t.context,i=t.componentInstance||t.elm,a=o.$refs;e?Array.isArray(a[n])?_(a[n],i):a[n]===i&&(a[n]=void 0):t.data.refInFor?Array.isArray(a[n])?a[n].indexOf(i)<0&&a[n].push(i):a[n]=[i]:a[n]=i}}var ci=new Et("",{},[]),ui=["create","activate","update","remove","destroy"];function li(t,e){return t.key===e.key&&(t.tag===e.tag&&t.isComment===e.isComment&&r(t.data)===r(e.data)&&fi(t,e)||o(t.isAsyncPlaceholder)&&t.asyncFactory===e.asyncFactory&&n(e.asyncFactory.error))}function fi(t,e){if("input"!==t.tag)return!0;var n,o=r(n=t.data)&&r(n=n.attrs)&&n.type,i=r(n=e.data)&&r(n=n.attrs)&&n.type;return o===i||Wo(o)&&Wo(i)}function pi(t,e,n){var o,i,a={};for(o=e;o<=n;++o)r(i=t[o].key)&&(a[i]=o);return a}function di(t){var e,i,s={},c=t.modules,u=t.nodeOps;for(e=0;e<ui.length;++e)for(s[ui[e]]=[],i=0;i<c.length;++i)r(c[i][ui[e]])&&s[ui[e]].push(c[i][ui[e]]);function l(t){var e=u.parentNode(t);r(e)&&u.removeChild(e,t)}function f(t,e,n,i,a,c,l){if(r(t.elm)&&r(c)&&(t=c[l]=Nt(t)),t.isRootInsert=!a,!function(t,e,n,i){var a=t.data;if(r(a)){var c=r(t.componentInstance)&&a.keepAlive;if(r(a=a.hook)&&r(a=a.init)&&a(t,!1),r(t.componentInstance))return p(t,e),d(n,t.elm,i),o(c)&&function(t,e,n,o){var i,a=t;for(;a.componentInstance;)if(a=a.componentInstance._vnode,r(i=a.data)&&r(i=i.transition)){for(i=0;i<s.activate.length;++i)s.activate[i](ci,a);e.push(a);break}d(n,t.elm,o)}(t,e,n,i),!0}}(t,e,n,i)){var f=t.data,h=t.children,m=t.tag;r(m)?(t.elm=t.ns?u.createElementNS(t.ns,m):u.createElement(m,t),g(t),v(t,h,e),r(f)&&y(t,e),d(n,t.elm,i)):o(t.isComment)?(t.elm=u.createComment(t.text),d(n,t.elm,i)):(t.elm=u.createTextNode(t.text),d(n,t.elm,i))}}function p(t,e){r(t.data.pendingInsert)&&(e.push.apply(e,t.data.pendingInsert),t.data.pendingInsert=null),t.elm=t.componentInstance.$el,h(t)?(y(t,e),g(t)):(si(t),e.push(t))}function d(t,e,n){r(t)&&(r(n)?u.parentNode(n)===t&&u.insertBefore(t,e,n):u.appendChild(t,e))}function v(t,e,n){if(Array.isArray(e)){0;for(var r=0;r<e.length;++r)f(e[r],n,t.elm,null,!0,e,r)}else a(t.text)&&u.appendChild(t.elm,u.createTextNode(String(t.text)))}function h(t){for(;t.componentInstance;)t=t.componentInstance._vnode;return r(t.tag)}function y(t,n){for(var o=0;o<s.create.length;++o)s.create[o](ci,t);r(e=t.data.hook)&&(r(e.create)&&e.create(ci,t),r(e.insert)&&n.push(t))}function g(t){var e;if(r(e=t.fnScopeId))u.setStyleScope(t.elm,e);else for(var n=t;n;)r(e=n.context)&&r(e=e.$options._scopeId)&&u.setStyleScope(t.elm,e),n=n.parent;r(e=cr)&&e!==t.context&&e!==t.fnContext&&r(e=e.$options._scopeId)&&u.setStyleScope(t.elm,e)}function _(t,e,n,r,o,i){for(;r<=o;++r)f(n[r],i,t,e,!1,n,r)}function b(t){var e,n,o=t.data;if(r(o))for(r(e=o.hook)&&r(e=e.destroy)&&e(t),e=0;e<s.destroy.length;++e)s.destroy[e](t);if(r(e=t.children))for(n=0;n<t.children.length;++n)b(t.children[n])}function C(t,e,n,o){for(;n<=o;++n){var i=e[n];r(i)&&(r(i.tag)?(w(i),b(i)):l(i.elm))}}function w(t,e){if(r(e)||r(t.data)){var n,o=s.remove.length+1;for(r(e)?e.listeners+=o:e=function(t,e){function n(){0==--n.listeners&&l(t)}return n.listeners=e,n}(t.elm,o),r(n=t.componentInstance)&&r(n=n._vnode)&&r(n.data)&&w(n,e),n=0;n<s.remove.length;++n)s.remove[n](t,e);r(n=t.data.hook)&&r(n=n.remove)?n(t,e):e()}else l(t.elm)}function $(t,e,n,o){for(var i=n;i<o;i++){var a=e[i];if(r(a)&&li(t,a))return i}}function A(t,e,i,a,c,l){if(t!==e){r(e.elm)&&r(a)&&(e=a[c]=Nt(e));var p=e.elm=t.elm;if(o(t.isAsyncPlaceholder))r(e.asyncFactory.resolved)?k(t.elm,e,i):e.isAsyncPlaceholder=!0;else if(o(e.isStatic)&&o(t.isStatic)&&e.key===t.key&&(o(e.isCloned)||o(e.isOnce)))e.componentInstance=t.componentInstance;else{var d,v=e.data;r(v)&&r(d=v.hook)&&r(d=d.prepatch)&&d(t,e);var m=t.children,y=e.children;if(r(v)&&h(e)){for(d=0;d<s.update.length;++d)s.update[d](t,e);r(d=v.hook)&&r(d=d.update)&&d(t,e)}n(e.text)?r(m)&&r(y)?m!==y&&function(t,e,o,i,a){var s,c,l,p=0,d=0,v=e.length-1,h=e[0],m=e[v],y=o.length-1,g=o[0],b=o[y],w=!a;for(;p<=v&&d<=y;)n(h)?h=e[++p]:n(m)?m=e[--v]:li(h,g)?(A(h,g,i,o,d),h=e[++p],g=o[++d]):li(m,b)?(A(m,b,i,o,y),m=e[--v],b=o[--y]):li(h,b)?(A(h,b,i,o,y),w&&u.insertBefore(t,h.elm,u.nextSibling(m.elm)),h=e[++p],b=o[--y]):li(m,g)?(A(m,g,i,o,d),w&&u.insertBefore(t,m.elm,h.elm),m=e[--v],g=o[++d]):(n(s)&&(s=pi(e,p,v)),n(c=r(g.key)?s[g.key]:$(g,e,p,v))?f(g,i,t,h.elm,!1,o,d):li(l=e[c],g)?(A(l,g,i,o,d),e[c]=void 0,w&&u.insertBefore(t,l.elm,h.elm)):f(g,i,t,h.elm,!1,o,d),g=o[++d]);p>v?_(t,n(o[y+1])?null:o[y+1].elm,o,d,y,i):d>y&&C(0,e,p,v)}(p,m,y,i,l):r(y)?(r(t.text)&&u.setTextContent(p,""),_(p,null,y,0,y.length-1,i)):r(m)?C(0,m,0,m.length-1):r(t.text)&&u.setTextContent(p,""):t.text!==e.text&&u.setTextContent(p,e.text),r(v)&&r(d=v.hook)&&r(d=d.postpatch)&&d(t,e)}}}function x(t,e,n){if(o(n)&&r(t.parent))t.parent.data.pendingInsert=e;else for(var i=0;i<e.length;++i)e[i].data.hook.insert(e[i])}var O=m("attrs,class,staticClass,staticStyle,key");function k(t,e,n,i){var a,s=e.tag,c=e.data,u=e.children;if(i=i||c&&c.pre,e.elm=t,o(e.isComment)&&r(e.asyncFactory))return e.isAsyncPlaceholder=!0,!0;if(r(c)&&(r(a=c.hook)&&r(a=a.init)&&a(e,!0),r(a=e.componentInstance)))return p(e,n),!0;if(r(s)){if(r(u))if(t.hasChildNodes())if(r(a=c)&&r(a=a.domProps)&&r(a=a.innerHTML)){if(a!==t.innerHTML)return!1}else{for(var l=!0,f=t.firstChild,d=0;d<u.length;d++){if(!f||!k(f,u[d],n,i)){l=!1;break}f=f.nextSibling}if(!l||f)return!1}else v(e,u,n);if(r(c)){var h=!1;for(var m in c)if(!O(m)){h=!0,y(e,n);break}!h&&c.class&&Xe(c.class)}}else t.data!==e.text&&(t.data=e.text);return!0}return function(t,e,i,a){if(!n(e)){var c,l=!1,p=[];if(n(t))l=!0,f(e,p);else{var d=r(t.nodeType);if(!d&&li(t,e))A(t,e,p,null,null,a);else{if(d){if(1===t.nodeType&&t.hasAttribute(H)&&(t.removeAttribute(H),i=!0),o(i)&&k(t,e,p))return x(e,p,!0),t;c=t,t=new Et(u.tagName(c).toLowerCase(),{},[],void 0,c)}var v=t.elm,m=u.parentNode(v);if(f(e,p,v._leaveCb?null:m,u.nextSibling(v)),r(e.parent))for(var y=e.parent,g=h(e);y;){for(var _=0;_<s.destroy.length;++_)s.destroy[_](y);if(y.elm=e.elm,g){for(var w=0;w<s.create.length;++w)s.create[w](ci,y);var $=y.data.hook.insert;if($.merged)for(var O=1;O<$.fns.length;O++)$.fns[O]()}else si(y);y=y.parent}r(m)?C(0,[t],0,0):r(t.tag)&&b(t)}}return x(e,p,l),e.elm}r(t)&&b(t)}}var vi={create:hi,update:hi,destroy:function(t){hi(t,ci)}};function hi(t,e){(t.data.directives||e.data.directives)&&mi(t,e)}function mi(t,e){var n,r,o,i=t===ci,a=e===ci,s=gi(t.data.directives,t.context),c=gi(e.data.directives,e.context),u=[],l=[];for(n in c)r=s[n],o=c[n],r?(o.oldValue=r.value,o.oldArg=r.arg,bi(o,"update",e,t),o.def&&o.def.componentUpdated&&l.push(o)):(bi(o,"bind",e,t),o.def&&o.def.inserted&&u.push(o));if(u.length){var f=function(){for(var n=0;n<u.length;n++)bi(u[n],"inserted",e,t)};i?Ye(e,"insert",f):f()}if(l.length&&Ye(e,"postpatch",function(){for(var n=0;n<l.length;n++)bi(l[n],"componentUpdated",e,t)}),!i)for(n in s)c[n]||bi(s[n],"unbind",t,t,a)}var yi=Object.create(null);function gi(t,e){var n,r,o=Object.create(null);if(!t)return o;for(n=0;n<t.length;n++)(r=t[n]).modifiers||(r.modifiers=yi),o[_i(r)]=r,r.def=ue(e.$options,"directives",r.name,!0);return o}function _i(t){return t.rawName||t.name+"."+Object.keys(t.modifiers||{}).join(".")}function bi(t,e,n,r,o){var i=t.def&&t.def[e];if(i)try{i(n.elm,t,n,r,o)}catch(as){we(as,n.context,"directive "+t.name+" "+e+" hook")}}var Ci=[ai,vi];function wi(t,e){var o=e.componentOptions;if(!(r(o)&&!1===o.Ctor.options.inheritAttrs||n(t.data.attrs)&&n(e.data.attrs))){var i,a,s=e.elm,c=t.data.attrs||{},u=e.data.attrs||{};for(i in r(u.__ob__)&&(u=e.data.attrs=I({},u)),u)a=u[i],c[i]!==a&&$i(s,i,a);for(i in(et||rt)&&u.value!==c.value&&$i(s,"value",u.value),c)n(u[i])&&(So(i)?s.removeAttributeNS(ko,jo(i)):$o(i)||s.removeAttribute(i))}}function $i(t,e,n){t.tagName.indexOf("-")>-1?Ai(t,e,n):Oo(e)?Eo(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):$o(e)?t.setAttribute(e,xo(e,n)):So(e)?Eo(n)?t.removeAttributeNS(ko,jo(e)):t.setAttributeNS(ko,e,n):Ai(t,e,n)}function Ai(t,e,n){if(Eo(n))t.removeAttribute(e);else{if(et&&!nt&&"TEXTAREA"===t.tagName&&"placeholder"===e&&""!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var xi={create:wi,update:wi};function Oi(t,e){var o=e.elm,i=e.data,a=t.data;if(!(n(i.staticClass)&&n(i.class)&&(n(a)||n(a.staticClass)&&n(a.class)))){var s=To(e),c=o._transitionClasses;r(c)&&(s=No(s,Lo(c))),s!==o._prevClass&&(o.setAttribute("class",s),o._prevClass=s)}}var ki,Si={create:Oi,update:Oi},ji="__r",Ei="__c";function Ti(t){if(r(t[ji])){var e=et?"change":"input";t[e]=[].concat(t[ji],t[e]||[]),delete t[ji]}r(t[Ei])&&(t.change=[].concat(t[Ei],t.change||[]),delete t[Ei])}function Ii(t,e,n){var r=ki;return function o(){null!==e.apply(null,arguments)&&Li(t,o,n,r)}}var Di=Le&&!(ct&&Number(ct[1])<=53);function Ni(t,e,n,r){if(Di){var o=Sr,i=e;e=i._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=o||t.timeStamp<=0||t.target.ownerDocument!==document)return i.apply(this,arguments)}}ki.addEventListener(t,e,lt?{capture:n,passive:r}:n)}function Li(t,e,n,r){(r||ki).removeEventListener(t,e._wrapper||e,n)}function Pi(t,e){if(!n(t.data.on)||!n(e.data.on)){var r=e.data.on||{},o=t.data.on||{};ki=e.elm,Ti(r),Qe(r,o,Ni,Li,Ii,e.context),ki=void 0}}var Mi,Fi={create:Pi,update:Pi};function Ri(t,e){if(!n(t.data.domProps)||!n(e.data.domProps)){var o,i,a=e.elm,s=t.data.domProps||{},c=e.data.domProps||{};for(o in r(c.__ob__)&&(c=e.data.domProps=I({},c)),s)o in c||(a[o]="");for(o in c){if(i=c[o],"textContent"===o||"innerHTML"===o){if(e.children&&(e.children.length=0),i===s[o])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===o&&"PROGRESS"!==a.tagName){a._value=i;var u=n(i)?"":String(i);Hi(a,u)&&(a.value=u)}else if("innerHTML"===o&&Ho(a.tagName)&&n(a.innerHTML)){(Mi=Mi||document.createElement("div")).innerHTML="<svg>"+i+"</svg>";for(var l=Mi.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;l.firstChild;)a.appendChild(l.firstChild)}else if(i!==s[o])try{a[o]=i}catch(as){}}}}function Hi(t,e){return!t.composing&&("OPTION"===t.tagName||Ui(t,e)||Bi(t,e))}function Ui(t,e){var n=!0;try{n=document.activeElement!==t}catch(as){}return n&&t.value!==e}function Bi(t,e){var n=t.value,o=t._vModifiers;if(r(o)){if(o.number)return h(n)!==h(e);if(o.trim)return n.trim()!==e.trim()}return n!==e}var zi={create:Ri,update:Ri},Vi=w(function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach(function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}}),e});function Wi(t){var e=qi(t.style);return t.staticStyle?I(t.staticStyle,e):e}function qi(t){return Array.isArray(t)?D(t):"string"==typeof t?Vi(t):t}function Ki(t,e){var n,r={};if(e)for(var o=t;o.componentInstance;)(o=o.componentInstance._vnode)&&o.data&&(n=Wi(o.data))&&I(r,n);(n=Wi(t.data))&&I(r,n);for(var i=t;i=i.parent;)i.data&&(n=Wi(i.data))&&I(r,n);return r}var Xi,Gi=/^--/,Zi=/\s*!important$/,Ji=function(t,e,n){if(Gi.test(e))t.style.setProperty(e,n);else if(Zi.test(n))t.style.setProperty(k(e),n.replace(Zi,""),"important");else{var r=Yi(e);if(Array.isArray(n))for(var o=0,i=n.length;o<i;o++)t.style[r]=n[o];else t.style[r]=n}},Qi=["Webkit","Moz","ms"],Yi=w(function(t){if(Xi=Xi||document.createElement("div").style,"filter"!==(t=A(t))&&t in Xi)return t;for(var e=t.charAt(0).toUpperCase()+t.slice(1),n=0;n<Qi.length;n++){var r=Qi[n]+e;if(r in Xi)return r}});function ta(t,e){var o=e.data,i=t.data;if(!(n(o.staticStyle)&&n(o.style)&&n(i.staticStyle)&&n(i.style))){var a,s,c=e.elm,u=i.staticStyle,l=i.normalizedStyle||i.style||{},f=u||l,p=qi(e.data.style)||{};e.data.normalizedStyle=r(p.__ob__)?I({},p):p;var d=Ki(e,!0);for(s in f)n(d[s])&&Ji(c,s,"");for(s in d)(a=d[s])!==f[s]&&Ji(c,s,null==a?"":a)}}var ea={create:ta,update:ta},na=/\s+/;function ra(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(na).forEach(function(e){return t.classList.add(e)}):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function oa(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(na).forEach(function(e){return t.classList.remove(e)}):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function ia(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&I(e,aa(t.name||"v")),I(e,t),e}return"string"==typeof t?aa(t):void 0}}var aa=w(function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}}),sa=J&&!nt,ca="transition",ua="animation",la="transition",fa="transitionend",pa="animation",da="animationend";sa&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(la="WebkitTransition",fa="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(pa="WebkitAnimation",da="webkitAnimationEnd"));var va=J?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function ha(t){va(function(){va(t)})}function ma(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),ra(t,e))}function ya(t,e){t._transitionClasses&&_(t._transitionClasses,e),oa(t,e)}function ga(t,e,n){var r=ba(t,e),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===ca?fa:da,c=0,u=function(){t.removeEventListener(s,l),n()},l=function(e){e.target===t&&++c>=a&&u()};setTimeout(function(){c<a&&u()},i+1),t.addEventListener(s,l)}var _a=/\b(transform|all)(,|$)/;function ba(t,e){var n,r=window.getComputedStyle(t),o=(r[la+"Delay"]||"").split(", "),i=(r[la+"Duration"]||"").split(", "),a=Ca(o,i),s=(r[pa+"Delay"]||"").split(", "),c=(r[pa+"Duration"]||"").split(", "),u=Ca(s,c),l=0,f=0;return e===ca?a>0&&(n=ca,l=a,f=i.length):e===ua?u>0&&(n=ua,l=u,f=c.length):f=(n=(l=Math.max(a,u))>0?a>u?ca:ua:null)?n===ca?i.length:c.length:0,{type:n,timeout:l,propCount:f,hasTransform:n===ca&&_a.test(r[la+"Property"])}}function Ca(t,e){for(;t.length<e.length;)t=t.concat(t);return Math.max.apply(null,e.map(function(e,n){return wa(e)+wa(t[n])}))}function wa(t){return 1e3*Number(t.slice(0,-1).replace(",","."))}function $a(t,e){var o=t.elm;r(o._leaveCb)&&(o._leaveCb.cancelled=!0,o._leaveCb());var i=ia(t.data.transition);if(!n(i)&&!r(o._enterCb)&&1===o.nodeType){for(var a=i.css,c=i.type,u=i.enterClass,l=i.enterToClass,f=i.enterActiveClass,p=i.appearClass,d=i.appearToClass,v=i.appearActiveClass,m=i.beforeEnter,y=i.enter,g=i.afterEnter,_=i.enterCancelled,b=i.beforeAppear,C=i.appear,w=i.afterAppear,$=i.appearCancelled,A=i.duration,x=cr,O=cr.$vnode;O&&O.parent;)x=O.context,O=O.parent;var k=!x._isMounted||!t.isRootInsert;if(!k||C||""===C){var S=k&&p?p:u,j=k&&v?v:f,E=k&&d?d:l,T=k&&b||m,I=k&&"function"==typeof C?C:y,D=k&&w||g,N=k&&$||_,L=h(s(A)?A.enter:A);0;var P=!1!==a&&!nt,M=ka(I),F=o._enterCb=R(function(){P&&(ya(o,E),ya(o,j)),F.cancelled?(P&&ya(o,S),N&&N(o)):D&&D(o),o._enterCb=null});t.data.show||Ye(t,"insert",function(){var e=o.parentNode,n=e&&e._pending&&e._pending[t.key];n&&n.tag===t.tag&&n.elm._leaveCb&&n.elm._leaveCb(),I&&I(o,F)}),T&&T(o),P&&(ma(o,S),ma(o,j),ha(function(){ya(o,S),F.cancelled||(ma(o,E),M||(Oa(L)?setTimeout(F,L):ga(o,c,F)))})),t.data.show&&(e&&e(),I&&I(o,F)),P||M||F()}}}function Aa(t,e){var o=t.elm;r(o._enterCb)&&(o._enterCb.cancelled=!0,o._enterCb());var i=ia(t.data.transition);if(n(i)||1!==o.nodeType)return e();if(!r(o._leaveCb)){var a=i.css,c=i.type,u=i.leaveClass,l=i.leaveToClass,f=i.leaveActiveClass,p=i.beforeLeave,d=i.leave,v=i.afterLeave,m=i.leaveCancelled,y=i.delayLeave,g=i.duration,_=!1!==a&&!nt,b=ka(d),C=h(s(g)?g.leave:g);0;var w=o._leaveCb=R(function(){o.parentNode&&o.parentNode._pending&&(o.parentNode._pending[t.key]=null),_&&(ya(o,l),ya(o,f)),w.cancelled?(_&&ya(o,u),m&&m(o)):(e(),v&&v(o)),o._leaveCb=null});y?y($):$()}function $(){w.cancelled||(!t.data.show&&o.parentNode&&((o.parentNode._pending||(o.parentNode._pending={}))[t.key]=t),p&&p(o),_&&(ma(o,u),ma(o,f),ha(function(){ya(o,u),w.cancelled||(ma(o,l),b||(Oa(C)?setTimeout(w,C):ga(o,c,w)))})),d&&d(o,w),_||b||w())}}function xa(t,e,n){"number"!=typeof t?Ct("<transition> explicit "+e+" duration is not a valid number - got "+JSON.stringify(t)+".",n.context):isNaN(t)&&Ct("<transition> explicit "+e+" duration is NaN - the duration expression might be incorrect.",n.context)}function Oa(t){return"number"==typeof t&&!isNaN(t)}function ka(t){if(n(t))return!1;var e=t.fns;return r(e)?ka(Array.isArray(e)?e[0]:e):(t._length||t.length)>1}function Sa(t,e){!0!==e.data.show&&$a(e)}var ja=J?{create:Sa,activate:Sa,remove:function(t,e){!0!==t.data.show?Aa(t,e):e()}}:{},Ea=[xi,Si,Fi,zi,ea,ja],Ta=Ea.concat(Ci),Ia=di({nodeOps:ii,modules:Ta});nt&&document.addEventListener("selectionchange",function(){var t=document.activeElement;t&&t.vmodel&&Ha(t,"input")});var Da={inserted:function(t,e,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?Ye(n,"postpatch",function(){Da.componentUpdated(t,e,n)}):Na(t,e,n.context),t._vOptions=[].map.call(t.options,Ma)):("textarea"===n.tag||Wo(t.type))&&(t._vModifiers=e.modifiers,e.modifiers.lazy||(t.addEventListener("compositionstart",Fa),t.addEventListener("compositionend",Ra),t.addEventListener("change",Ra),nt&&(t.vmodel=!0)))},componentUpdated:function(t,e,n){if("select"===n.tag){Na(t,e,n.context);var r=t._vOptions,o=t._vOptions=[].map.call(t.options,Ma);if(o.some(function(t,e){return!M(t,r[e])}))(t.multiple?e.value.some(function(t){return Pa(t,o)}):e.value!==e.oldValue&&Pa(e.value,o))&&Ha(t,"change")}}};function Na(t,e,n){La(t,e,n),(et||rt)&&setTimeout(function(){La(t,e,n)},0)}function La(t,e,n){var r=e.value,o=t.multiple;if(!o||Array.isArray(r)){for(var i,a,s=0,c=t.options.length;s<c;s++)if(a=t.options[s],o)i=F(r,Ma(a))>-1,a.selected!==i&&(a.selected=i);else if(M(Ma(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));o||(t.selectedIndex=-1)}}function Pa(t,e){return e.every(function(e){return!M(e,t)})}function Ma(t){return"_value"in t?t._value:t.value}function Fa(t){t.target.composing=!0}function Ra(t){t.target.composing&&(t.target.composing=!1,Ha(t.target,"input"))}function Ha(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Ua(t){return!t.componentInstance||t.data&&t.data.transition?t:Ua(t.componentInstance._vnode)}var Ba={bind:function(t,e,n){var r=e.value,o=(n=Ua(n)).data&&n.data.transition,i=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&o?(n.data.show=!0,$a(n,function(){t.style.display=i})):t.style.display=r?i:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=Ua(n)).data&&n.data.transition?(n.data.show=!0,r?$a(n,function(){t.style.display=t.__vOriginalDisplay}):Aa(n,function(){t.style.display="none"})):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,o){o||(t.style.display=t.__vOriginalDisplay)}},za={model:Da,show:Ba},Va={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Wa(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?Wa(er(e.children)):t}function qa(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var o=n._parentListeners;for(var i in o)e[A(i)]=o[i];return e}function Ka(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}function Xa(t){for(;t=t.parent;)if(t.data.transition)return!0}function Ga(t,e){return e.key===t.key&&e.tag===t.tag}var Za=function(t){return t.tag||tr(t)},Ja=function(t){return"show"===t.name},Qa={name:"transition",props:Va,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(Za)).length){0;var r=this.mode;0;var o=n[0];if(Xa(this.$vnode))return o;var i=Wa(o);if(!i)return o;if(this._leaving)return Ka(t,o);var s="__transition-"+this._uid+"-";i.key=null==i.key?i.isComment?s+"comment":s+i.tag:a(i.key)?0===String(i.key).indexOf(s)?i.key:s+i.key:i.key;var c=(i.data||(i.data={})).transition=qa(this),u=this._vnode,l=Wa(u);if(i.data.directives&&i.data.directives.some(Ja)&&(i.data.show=!0),l&&l.data&&!Ga(i,l)&&!tr(l)&&(!l.componentInstance||!l.componentInstance._vnode.isComment)){var f=l.data.transition=I({},c);if("out-in"===r)return this._leaving=!0,Ye(f,"afterLeave",function(){e._leaving=!1,e.$forceUpdate()}),Ka(t,o);if("in-out"===r){if(tr(i))return u;var p,d=function(){p()};Ye(c,"afterEnter",d),Ye(c,"enterCancelled",d),Ye(f,"delayLeave",function(t){p=t})}}return o}}},Ya=I({tag:String,moveClass:String},Va);delete Ya.mode;var ts={props:Ya,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var o=lr(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,o(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],a=qa(this),s=0;s<o.length;s++){var c=o[s];if(c.tag)if(null!=c.key&&0!==String(c.key).indexOf("__vlist"))i.push(c),n[c.key]=c,(c.data||(c.data={})).transition=a;else;}if(r){for(var u=[],l=[],f=0;f<r.length;f++){var p=r[f];p.data.transition=a,p.data.pos=p.elm.getBoundingClientRect(),n[p.key]?u.push(p):l.push(p)}this.kept=t(e,null,u),this.removed=l}return t(e,null,i)},updated:function(){var t=this.prevChildren,e=this.moveClass||(this.name||"v")+"-move";t.length&&this.hasMove(t[0].elm,e)&&(t.forEach(es),t.forEach(ns),t.forEach(rs),this._reflow=document.body.offsetHeight,t.forEach(function(t){if(t.data.moved){var n=t.elm,r=n.style;ma(n,e),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(fa,n._moveCb=function t(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(fa,t),n._moveCb=null,ya(n,e))})}}))},methods:{hasMove:function(t,e){if(!sa)return!1;if(this._hasMove)return this._hasMove;var n=t.cloneNode();t._transitionClasses&&t._transitionClasses.forEach(function(t){oa(n,t)}),ra(n,e),n.style.display="none",this.$el.appendChild(n);var r=ba(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}};function es(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function ns(t){t.data.newPos=t.elm.getBoundingClientRect()}function rs(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,o=e.top-n.top;if(r||o){t.data.moved=!0;var i=t.elm.style;i.transform=i.WebkitTransform="translate("+r+"px,"+o+"px)",i.transitionDuration="0s"}}var os={Transition:Qa,TransitionGroup:ts};oo.config.mustUseProp=wo,oo.config.isReservedTag=Uo,oo.config.isReservedAttr=bo,oo.config.getTagNamespace=Bo,oo.config.isUnknownElement=Vo,I(oo.options.directives,za),I(oo.options.components,os),oo.prototype.__patch__=J?Ia:N,oo.prototype.$mount=function(t,e){return dr(this,t=t&&J?qo(t):void 0,e)},J&&setTimeout(function(){z.devtools&&dt&&dt.emit("init",oo)},0);var is=oo;exports.default=is;
 4 | },{}],"xx9v":[function(require,module,exports) {
 5 | module.exports="Crested_Ibis.61dac377.jpg";
 6 | },{}],"Js2s":[function(require,module,exports) {
 7 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0,require("./assets/Crested_Ibis.jpg");var e={name:"App",data:function(){return{loading:!1}},methods:{}};exports.default=e;
 8 | (function(){var t=exports.default||module.exports;"function"==typeof t&&(t=t.options),Object.assign(t,{render:function(){var t=this.$createElement,e=this._self._c||t;return e("div",{attrs:{id:"app"}},[e("h1",[this._v("Image Draw")]),this._v(" "),e("ImagePainter",{staticClass:"image-painter",attrs:{src:require("./assets/Crested_Ibis.jpg")}},[e("p",{staticClass:"loading-text"},[this._v("图片加载中...")])])],1)},staticRenderFns:[],_compiled:!0,_scopeId:null,functional:void 0});})();
 9 | },{"./assets/Crested_Ibis.jpg":"xx9v"}],"EHrm":[function(require,module,exports) {
10 | module.exports={name:"vue-image-painter",version:"0.1.3",description:"Image draw animation effect plugin for Vue 2.x | 图像动态绘制效果",author:"komo <ko.momo@qq.com>",license:"MIT",private:!1,repository:{type:"git",url:"https://github.com/komomoo/vue-image-painter"},keywords:["vue","image-drawer","image-painter","img-paint"],main:"dist/vue-image-painter.min.js",module:"dist/vue-image-painter.esm.min.js",scripts:{dev:"parcel demo/index.html -p 8080 --out-dir demo/dev","build:demo":"rm -rf demo/dist/ && parcel build demo/index.html --out-dir demo/dist --public-url ./",build:"dio",lint:"eslint --fix --ext .js,.ts,.vue .",release:"sh scripts/release.sh"},eslintConfig:{extends:["@momoko/vue"]},eslintIgnore:["dist"],babel:{presets:["@momoko/vue"]},browserslist:["iOS >= 9","Android >= 4.4","IE >= 9"],dependencies:{},devDependencies:{"@babel/core":"^7.3.3","@momoko/babel-preset-vue":"^0.2.0","@momoko/eslint-config-vue":"^1.0.2","dio-bundler":"^0.5.2",eslint:"^5.16.0","parcel-bundler":"^1.12.3","standard-version":"^4.4.0",vue:"^2.6.10","vue-hot-reload-api":"^2.3.2","vue-template-compiler":"^2.6.10"}};
11 | },{}],"KCVh":[function(require,module,exports) {
12 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=t(require("../../../package.json"));function t(e){return e&&e.__esModule?e:{default:e}}var o=e.default.name,r={methods:{c:function(e){return e?"".concat(o).concat(e):"".concat(o)}}};exports.default=r;
13 | },{"../../../package.json":"EHrm"}],"NFMf":[function(require,module,exports) {
14 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=i(require("./mixins"));function i(t){return t&&t.__esModule?t:{default:t}}var e={name:"ImagePainter",mixins:[t.default],props:{src:{type:String,default:void 0},alt:{type:String,default:void 0},animation:{type:String,default:"draw"},duration:{type:Number,default:4e3},immediate:{type:Boolean,default:!1}},data:function(){return{show:!1,imgClass:void 0}},watch:{src:function(){this.init()}},mounted:function(){this.init()},methods:{init:function(){this.$emit("loadStart"),this.immediate?this.draw():this.wait()},wait:function(){this.show=!1,this.imgClass=void 0},draw:function(){this.show=!0,this.imgClass=this.animation},loadEnd:function(){this.$emit("loadEnd"),this.immediate||this.draw()}}};exports.default=e;
15 | (function(){var e=exports.default||module.exports;"function"==typeof e&&(e=e.options),Object.assign(e,{render:function(){var e=this,s=e.$createElement,t=e._self._c||s;return t("div",{class:e.c()},[t("img",{directives:[{name:"show",rawName:"v-show",value:e.show,expression:"show"}],class:[e.c("_img"),e.imgClass],style:{animationDuration:e.duration/1e3+"s"},attrs:{src:e.src,alt:e.alt},on:{load:e.loadEnd}}),e._v(" "),e.show?e._e():e._t("default")],2)},staticRenderFns:[],_compiled:!0,_scopeId:null,functional:void 0});})();
16 | },{"./mixins":"KCVh"}],"2u/B":[function(require,module,exports) {
17 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=t(require("./ImagePainter"));function t(e){return e&&e.__esModule?e:{default:e}}e.default.install=function(t){t.component(e.default.name,e.default)};var u=e.default;exports.default=u;
18 | },{"./ImagePainter":"NFMf"}],"epB2":[function(require,module,exports) {
19 | "use strict";var e=t(require("vue")),u=t(require("./App")),r=t(require("../src"));function t(e){return e&&e.__esModule?e:{default:e}}e.default.use(r.default),e.default.config.productionTip=!0,new e.default({render:function(e){return e(u.default)}}).$mount("#app");
20 | },{"vue":"QPfz","./App":"Js2s","../src":"2u/B"}]},{},["epB2"], null)
21 | //# sourceMappingURL=main.41d0c573.js.map
22 | 


--------------------------------------------------------------------------------
/demo/dist/main.c967b235.css:
--------------------------------------------------------------------------------
1 | *{padding:0;margin:0;border:none}#app,body,html{width:100%;height:100%;overflow:hidden}#app{overflow-y:scroll;box-sizing:border-box}#app>h1{font-size:24px;padding:40px 15px 20px;color:#fa8c87}#app .image-painter{min-height:300px}#app .loading-text{font-size:12px;color:#6d7a80;text-align:center;margin:160px 0}.vue-image-painter .draw{animation-timing-function:linear;animation-fill-mode:both;animation-name:draw}.vue-image-painter .blur{animation-timing-function:linear;animation-fill-mode:both;animation-name:blur}@-moz-keyframes draw{0%{filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{filter:brightness(2) contrast(2) grayscale(1)}75%{filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}to{filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes draw{0%{filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{filter:brightness(2) contrast(2) grayscale(1)}75%{filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}to{filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-o-keyframes draw{0%{filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{filter:brightness(2) contrast(2) grayscale(1)}75%{filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}to{filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{filter:brightness(2) contrast(2) grayscale(1)}75%{filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}to{filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-moz-keyframes blur{0%{filter:blur(50px);opacity:0}10%{filter:blur(30px);opacity:.6}to{filter:blur(0);opacity:1}}@-webkit-keyframes blur{0%{filter:blur(50px);opacity:0}10%{filter:blur(30px);opacity:.6}to{filter:blur(0);opacity:1}}@-o-keyframes blur{0%{filter:blur(50px);opacity:0}10%{filter:blur(30px);opacity:.6}to{filter:blur(0);opacity:1}}@keyframes blur{0%{filter:blur(50px);opacity:0}10%{filter:blur(30px);opacity:.6}to{filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-image-painter</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <script src="./main.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/demo/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import ImagePainter from '../src' // dev
 4 | 
 5 | Vue.use(ImagePainter)
 6 | 
 7 | Vue.config.productionTip = true
 8 | 
 9 | new Vue({
10 |   render: h => h(App),
11 | }).$mount('#app')
12 | 


--------------------------------------------------------------------------------
/dist/vue-image-painter.common.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * vue-image-painter v0.1.3
  3 |  * Copyright (c) 2018-present, momoko <ko.momo@qq.com>
  4 |  * Released under the MIT License.
  5 |  */
  6 | 
  7 | 'use strict';
  8 | 
  9 | var name = "vue-image-painter";
 10 | var version = "0.1.3";
 11 | var description = "Image draw animation effect plugin for Vue 2.x | 图像动态绘制效果";
 12 | var author = "momoko <ko.momo@qq.com>";
 13 | var license = "MIT";
 14 | var repository = {
 15 | 	type: "git",
 16 | 	url: "https://github.com/wannaxiao/vue-image-painter"
 17 | };
 18 | var keywords = [
 19 | 	"vue",
 20 | 	"image-drawer",
 21 | 	"image-painter",
 22 | 	"img-paint"
 23 | ];
 24 | var main = "dist/vue-image-painter.min.js";
 25 | var module$1 = "dist/vue-image-painter.esm.min.js";
 26 | var scripts = {
 27 | 	dev: "parcel demo/index.html -p 8080 --out-dir demo/dev",
 28 | 	"build:demo": "rm -rf demo/dist/ && parcel build demo/index.html --out-dir demo/dist --public-url ./",
 29 | 	build: "dio",
 30 | 	lint: "eslint --fix --ext .js,.ts,.vue .",
 31 | 	release: "sh scripts/release.sh"
 32 | };
 33 | var eslintConfig = {
 34 | 	"extends": [
 35 | 		"@momoko/vue"
 36 | 	]
 37 | };
 38 | var eslintIgnore = [
 39 | 	"dist"
 40 | ];
 41 | var babel = {
 42 | 	presets: [
 43 | 		"@momoko/vue"
 44 | 	]
 45 | };
 46 | var browserslist = [
 47 | 	"iOS >= 9",
 48 | 	"Android >= 4.4",
 49 | 	"IE >= 9"
 50 | ];
 51 | var dependencies = {
 52 | };
 53 | var devDependencies = {
 54 | 	"@babel/core": "^7.3.3",
 55 | 	"@momoko/babel-preset-vue": "^0.2.0",
 56 | 	"@momoko/eslint-config-vue": "^1.0.2",
 57 | 	"dio-bundler": "^0.5.2",
 58 | 	eslint: "^5.16.0",
 59 | 	"parcel-bundler": "^1.12.3",
 60 | 	"standard-version": "^4.4.0",
 61 | 	vue: "^2.6.10",
 62 | 	"vue-hot-reload-api": "^2.3.2",
 63 | 	"vue-template-compiler": "^2.6.10"
 64 | };
 65 | var pkg = {
 66 | 	name: name,
 67 | 	version: version,
 68 | 	description: description,
 69 | 	author: author,
 70 | 	license: license,
 71 | 	"private": false,
 72 | 	repository: repository,
 73 | 	keywords: keywords,
 74 | 	main: main,
 75 | 	module: module$1,
 76 | 	scripts: scripts,
 77 | 	eslintConfig: eslintConfig,
 78 | 	eslintIgnore: eslintIgnore,
 79 | 	babel: babel,
 80 | 	browserslist: browserslist,
 81 | 	dependencies: dependencies,
 82 | 	devDependencies: devDependencies
 83 | };
 84 | 
 85 | var pre = pkg.name;
 86 | var mixin = {
 87 |   methods: {
 88 |     // 生成 css class
 89 |     c: function c(className) {
 90 |       return className ? "".concat(pre).concat(className) : "".concat(pre);
 91 |     }
 92 |   }
 93 | };
 94 | 
 95 | //
 96 | var script = {
 97 |   name: 'ImagePainter',
 98 |   mixins: [mixin],
 99 |   props: {
100 |     src: {
101 |       // 图片链接
102 |       type: String,
103 |       default: undefined
104 |     },
105 |     alt: {
106 |       // 图片描述
107 |       type: String,
108 |       default: undefined
109 |     },
110 |     animation: {
111 |       // 动画效果，可选：'draw'，'blur'
112 |       type: String,
113 |       default: 'draw'
114 |     },
115 |     duration: {
116 |       // 动画持续时间
117 |       type: Number,
118 |       default: 4000
119 |     },
120 |     immediate: {
121 |       // 立即显示图片和动画，而不等图片加载完
122 |       type: Boolean,
123 |       default: false
124 |     }
125 |   },
126 |   data: function data() {
127 |     return {
128 |       show: false,
129 |       imgClass: undefined // 图片样式类
130 | 
131 |     };
132 |   },
133 |   watch: {
134 |     src: function src() {
135 |       this.init();
136 |     }
137 |   },
138 |   mounted: function mounted() {
139 |     this.init();
140 |   },
141 |   methods: {
142 |     init: function init() {
143 |       this.$emit('loadStart');
144 |       this.immediate ? this.draw() : this.wait();
145 |     },
146 |     wait: function wait() {
147 |       this.show = false;
148 |       this.imgClass = undefined;
149 |     },
150 |     draw: function draw() {
151 |       this.show = true;
152 |       this.imgClass = this.animation;
153 |     },
154 |     loadEnd: function loadEnd() {
155 |       this.$emit('loadEnd');
156 |       if (!this.immediate) this.draw();
157 |     }
158 |   }
159 | };
160 | 
161 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
162 | /* server only */
163 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
164 |   if (typeof shadowMode !== 'boolean') {
165 |     createInjectorSSR = createInjector;
166 |     createInjector = shadowMode;
167 |     shadowMode = false;
168 |   } // Vue.extend constructor export interop.
169 | 
170 | 
171 |   var options = typeof script === 'function' ? script.options : script; // render functions
172 | 
173 |   if (template && template.render) {
174 |     options.render = template.render;
175 |     options.staticRenderFns = template.staticRenderFns;
176 |     options._compiled = true; // functional template
177 | 
178 |     if (isFunctionalTemplate) {
179 |       options.functional = true;
180 |     }
181 |   } // scopedId
182 | 
183 | 
184 |   if (scopeId) {
185 |     options._scopeId = scopeId;
186 |   }
187 | 
188 |   var hook;
189 | 
190 |   if (moduleIdentifier) {
191 |     // server build
192 |     hook = function hook(context) {
193 |       // 2.3 injection
194 |       context = context || // cached call
195 |       this.$vnode && this.$vnode.ssrContext || // stateful
196 |       this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
197 |       // 2.2 with runInNewContext: true
198 | 
199 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
200 |         context = __VUE_SSR_CONTEXT__;
201 |       } // inject component styles
202 | 
203 | 
204 |       if (style) {
205 |         style.call(this, createInjectorSSR(context));
206 |       } // register component module identifier for async chunk inference
207 | 
208 | 
209 |       if (context && context._registeredComponents) {
210 |         context._registeredComponents.add(moduleIdentifier);
211 |       }
212 |     }; // used by ssr in case component is cached and beforeCreate
213 |     // never gets called
214 | 
215 | 
216 |     options._ssrRegister = hook;
217 |   } else if (style) {
218 |     hook = shadowMode ? function () {
219 |       style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
220 |     } : function (context) {
221 |       style.call(this, createInjector(context));
222 |     };
223 |   }
224 | 
225 |   if (hook) {
226 |     if (options.functional) {
227 |       // register for functional component in vue file
228 |       var originalRender = options.render;
229 | 
230 |       options.render = function renderWithStyleInjection(h, context) {
231 |         hook.call(context);
232 |         return originalRender(h, context);
233 |       };
234 |     } else {
235 |       // inject component registration as beforeCreate hook
236 |       var existing = options.beforeCreate;
237 |       options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
238 |     }
239 |   }
240 | 
241 |   return script;
242 | }
243 | 
244 | var normalizeComponent_1 = normalizeComponent;
245 | 
246 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
247 | function createInjector(context) {
248 |   return function (id, style) {
249 |     return addStyle(id, style);
250 |   };
251 | }
252 | var HEAD = document.head || document.getElementsByTagName('head')[0];
253 | var styles = {};
254 | 
255 | function addStyle(id, css) {
256 |   var group = isOldIE ? css.media || 'default' : id;
257 |   var style = styles[group] || (styles[group] = {
258 |     ids: new Set(),
259 |     styles: []
260 |   });
261 | 
262 |   if (!style.ids.has(id)) {
263 |     style.ids.add(id);
264 |     var code = css.source;
265 | 
266 |     if (css.map) {
267 |       // https://developer.chrome.com/devtools/docs/javascript-debugging
268 |       // this makes source maps inside style tags work properly in Chrome
269 |       code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
270 | 
271 |       code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
272 |     }
273 | 
274 |     if (!style.element) {
275 |       style.element = document.createElement('style');
276 |       style.element.type = 'text/css';
277 |       if (css.media) style.element.setAttribute('media', css.media);
278 |       HEAD.appendChild(style.element);
279 |     }
280 | 
281 |     if ('styleSheet' in style.element) {
282 |       style.styles.push(code);
283 |       style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
284 |     } else {
285 |       var index = style.ids.size - 1;
286 |       var textNode = document.createTextNode(code);
287 |       var nodes = style.element.childNodes;
288 |       if (nodes[index]) style.element.removeChild(nodes[index]);
289 |       if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
290 |     }
291 |   }
292 | }
293 | 
294 | var browser = createInjector;
295 | 
296 | /* script */
297 | var __vue_script__ = script;
298 | /* template */
299 | 
300 | var __vue_render__ = function __vue_render__() {
301 |   var _vm = this;
302 | 
303 |   var _h = _vm.$createElement;
304 | 
305 |   var _c = _vm._self._c || _h;
306 | 
307 |   return _c('div', {
308 |     class: _vm.c()
309 |   }, [_c('img', {
310 |     directives: [{
311 |       name: "show",
312 |       rawName: "v-show",
313 |       value: _vm.show,
314 |       expression: "show"
315 |     }],
316 |     class: [_vm.c('_img'), _vm.imgClass],
317 |     style: {
318 |       'animationDuration': _vm.duration / 1000 + 's'
319 |     },
320 |     attrs: {
321 |       "src": _vm.src,
322 |       "alt": _vm.alt
323 |     },
324 |     on: {
325 |       "load": _vm.loadEnd
326 |     }
327 |   }), _vm._v(" "), !_vm.show ? _vm._t("default") : _vm._e()], 2);
328 | };
329 | 
330 | var __vue_staticRenderFns__ = [];
331 | /* style */
332 | 
333 | var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
334 |   if (!inject) return;
335 |   inject("data-v-684a6a03_0", {
336 |     source: ".vue-image-painter .draw{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:draw;animation-name:draw}.vue-image-painter .blur{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:blur;animation-name:blur}@-webkit-keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}",
337 |     map: undefined,
338 |     media: undefined
339 |   });
340 | };
341 | /* scoped */
342 | 
343 | 
344 | var __vue_scope_id__ = undefined;
345 | /* module identifier */
346 | 
347 | var __vue_module_identifier__ = undefined;
348 | /* functional template */
349 | 
350 | var __vue_is_functional_template__ = false;
351 | /* style inject SSR */
352 | 
353 | var ImagePainter = normalizeComponent_1({
354 |   render: __vue_render__,
355 |   staticRenderFns: __vue_staticRenderFns__
356 | }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, browser, undefined);
357 | 
358 | ImagePainter.install = function (Vue) {
359 |   Vue.component(ImagePainter.name, ImagePainter);
360 | };
361 | 
362 | module.exports = ImagePainter;
363 | 


--------------------------------------------------------------------------------
/dist/vue-image-painter.common.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue-image-painter v0.1.3
3 |  * Copyright (c) 2018-present, momoko <ko.momo@qq.com>
4 |  * Released under the MIT License.
5 |  */
6 | 
7 | "use strict";var t="vue-image-painter",e={name:"ImagePainter",mixins:[{methods:{c:function(e){return e?"".concat(t).concat(e):"".concat(t)}}}],props:{src:{type:String,default:void 0},alt:{type:String,default:void 0},animation:{type:String,default:"draw"},duration:{type:Number,default:4e3},immediate:{type:Boolean,default:!1}},data:function(){return{show:!1,imgClass:void 0}},watch:{src:function(){this.init()}},mounted:function(){this.init()},methods:{init:function(){this.$emit("loadStart"),this.immediate?this.draw():this.wait()},wait:function(){this.show=!1,this.imgClass=void 0},draw:function(){this.show=!0,this.imgClass=this.animation},loadEnd:function(){this.$emit("loadEnd"),this.immediate||this.draw()}}};var i=function(t,e,i,a,n,r,s,o,l,c){"boolean"!=typeof s&&(l=o,o=s,s=!1);var d,m="function"==typeof i?i.options:i;if(t&&t.render&&(m.render=t.render,m.staticRenderFns=t.staticRenderFns,m._compiled=!0,n&&(m.functional=!0)),a&&(m._scopeId=a),r?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},m._ssrRegister=d):e&&(d=s?function(){e.call(this,c(this.$root.$options.shadowRoot))}:function(t){e.call(this,o(t))}),d)if(m.functional){var f=m.render;m.render=function(t,e){return d.call(e),f(t,e)}}else{var u=m.beforeCreate;m.beforeCreate=u?[].concat(u,d):[d]}return i},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n=document.head||document.getElementsByTagName("head")[0],r={};var s=i({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:t.c()},[i("img",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:[t.c("_img"),t.imgClass],style:{animationDuration:t.duration/1e3+"s"},attrs:{src:t.src,alt:t.alt},on:{load:t.loadEnd}}),t._v(" "),t.show?t._e():t._t("default")],2)},staticRenderFns:[]},function(t){t&&t("data-v-684a6a03_0",{source:".vue-image-painter .draw{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:draw;animation-name:draw}.vue-image-painter .blur{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:blur;animation-name:blur}@-webkit-keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}",map:void 0,media:void 0})},e,void 0,!1,void 0,function(t){return function(t,e){return function(t,e){var i=a?e.media||"default":t,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",e.media&&s.element.setAttribute("media",e.media),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,c=document.createTextNode(o),d=s.element.childNodes;d[l]&&s.element.removeChild(d[l]),d.length?s.element.insertBefore(c,d[l]):s.element.appendChild(c)}}}(t,e)}},void 0);s.install=function(t){t.component(s.name,s)},module.exports=s;


--------------------------------------------------------------------------------
/dist/vue-image-painter.esm.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * vue-image-painter v0.1.3
  3 |  * Copyright (c) 2018-present, momoko <ko.momo@qq.com>
  4 |  * Released under the MIT License.
  5 |  */
  6 | 
  7 | var name = "vue-image-painter";
  8 | var version = "0.1.3";
  9 | var description = "Image draw animation effect plugin for Vue 2.x | 图像动态绘制效果";
 10 | var author = "momoko <ko.momo@qq.com>";
 11 | var license = "MIT";
 12 | var repository = {
 13 | 	type: "git",
 14 | 	url: "https://github.com/wannaxiao/vue-image-painter"
 15 | };
 16 | var keywords = [
 17 | 	"vue",
 18 | 	"image-drawer",
 19 | 	"image-painter",
 20 | 	"img-paint"
 21 | ];
 22 | var main = "dist/vue-image-painter.min.js";
 23 | var module = "dist/vue-image-painter.esm.min.js";
 24 | var scripts = {
 25 | 	dev: "parcel demo/index.html -p 8080 --out-dir demo/dev",
 26 | 	"build:demo": "rm -rf demo/dist/ && parcel build demo/index.html --out-dir demo/dist --public-url ./",
 27 | 	build: "dio",
 28 | 	lint: "eslint --fix --ext .js,.ts,.vue .",
 29 | 	release: "sh scripts/release.sh"
 30 | };
 31 | var eslintConfig = {
 32 | 	"extends": [
 33 | 		"@momoko/vue"
 34 | 	]
 35 | };
 36 | var eslintIgnore = [
 37 | 	"dist"
 38 | ];
 39 | var babel = {
 40 | 	presets: [
 41 | 		"@momoko/vue"
 42 | 	]
 43 | };
 44 | var browserslist = [
 45 | 	"iOS >= 9",
 46 | 	"Android >= 4.4",
 47 | 	"IE >= 9"
 48 | ];
 49 | var dependencies = {
 50 | };
 51 | var devDependencies = {
 52 | 	"@babel/core": "^7.3.3",
 53 | 	"@momoko/babel-preset-vue": "^0.2.0",
 54 | 	"@momoko/eslint-config-vue": "^1.0.2",
 55 | 	"dio-bundler": "^0.5.2",
 56 | 	eslint: "^5.16.0",
 57 | 	"parcel-bundler": "^1.12.3",
 58 | 	"standard-version": "^4.4.0",
 59 | 	vue: "^2.6.10",
 60 | 	"vue-hot-reload-api": "^2.3.2",
 61 | 	"vue-template-compiler": "^2.6.10"
 62 | };
 63 | var pkg = {
 64 | 	name: name,
 65 | 	version: version,
 66 | 	description: description,
 67 | 	author: author,
 68 | 	license: license,
 69 | 	"private": false,
 70 | 	repository: repository,
 71 | 	keywords: keywords,
 72 | 	main: main,
 73 | 	module: module,
 74 | 	scripts: scripts,
 75 | 	eslintConfig: eslintConfig,
 76 | 	eslintIgnore: eslintIgnore,
 77 | 	babel: babel,
 78 | 	browserslist: browserslist,
 79 | 	dependencies: dependencies,
 80 | 	devDependencies: devDependencies
 81 | };
 82 | 
 83 | var pre = pkg.name;
 84 | var mixin = {
 85 |   methods: {
 86 |     // 生成 css class
 87 |     c: function c(className) {
 88 |       return className ? "".concat(pre).concat(className) : "".concat(pre);
 89 |     }
 90 |   }
 91 | };
 92 | 
 93 | //
 94 | var script = {
 95 |   name: 'ImagePainter',
 96 |   mixins: [mixin],
 97 |   props: {
 98 |     src: {
 99 |       // 图片链接
100 |       type: String,
101 |       default: undefined
102 |     },
103 |     alt: {
104 |       // 图片描述
105 |       type: String,
106 |       default: undefined
107 |     },
108 |     animation: {
109 |       // 动画效果，可选：'draw'，'blur'
110 |       type: String,
111 |       default: 'draw'
112 |     },
113 |     duration: {
114 |       // 动画持续时间
115 |       type: Number,
116 |       default: 4000
117 |     },
118 |     immediate: {
119 |       // 立即显示图片和动画，而不等图片加载完
120 |       type: Boolean,
121 |       default: false
122 |     }
123 |   },
124 |   data: function data() {
125 |     return {
126 |       show: false,
127 |       imgClass: undefined // 图片样式类
128 | 
129 |     };
130 |   },
131 |   watch: {
132 |     src: function src() {
133 |       this.init();
134 |     }
135 |   },
136 |   mounted: function mounted() {
137 |     this.init();
138 |   },
139 |   methods: {
140 |     init: function init() {
141 |       this.$emit('loadStart');
142 |       this.immediate ? this.draw() : this.wait();
143 |     },
144 |     wait: function wait() {
145 |       this.show = false;
146 |       this.imgClass = undefined;
147 |     },
148 |     draw: function draw() {
149 |       this.show = true;
150 |       this.imgClass = this.animation;
151 |     },
152 |     loadEnd: function loadEnd() {
153 |       this.$emit('loadEnd');
154 |       if (!this.immediate) this.draw();
155 |     }
156 |   }
157 | };
158 | 
159 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
160 | /* server only */
161 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
162 |   if (typeof shadowMode !== 'boolean') {
163 |     createInjectorSSR = createInjector;
164 |     createInjector = shadowMode;
165 |     shadowMode = false;
166 |   } // Vue.extend constructor export interop.
167 | 
168 | 
169 |   var options = typeof script === 'function' ? script.options : script; // render functions
170 | 
171 |   if (template && template.render) {
172 |     options.render = template.render;
173 |     options.staticRenderFns = template.staticRenderFns;
174 |     options._compiled = true; // functional template
175 | 
176 |     if (isFunctionalTemplate) {
177 |       options.functional = true;
178 |     }
179 |   } // scopedId
180 | 
181 | 
182 |   if (scopeId) {
183 |     options._scopeId = scopeId;
184 |   }
185 | 
186 |   var hook;
187 | 
188 |   if (moduleIdentifier) {
189 |     // server build
190 |     hook = function hook(context) {
191 |       // 2.3 injection
192 |       context = context || // cached call
193 |       this.$vnode && this.$vnode.ssrContext || // stateful
194 |       this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
195 |       // 2.2 with runInNewContext: true
196 | 
197 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
198 |         context = __VUE_SSR_CONTEXT__;
199 |       } // inject component styles
200 | 
201 | 
202 |       if (style) {
203 |         style.call(this, createInjectorSSR(context));
204 |       } // register component module identifier for async chunk inference
205 | 
206 | 
207 |       if (context && context._registeredComponents) {
208 |         context._registeredComponents.add(moduleIdentifier);
209 |       }
210 |     }; // used by ssr in case component is cached and beforeCreate
211 |     // never gets called
212 | 
213 | 
214 |     options._ssrRegister = hook;
215 |   } else if (style) {
216 |     hook = shadowMode ? function () {
217 |       style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
218 |     } : function (context) {
219 |       style.call(this, createInjector(context));
220 |     };
221 |   }
222 | 
223 |   if (hook) {
224 |     if (options.functional) {
225 |       // register for functional component in vue file
226 |       var originalRender = options.render;
227 | 
228 |       options.render = function renderWithStyleInjection(h, context) {
229 |         hook.call(context);
230 |         return originalRender(h, context);
231 |       };
232 |     } else {
233 |       // inject component registration as beforeCreate hook
234 |       var existing = options.beforeCreate;
235 |       options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
236 |     }
237 |   }
238 | 
239 |   return script;
240 | }
241 | 
242 | var normalizeComponent_1 = normalizeComponent;
243 | 
244 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
245 | function createInjector(context) {
246 |   return function (id, style) {
247 |     return addStyle(id, style);
248 |   };
249 | }
250 | var HEAD = document.head || document.getElementsByTagName('head')[0];
251 | var styles = {};
252 | 
253 | function addStyle(id, css) {
254 |   var group = isOldIE ? css.media || 'default' : id;
255 |   var style = styles[group] || (styles[group] = {
256 |     ids: new Set(),
257 |     styles: []
258 |   });
259 | 
260 |   if (!style.ids.has(id)) {
261 |     style.ids.add(id);
262 |     var code = css.source;
263 | 
264 |     if (css.map) {
265 |       // https://developer.chrome.com/devtools/docs/javascript-debugging
266 |       // this makes source maps inside style tags work properly in Chrome
267 |       code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
268 | 
269 |       code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
270 |     }
271 | 
272 |     if (!style.element) {
273 |       style.element = document.createElement('style');
274 |       style.element.type = 'text/css';
275 |       if (css.media) style.element.setAttribute('media', css.media);
276 |       HEAD.appendChild(style.element);
277 |     }
278 | 
279 |     if ('styleSheet' in style.element) {
280 |       style.styles.push(code);
281 |       style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
282 |     } else {
283 |       var index = style.ids.size - 1;
284 |       var textNode = document.createTextNode(code);
285 |       var nodes = style.element.childNodes;
286 |       if (nodes[index]) style.element.removeChild(nodes[index]);
287 |       if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
288 |     }
289 |   }
290 | }
291 | 
292 | var browser = createInjector;
293 | 
294 | /* script */
295 | var __vue_script__ = script;
296 | /* template */
297 | 
298 | var __vue_render__ = function __vue_render__() {
299 |   var _vm = this;
300 | 
301 |   var _h = _vm.$createElement;
302 | 
303 |   var _c = _vm._self._c || _h;
304 | 
305 |   return _c('div', {
306 |     class: _vm.c()
307 |   }, [_c('img', {
308 |     directives: [{
309 |       name: "show",
310 |       rawName: "v-show",
311 |       value: _vm.show,
312 |       expression: "show"
313 |     }],
314 |     class: [_vm.c('_img'), _vm.imgClass],
315 |     style: {
316 |       'animationDuration': _vm.duration / 1000 + 's'
317 |     },
318 |     attrs: {
319 |       "src": _vm.src,
320 |       "alt": _vm.alt
321 |     },
322 |     on: {
323 |       "load": _vm.loadEnd
324 |     }
325 |   }), _vm._v(" "), !_vm.show ? _vm._t("default") : _vm._e()], 2);
326 | };
327 | 
328 | var __vue_staticRenderFns__ = [];
329 | /* style */
330 | 
331 | var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
332 |   if (!inject) return;
333 |   inject("data-v-684a6a03_0", {
334 |     source: ".vue-image-painter .draw{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:draw;animation-name:draw}.vue-image-painter .blur{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:blur;animation-name:blur}@-webkit-keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}",
335 |     map: undefined,
336 |     media: undefined
337 |   });
338 | };
339 | /* scoped */
340 | 
341 | 
342 | var __vue_scope_id__ = undefined;
343 | /* module identifier */
344 | 
345 | var __vue_module_identifier__ = undefined;
346 | /* functional template */
347 | 
348 | var __vue_is_functional_template__ = false;
349 | /* style inject SSR */
350 | 
351 | var ImagePainter = normalizeComponent_1({
352 |   render: __vue_render__,
353 |   staticRenderFns: __vue_staticRenderFns__
354 | }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, browser, undefined);
355 | 
356 | ImagePainter.install = function (Vue) {
357 |   Vue.component(ImagePainter.name, ImagePainter);
358 | };
359 | 
360 | export default ImagePainter;
361 | 


--------------------------------------------------------------------------------
/dist/vue-image-painter.esm.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue-image-painter v0.1.3
3 |  * Copyright (c) 2018-present, momoko <ko.momo@qq.com>
4 |  * Released under the MIT License.
5 |  */
6 | 
7 | var t="vue-image-painter",e={name:"ImagePainter",mixins:[{methods:{c:function(e){return e?"".concat(t).concat(e):"".concat(t)}}}],props:{src:{type:String,default:void 0},alt:{type:String,default:void 0},animation:{type:String,default:"draw"},duration:{type:Number,default:4e3},immediate:{type:Boolean,default:!1}},data:function(){return{show:!1,imgClass:void 0}},watch:{src:function(){this.init()}},mounted:function(){this.init()},methods:{init:function(){this.$emit("loadStart"),this.immediate?this.draw():this.wait()},wait:function(){this.show=!1,this.imgClass=void 0},draw:function(){this.show=!0,this.imgClass=this.animation},loadEnd:function(){this.$emit("loadEnd"),this.immediate||this.draw()}}};var i=function(t,e,i,a,n,r,s,o,l,c){"boolean"!=typeof s&&(l=o,o=s,s=!1);var d,m="function"==typeof i?i.options:i;if(t&&t.render&&(m.render=t.render,m.staticRenderFns=t.staticRenderFns,m._compiled=!0,n&&(m.functional=!0)),a&&(m._scopeId=a),r?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},m._ssrRegister=d):e&&(d=s?function(){e.call(this,c(this.$root.$options.shadowRoot))}:function(t){e.call(this,o(t))}),d)if(m.functional){var f=m.render;m.render=function(t,e){return d.call(e),f(t,e)}}else{var u=m.beforeCreate;m.beforeCreate=u?[].concat(u,d):[d]}return i},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var n=document.head||document.getElementsByTagName("head")[0],r={};var s=i({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:t.c()},[i("img",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:[t.c("_img"),t.imgClass],style:{animationDuration:t.duration/1e3+"s"},attrs:{src:t.src,alt:t.alt},on:{load:t.loadEnd}}),t._v(" "),t.show?t._e():t._t("default")],2)},staticRenderFns:[]},function(t){t&&t("data-v-684a6a03_0",{source:".vue-image-painter .draw{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:draw;animation-name:draw}.vue-image-painter .blur{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:blur;animation-name:blur}@-webkit-keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}",map:void 0,media:void 0})},e,void 0,!1,void 0,function(t){return function(t,e){return function(t,e){var i=a?e.media||"default":t,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",e.media&&s.element.setAttribute("media",e.media),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,c=document.createTextNode(o),d=s.element.childNodes;d[l]&&s.element.removeChild(d[l]),d.length?s.element.insertBefore(c,d[l]):s.element.appendChild(c)}}}(t,e)}},void 0);s.install=function(t){t.component(s.name,s)};export default s;


--------------------------------------------------------------------------------
/dist/vue-image-painter.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * vue-image-painter v0.1.3
  3 |  * Copyright (c) 2018-present, momoko <ko.momo@qq.com>
  4 |  * Released under the MIT License.
  5 |  */
  6 | 
  7 | (function (global, factory) {
  8 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  9 |   typeof define === 'function' && define.amd ? define(factory) :
 10 |   (global = global || self, global['vue-image-painter'] = factory());
 11 | }(this, function () { 'use strict';
 12 | 
 13 |   var name = "vue-image-painter";
 14 |   var version = "0.1.3";
 15 |   var description = "Image draw animation effect plugin for Vue 2.x | 图像动态绘制效果";
 16 |   var author = "momoko <ko.momo@qq.com>";
 17 |   var license = "MIT";
 18 |   var repository = {
 19 |   	type: "git",
 20 |   	url: "https://github.com/wannaxiao/vue-image-painter"
 21 |   };
 22 |   var keywords = [
 23 |   	"vue",
 24 |   	"image-drawer",
 25 |   	"image-painter",
 26 |   	"img-paint"
 27 |   ];
 28 |   var main = "dist/vue-image-painter.min.js";
 29 |   var module = "dist/vue-image-painter.esm.min.js";
 30 |   var scripts = {
 31 |   	dev: "parcel demo/index.html -p 8080 --out-dir demo/dev",
 32 |   	"build:demo": "rm -rf demo/dist/ && parcel build demo/index.html --out-dir demo/dist --public-url ./",
 33 |   	build: "dio",
 34 |   	lint: "eslint --fix --ext .js,.ts,.vue .",
 35 |   	release: "sh scripts/release.sh"
 36 |   };
 37 |   var eslintConfig = {
 38 |   	"extends": [
 39 |   		"@momoko/vue"
 40 |   	]
 41 |   };
 42 |   var eslintIgnore = [
 43 |   	"dist"
 44 |   ];
 45 |   var babel = {
 46 |   	presets: [
 47 |   		"@momoko/vue"
 48 |   	]
 49 |   };
 50 |   var browserslist = [
 51 |   	"iOS >= 9",
 52 |   	"Android >= 4.4",
 53 |   	"IE >= 9"
 54 |   ];
 55 |   var dependencies = {
 56 |   };
 57 |   var devDependencies = {
 58 |   	"@babel/core": "^7.3.3",
 59 |   	"@momoko/babel-preset-vue": "^0.2.0",
 60 |   	"@momoko/eslint-config-vue": "^1.0.2",
 61 |   	"dio-bundler": "^0.5.2",
 62 |   	eslint: "^5.16.0",
 63 |   	"parcel-bundler": "^1.12.3",
 64 |   	"standard-version": "^4.4.0",
 65 |   	vue: "^2.6.10",
 66 |   	"vue-hot-reload-api": "^2.3.2",
 67 |   	"vue-template-compiler": "^2.6.10"
 68 |   };
 69 |   var pkg = {
 70 |   	name: name,
 71 |   	version: version,
 72 |   	description: description,
 73 |   	author: author,
 74 |   	license: license,
 75 |   	"private": false,
 76 |   	repository: repository,
 77 |   	keywords: keywords,
 78 |   	main: main,
 79 |   	module: module,
 80 |   	scripts: scripts,
 81 |   	eslintConfig: eslintConfig,
 82 |   	eslintIgnore: eslintIgnore,
 83 |   	babel: babel,
 84 |   	browserslist: browserslist,
 85 |   	dependencies: dependencies,
 86 |   	devDependencies: devDependencies
 87 |   };
 88 | 
 89 |   var pre = pkg.name;
 90 |   var mixin = {
 91 |     methods: {
 92 |       // 生成 css class
 93 |       c: function c(className) {
 94 |         return className ? "".concat(pre).concat(className) : "".concat(pre);
 95 |       }
 96 |     }
 97 |   };
 98 | 
 99 |   //
100 |   var script = {
101 |     name: 'ImagePainter',
102 |     mixins: [mixin],
103 |     props: {
104 |       src: {
105 |         // 图片链接
106 |         type: String,
107 |         default: undefined
108 |       },
109 |       alt: {
110 |         // 图片描述
111 |         type: String,
112 |         default: undefined
113 |       },
114 |       animation: {
115 |         // 动画效果，可选：'draw'，'blur'
116 |         type: String,
117 |         default: 'draw'
118 |       },
119 |       duration: {
120 |         // 动画持续时间
121 |         type: Number,
122 |         default: 4000
123 |       },
124 |       immediate: {
125 |         // 立即显示图片和动画，而不等图片加载完
126 |         type: Boolean,
127 |         default: false
128 |       }
129 |     },
130 |     data: function data() {
131 |       return {
132 |         show: false,
133 |         imgClass: undefined // 图片样式类
134 | 
135 |       };
136 |     },
137 |     watch: {
138 |       src: function src() {
139 |         this.init();
140 |       }
141 |     },
142 |     mounted: function mounted() {
143 |       this.init();
144 |     },
145 |     methods: {
146 |       init: function init() {
147 |         this.$emit('loadStart');
148 |         this.immediate ? this.draw() : this.wait();
149 |       },
150 |       wait: function wait() {
151 |         this.show = false;
152 |         this.imgClass = undefined;
153 |       },
154 |       draw: function draw() {
155 |         this.show = true;
156 |         this.imgClass = this.animation;
157 |       },
158 |       loadEnd: function loadEnd() {
159 |         this.$emit('loadEnd');
160 |         if (!this.immediate) this.draw();
161 |       }
162 |     }
163 |   };
164 | 
165 |   function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
166 |   /* server only */
167 |   , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
168 |     if (typeof shadowMode !== 'boolean') {
169 |       createInjectorSSR = createInjector;
170 |       createInjector = shadowMode;
171 |       shadowMode = false;
172 |     } // Vue.extend constructor export interop.
173 | 
174 | 
175 |     var options = typeof script === 'function' ? script.options : script; // render functions
176 | 
177 |     if (template && template.render) {
178 |       options.render = template.render;
179 |       options.staticRenderFns = template.staticRenderFns;
180 |       options._compiled = true; // functional template
181 | 
182 |       if (isFunctionalTemplate) {
183 |         options.functional = true;
184 |       }
185 |     } // scopedId
186 | 
187 | 
188 |     if (scopeId) {
189 |       options._scopeId = scopeId;
190 |     }
191 | 
192 |     var hook;
193 | 
194 |     if (moduleIdentifier) {
195 |       // server build
196 |       hook = function hook(context) {
197 |         // 2.3 injection
198 |         context = context || // cached call
199 |         this.$vnode && this.$vnode.ssrContext || // stateful
200 |         this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
201 |         // 2.2 with runInNewContext: true
202 | 
203 |         if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
204 |           context = __VUE_SSR_CONTEXT__;
205 |         } // inject component styles
206 | 
207 | 
208 |         if (style) {
209 |           style.call(this, createInjectorSSR(context));
210 |         } // register component module identifier for async chunk inference
211 | 
212 | 
213 |         if (context && context._registeredComponents) {
214 |           context._registeredComponents.add(moduleIdentifier);
215 |         }
216 |       }; // used by ssr in case component is cached and beforeCreate
217 |       // never gets called
218 | 
219 | 
220 |       options._ssrRegister = hook;
221 |     } else if (style) {
222 |       hook = shadowMode ? function () {
223 |         style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
224 |       } : function (context) {
225 |         style.call(this, createInjector(context));
226 |       };
227 |     }
228 | 
229 |     if (hook) {
230 |       if (options.functional) {
231 |         // register for functional component in vue file
232 |         var originalRender = options.render;
233 | 
234 |         options.render = function renderWithStyleInjection(h, context) {
235 |           hook.call(context);
236 |           return originalRender(h, context);
237 |         };
238 |       } else {
239 |         // inject component registration as beforeCreate hook
240 |         var existing = options.beforeCreate;
241 |         options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
242 |       }
243 |     }
244 | 
245 |     return script;
246 |   }
247 | 
248 |   var normalizeComponent_1 = normalizeComponent;
249 | 
250 |   var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
251 |   function createInjector(context) {
252 |     return function (id, style) {
253 |       return addStyle(id, style);
254 |     };
255 |   }
256 |   var HEAD = document.head || document.getElementsByTagName('head')[0];
257 |   var styles = {};
258 | 
259 |   function addStyle(id, css) {
260 |     var group = isOldIE ? css.media || 'default' : id;
261 |     var style = styles[group] || (styles[group] = {
262 |       ids: new Set(),
263 |       styles: []
264 |     });
265 | 
266 |     if (!style.ids.has(id)) {
267 |       style.ids.add(id);
268 |       var code = css.source;
269 | 
270 |       if (css.map) {
271 |         // https://developer.chrome.com/devtools/docs/javascript-debugging
272 |         // this makes source maps inside style tags work properly in Chrome
273 |         code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
274 | 
275 |         code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
276 |       }
277 | 
278 |       if (!style.element) {
279 |         style.element = document.createElement('style');
280 |         style.element.type = 'text/css';
281 |         if (css.media) style.element.setAttribute('media', css.media);
282 |         HEAD.appendChild(style.element);
283 |       }
284 | 
285 |       if ('styleSheet' in style.element) {
286 |         style.styles.push(code);
287 |         style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
288 |       } else {
289 |         var index = style.ids.size - 1;
290 |         var textNode = document.createTextNode(code);
291 |         var nodes = style.element.childNodes;
292 |         if (nodes[index]) style.element.removeChild(nodes[index]);
293 |         if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
294 |       }
295 |     }
296 |   }
297 | 
298 |   var browser = createInjector;
299 | 
300 |   /* script */
301 |   var __vue_script__ = script;
302 |   /* template */
303 | 
304 |   var __vue_render__ = function __vue_render__() {
305 |     var _vm = this;
306 | 
307 |     var _h = _vm.$createElement;
308 | 
309 |     var _c = _vm._self._c || _h;
310 | 
311 |     return _c('div', {
312 |       class: _vm.c()
313 |     }, [_c('img', {
314 |       directives: [{
315 |         name: "show",
316 |         rawName: "v-show",
317 |         value: _vm.show,
318 |         expression: "show"
319 |       }],
320 |       class: [_vm.c('_img'), _vm.imgClass],
321 |       style: {
322 |         'animationDuration': _vm.duration / 1000 + 's'
323 |       },
324 |       attrs: {
325 |         "src": _vm.src,
326 |         "alt": _vm.alt
327 |       },
328 |       on: {
329 |         "load": _vm.loadEnd
330 |       }
331 |     }), _vm._v(" "), !_vm.show ? _vm._t("default") : _vm._e()], 2);
332 |   };
333 | 
334 |   var __vue_staticRenderFns__ = [];
335 |   /* style */
336 | 
337 |   var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
338 |     if (!inject) return;
339 |     inject("data-v-684a6a03_0", {
340 |       source: ".vue-image-painter .draw{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:draw;animation-name:draw}.vue-image-painter .blur{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:blur;animation-name:blur}@-webkit-keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}",
341 |       map: undefined,
342 |       media: undefined
343 |     });
344 |   };
345 |   /* scoped */
346 | 
347 | 
348 |   var __vue_scope_id__ = undefined;
349 |   /* module identifier */
350 | 
351 |   var __vue_module_identifier__ = undefined;
352 |   /* functional template */
353 | 
354 |   var __vue_is_functional_template__ = false;
355 |   /* style inject SSR */
356 | 
357 |   var ImagePainter = normalizeComponent_1({
358 |     render: __vue_render__,
359 |     staticRenderFns: __vue_staticRenderFns__
360 |   }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, browser, undefined);
361 | 
362 |   ImagePainter.install = function (Vue) {
363 |     Vue.component(ImagePainter.name, ImagePainter);
364 |   };
365 | 
366 |   return ImagePainter;
367 | 
368 | }));
369 | 


--------------------------------------------------------------------------------
/dist/vue-image-painter.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * vue-image-painter v0.1.3
3 |  * Copyright (c) 2018-present, momoko <ko.momo@qq.com>
4 |  * Released under the MIT License.
5 |  */
6 | 
7 | var t,e;t=this,e=function(){"use strict";var t="vue-image-painter",e={name:"ImagePainter",mixins:[{methods:{c:function(e){return e?"".concat(t).concat(e):"".concat(t)}}}],props:{src:{type:String,default:void 0},alt:{type:String,default:void 0},animation:{type:String,default:"draw"},duration:{type:Number,default:4e3},immediate:{type:Boolean,default:!1}},data:function(){return{show:!1,imgClass:void 0}},watch:{src:function(){this.init()}},mounted:function(){this.init()},methods:{init:function(){this.$emit("loadStart"),this.immediate?this.draw():this.wait()},wait:function(){this.show=!1,this.imgClass=void 0},draw:function(){this.show=!0,this.imgClass=this.animation},loadEnd:function(){this.$emit("loadEnd"),this.immediate||this.draw()}}},i=function(t,e,i,a,n,r,s,o,l,c){"boolean"!=typeof s&&(l=o,o=s,s=!1);var d,f="function"==typeof i?i.options:i;if(t&&t.render&&(f.render=t.render,f.staticRenderFns=t.staticRenderFns,f._compiled=!0,n&&(f.functional=!0)),a&&(f._scopeId=a),r?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},f._ssrRegister=d):e&&(d=s?function(){e.call(this,c(this.$root.$options.shadowRoot))}:function(t){e.call(this,o(t))}),d)if(f.functional){var m=f.render;f.render=function(t,e){return d.call(e),m(t,e)}}else{var u=f.beforeCreate;f.beforeCreate=u?[].concat(u,d):[d]}return i},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),n=document.head||document.getElementsByTagName("head")[0],r={},s=i({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{class:t.c()},[i("img",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:[t.c("_img"),t.imgClass],style:{animationDuration:t.duration/1e3+"s"},attrs:{src:t.src,alt:t.alt},on:{load:t.loadEnd}}),t._v(" "),t.show?t._e():t._t("default")],2)},staticRenderFns:[]},function(t){t&&t("data-v-684a6a03_0",{source:".vue-image-painter .draw{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:draw;animation-name:draw}.vue-image-painter .blur{-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:blur;animation-name:blur}@-webkit-keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@keyframes draw{0%{-webkit-filter:brightness(10) contrast(10) grayscale(1);filter:brightness(10) contrast(10) grayscale(1);opacity:0}5%{-webkit-filter:brightness(5) contrast(10) grayscale(1);filter:brightness(5) contrast(10) grayscale(1);opacity:.5}30%{-webkit-filter:brightness(3) contrast(10) grayscale(1);filter:brightness(3) contrast(10) grayscale(1);opacity:1}50%{-webkit-filter:brightness(2) contrast(2) grayscale(1);filter:brightness(2) contrast(2) grayscale(1)}75%{-webkit-filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8);filter:brightness(1.5) contrast(1) grayscale(.4) saturate(.8)}100%{-webkit-filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05);filter:brightness(1.05) contrast(1) grayscale(0) saturate(1.05)}}@-webkit-keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes blur{0%{-webkit-filter:blur(50px);filter:blur(50px);opacity:0}10%{-webkit-filter:blur(30px);filter:blur(30px);opacity:.6}100%{-webkit-filter:blur(0);filter:blur(0);opacity:1}}.vue-image-painter{width:100%;overflow:hidden}.vue-image-painter_img{width:100%}",map:void 0,media:void 0})},e,void 0,!1,void 0,function(t){return function(t,e){return function(t,e){var i=a?e.media||"default":t,s=r[i]||(r[i]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",e.media&&s.element.setAttribute("media",e.media),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var l=s.ids.size-1,c=document.createTextNode(o),d=s.element.childNodes;d[l]&&s.element.removeChild(d[l]),d.length?s.element.insertBefore(c,d[l]):s.element.appendChild(c)}}}(t,e)}},void 0);return s.install=function(t){t.component(s.name,s)},s},"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self)["vue-image-painter"]=e();


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-image-painter",
 3 |   "version": "0.1.3",
 4 |   "description": "🙋‍ Image draw animation effect plugin for Vue 2.x | 图像动态绘制效果",
 5 |   "author": "komo <ko.momo@qq.com>",
 6 |   "license": "MIT",
 7 |   "private": false,
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/komomoo/vue-image-painter"
11 |   },
12 |   "keywords": [
13 |     "vue",
14 |     "image-drawer",
15 |     "image-painter",
16 |     "img-paint"
17 |   ],
18 |   "main": "dist/vue-image-painter.min.js",
19 |   "module": "dist/vue-image-painter.esm.min.js",
20 |   "scripts": {
21 |     "dev": "parcel demo/index.html -p 8080 --out-dir demo/dev",
22 |     "build:demo": "rm -rf demo/dist/ && parcel build demo/index.html --out-dir demo/dist --public-url ./",
23 |     "build": "dio",
24 |     "lint": "eslint --fix --ext .js,.ts,.vue .",
25 |     "release": "sh scripts/release.sh"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": [
29 |       "@momoko/vue"
30 |     ]
31 |   },
32 |   "eslintIgnore": [
33 |     "dist"
34 |   ],
35 |   "babel": {
36 |     "presets": [
37 |       "@momoko/vue"
38 |     ]
39 |   },
40 |   "browserslist": [
41 |     "iOS >= 9",
42 |     "Android >= 4.4",
43 |     "IE >= 9"
44 |   ],
45 |   "dependencies": {},
46 |   "devDependencies": {
47 |     "@babel/core": "^7.3.3",
48 |     "@momoko/babel-preset-vue": "^0.2.0",
49 |     "@momoko/eslint-config-vue": "^1.0.2",
50 |     "dio-bundler": "^0.5.2",
51 |     "eslint": "^5.16.0",
52 |     "parcel-bundler": "^1.12.3",
53 |     "standard-version": "^4.4.0",
54 |     "vue": "^2.6.10",
55 |     "vue-hot-reload-api": "^2.3.2",
56 |     "vue-template-compiler": "^2.6.10"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/scripts/release.sh:
--------------------------------------------------------------------------------
 1 | version=$(node -p "const { version } = require('./package.json'); version")
 2 | 
 3 | git checkout master
 4 | 
 5 | # build
 6 | yarn build
 7 | yarn build:demo
 8 | 
 9 | # commit
10 | git add -A
11 | standard-version --commit-all --release-as $version
12 | 
13 | # gh-pages
14 | git checkout gh-pages
15 | git merge master
16 | git checkout master
17 | 
18 | # push
19 | git push --tags origin
20 | git push --all origin
21 | 
22 | # publish
23 | npm publish --registry=https://registry.npmjs.org
24 | 


--------------------------------------------------------------------------------
/src/ImagePainter/index.vue:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * vue-image-painter
  3 |  * @Author komo
  4 |  * @Date 2019/06
  5 |  */
  6 | 
  7 | <template>
  8 |   <div :class="c()">
  9 |     <img
 10 |       v-show="show"
 11 |       :src="src"
 12 |       :alt="alt"
 13 |       :style="{'animationDuration': duration/ 1000 + 's'}"
 14 |       :class="[c('_img'), imgClass]"
 15 |       @load="loadEnd">
 16 |     <slot v-if="!show"></slot>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | import mixin from './mixins'
 22 | 
 23 | export default {
 24 |   name: 'ImagePainter',
 25 |   mixins: [mixin],
 26 |   props: {
 27 |     src: {
 28 |       // 图片链接
 29 |       type: String,
 30 |       default: undefined,
 31 |     },
 32 |     alt: {
 33 |       // 图片描述
 34 |       type: String,
 35 |       default: undefined,
 36 |     },
 37 |     animation: {
 38 |       // 动画效果，可选：'draw'，'blur'
 39 |       type: String,
 40 |       default: 'draw',
 41 |     },
 42 |     duration: {
 43 |       // 动画持续时间
 44 |       type: Number,
 45 |       default: 4000,
 46 |     },
 47 |     immediate: {
 48 |       // 立即显示图片和动画，而不等图片加载完
 49 |       type: Boolean,
 50 |       default: false,
 51 |     },
 52 |   },
 53 |   data () {
 54 |     return {
 55 |       show: false,
 56 |       imgClass: undefined, // 图片样式类
 57 |     }
 58 |   },
 59 |   watch: {
 60 |     src () {
 61 |       this.init()
 62 |     },
 63 |   },
 64 |   mounted () {
 65 |     this.init()
 66 |   },
 67 |   methods: {
 68 |     init () {
 69 |       this.$emit('loadStart')
 70 |       this.immediate ? this.draw() : this.wait()
 71 |     },
 72 |     wait () {
 73 |       this.show = false
 74 |       this.imgClass = undefined
 75 |     },
 76 |     draw () {
 77 |       this.show = true
 78 |       this.imgClass = this.animation
 79 |     },
 80 |     loadEnd () {
 81 |       this.$emit('loadEnd')
 82 |       if (!this.immediate) this.draw()
 83 |     },
 84 |   },
 85 | }
 86 | </script>
 87 | 
 88 | <style lang="stylus">
 89 | @import './style/animation.styl';
 90 | 
 91 | $ = vue-image-painter;
 92 | .{$} {
 93 |   width: 100%;
 94 |   overflow: hidden;
 95 | 
 96 |   &_img {
 97 |     width: 100%;
 98 |   }
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/ImagePainter/mixins/index.js:
--------------------------------------------------------------------------------
 1 | import pkg from '../../../package.json'
 2 | const pre = pkg.name
 3 | 
 4 | export default {
 5 |   methods: {
 6 |     // 生成 css class
 7 |     c (className) {
 8 |       return className ? `${pre}${className}` : `${pre}`
 9 |     },
10 |   },
11 | }
12 | 


--------------------------------------------------------------------------------
/src/ImagePainter/style/animation.styl:
--------------------------------------------------------------------------------
 1 | $ = vue-image-painter;
 2 | .{$} {
 3 |   /**
 4 |    * draw
 5 |    */
 6 |   @keyframes draw {
 7 |     // 1st step: drawing borders with a pencil
 8 |     0% {
 9 |       filter: brightness(10) contrast(10) grayscale(1);
10 |       opacity: 0;
11 |     }
12 | 
13 |     5% {
14 |       filter: brightness(5) contrast(10) grayscale(1);
15 |       opacity: 0.5;
16 |     }
17 | 
18 |     30% {
19 |       filter: brightness(3) contrast(10) grayscale(1);
20 |       opacity: 1;
21 |     }
22 | 
23 |     // 2nd step: define better outlines and shades with a pencil
24 |     50% {
25 |       filter: brightness(2) contrast(2) grayscale(1);
26 |     }
27 | 
28 |     // 3nd step: give it some basic, very vanish colors
29 |     75% {
30 |       filter: brightness(1.5) contrast(1) grayscale(0.4) saturate(0.8);
31 |     }
32 | 
33 |     // 4nd step: complete the picture with all its colors (a bit more bright and alive)
34 |     100% {
35 |       filter: brightness(1.05) contrast(1) grayscale(0) saturate(1.05);
36 |     }
37 |   }
38 | 
39 |   .draw {
40 |     animation-timing-function: linear;
41 |     animation-fill-mode: both;
42 |     animation-name: draw;
43 |   }
44 | 
45 |   @keyframes blur {
46 |     0% {
47 |       filter: blur(50px);
48 |       opacity: 0;
49 |     }
50 |     10% {
51 |       filter: blur(30px);
52 |       opacity: 0.6;
53 |     }
54 | 
55 |     100% {
56 |       filter: blur(0);
57 |       opacity: 1;
58 |     }
59 |   }
60 | 
61 |   .blur {
62 |     animation-timing-function: linear;
63 |     animation-fill-mode: both;
64 |     animation-name: blur;
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ImagePainter from './ImagePainter'
2 | 
3 | ImagePainter.install = function (Vue) {
4 |   Vue.component(ImagePainter.name, ImagePainter)
5 | }
6 | 
7 | export default ImagePainter
8 | 


--------------------------------------------------------------------------------