webpack-vue-template

├── .gitignore ├── .gitattributes ├── .babelrc ├── code.jpg ├── dist ├── styles.css ├── img │ └── test.jpg ├── index.html └── bundle.js ├── src ├── assets │ ├── test.jpg │ └── index.html ├── index.js ├── components │ └── input-tags │ │ └── index.vue └── pages │ ├── index.vue │ └── index.less ├── .prettierrc ├── example └── index.html ├── webpack.dev.js ├── README.md ├── webpack.prod.js ├── package.json └── webpack.common.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=Vue -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /code.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simplefeel/vue-renderless-component/HEAD/code.jpg -------------------------------------------------------------------------------- /dist/styles.css: -------------------------------------------------------------------------------- 1 | 2 | .test { 3 | height: 1000px; 4 | } 5 | .test .demo { 6 | color: red; 7 | } 8 | -------------------------------------------------------------------------------- /dist/img/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simplefeel/vue-renderless-component/HEAD/dist/img/test.jpg -------------------------------------------------------------------------------- /src/assets/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/simplefeel/vue-renderless-component/HEAD/src/assets/test.jpg -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './pages' 3 | new Vue({ 4 | el: '#app', 5 | render: h => h(App) 6 | }) 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "eslintIntegration": true, 3 | "stylelintIntegration": true, 4 | "tabWidth": 4, 5 | "singleQuote": true, 6 | "semi": false 7 | } 8 | -------------------------------------------------------------------------------- /src/assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webpack-vue-template 6 | 7 | 8 | 9 |

10 | 11 | 12 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | webpack-vue-template 6 | 7 | 8 | 9 |

10 | 11 | 12 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | vue-renderless-component 5 | 6 | 7 | 8 | 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /webpack.dev.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack') 2 | const merge = require('webpack-merge') 3 | const common = require('./webpack.common.js') 4 | 5 | module.exports = merge(common, { 6 | mode: 'development', 7 | module: { 8 | rules: [ 9 | { 10 | test: /\.less$/, 11 | use: ['vue-style-loader', 'css-loader', 'less-loader'] 12 | } 13 | ] 14 | }, 15 | devtool: 'inline-source-map', 16 | devServer: { 17 | inline: true, 18 | hot: true, 19 | contentBase: './example' 20 | }, 21 | plugins: [new webpack.HotModuleReplacementPlugin()] 22 | }) 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RenderLess Components 2 | 3 | ### 文章引用 4 | 5 | 原文：[在 vue.js 中使用函数式组件](https://adamwathan.me/renderless-components-in-vuejs/) 6 | 7 | 中文版：[函数式组件在 vue.js 中使用](https://juejin.im/post/5c2d7030f265da613a54236f) 8 | 9 | ### 函数式组件 10 | 11 | 函数式组件，意味着该组件无状态（没有响应式数据视图），无实例，因为没有视图渲染，因而渲染开销很低。大部分情况下用来包裹组件，配合作用域插槽，可以达到高阶组件的效果，用来分离视图渲染和业务逻辑非常有效，是一个值得注意的特性。 12 | 13 | ### 项目介绍 14 | 15 | 这个项目就是一个函数式组件使用的实例，分离了业务逻辑数据处理和视图渲染逻辑，使得一个组件可以应对不同种情况的布局。有需要的话可以下载下来运行看看，学习一下。 16 | 17 | ### 使用方式 18 | 19 | 代码下载下来之后，运行以下命令即可查看效果 20 | `npm install && npm run dev` 21 | 22 | ### 项目截图 23 | 24 | ![](./code.jpg) 25 | -------------------------------------------------------------------------------- /src/components/input-tags/index.vue: -------------------------------------------------------------------------------- 1 | 51 | 52 | -------------------------------------------------------------------------------- /webpack.prod.js: -------------------------------------------------------------------------------- 1 | const merge = require('webpack-merge') 2 | const webpack = require('webpack') 3 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin') 4 | const common = require('./webpack.common.js') 5 | const HtmlWebpackPlugin = require('html-webpack-plugin') 6 | const CleanWebpackPlugin = require('clean-webpack-plugin') 7 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | 9 | module.exports = merge(common, { 10 | mode: 'production', 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.less$/, 15 | use: ExtractTextPlugin.extract({ 16 | fallback: 'style-loader', 17 | use: ['css-loader', 'less-loader'] 18 | }) 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new CleanWebpackPlugin(['dist']), 24 | new UglifyJSPlugin(), 25 | new ExtractTextPlugin('styles.css'), 26 | new webpack.DefinePlugin({ 27 | 'process.env.NODE_ENV': JSON.stringify('production') 28 | }), 29 | new HtmlWebpackPlugin({ 30 | template: 'src/assets/index.html' 31 | }) 32 | ] 33 | }) 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "side-panel", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --config webpack.dev.js --open --hot --inline", 8 | "build": "webpack --config webpack.prod.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.26.3", 14 | "babel-loader": "^7.1.4", 15 | "babel-preset-env": "^1.7.0", 16 | "clean-webpack-plugin": "^0.1.19", 17 | "css-loader": "^1.0.0", 18 | "eslint": "^5.2.0", 19 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 20 | "file-loader": "^1.1.11", 21 | "html-webpack-plugin": "^3.2.0", 22 | "less-loader": "^4.1.0", 23 | "style-loader": "^0.21.0", 24 | "uglifyjs-webpack-plugin": "^1.2.7", 25 | "url-loader": "^1.0.1", 26 | "vue-cropper": "^0.2.9", 27 | "vue-loader": "^15.2.6", 28 | "vue-template-compiler": "^2.5.16", 29 | "webpack": "^4.12.2", 30 | "webpack-cli": "^3.0.8", 31 | "webpack-dev-server": "^3.1.14", 32 | "webpack-merge": "^4.1.3" 33 | }, 34 | "dependencies": { 35 | "less": "^3.8.0", 36 | "vue": "^2.5.16" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 3 | 4 | module.exports = { 5 | entry: './src', 6 | output: { 7 | filename: 'bundle.js', 8 | path: path.resolve(__dirname, 'dist') 9 | }, 10 | plugins: [new VueLoaderPlugin()], 11 | 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.js$/, 16 | exclude: /node_modules/, 17 | use: { 18 | loader: 'babel-loader' 19 | } 20 | }, 21 | { 22 | test: /\.vue$/, 23 | loader: 'vue-loader', 24 | options: { 25 | loaders: { 26 | less: ['vue-style-loader', 'css-loader', 'less-loader'] 27 | } 28 | } 29 | }, 30 | { 31 | test: /\.css$/, 32 | use: ['vue-style-loader', 'css-loader'] 33 | }, 34 | { 35 | test: /\.(png|jpg|gif|svg)(\?.*)?$/, 36 | loader: 'url-loader', 37 | options: { 38 | limit: 10000, 39 | name: 'img/[name].[ext]?[hash]' 40 | } 41 | }, 42 | { 43 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 44 | loader: 'url-loader', 45 | options: { 46 | limit: 10000, 47 | name: 'fonts/[name].[ext]?[hash]' 48 | } 49 | } 50 | ] 51 | }, 52 | resolve: { 53 | extensions: ['.js', '.vue', '.json'] 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/pages/index.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 50 | 51 | 54 | -------------------------------------------------------------------------------- /src/pages/index.less: -------------------------------------------------------------------------------- 1 | .input-tags--container { 2 | width: 600px; 3 | margin: 0 auto; 4 | border: 1px solid gold; 5 | h1 { 6 | text-align: center; 7 | font-size: 20px; 8 | } 9 | .input-tags-wrap { 10 | width: 400px; 11 | min-height: 40px; 12 | border: 1px solid #ddd; 13 | margin: 20px auto; 14 | display: flex; 15 | align-items: center; 16 | flex-wrap: wrap; 17 | .tag { 18 | height: 25px; 19 | border: 1px solid #ddd; 20 | text-align: center; 21 | padding: 0 10px; 22 | margin: 10px 0; 23 | margin-left: 5px; 24 | display: flex; 25 | align-items: center; 26 | button { 27 | border-radius: 0; 28 | border: 0; 29 | font-size: 16px; 30 | padding: 0; 31 | display: inline-block; 32 | margin-left: 10px; 33 | margin-left: 5px; 34 | } 35 | } 36 | .add_button { 37 | background: blueviolet; 38 | color: #fff; 39 | } 40 | } 41 | .input-tags-wrap--two { 42 | display: block; 43 | margin: 10px; 44 | .tag_list--container { 45 | width: 400px; 46 | margin: 0 auto; 47 | border: 1px solid #ddd; 48 | } 49 | .tag_input--wrap { 50 | margin-top: 5px; 51 | text-align: center; 52 | } 53 | .tag--wrap { 54 | margin: 10px 5px; 55 | text-align: center; 56 | button { 57 | border: 0; 58 | text-decoration: underline; 59 | } 60 | } 61 | } 62 | .tag_input { 63 | border: 0; 64 | padding: 5px 0; 65 | margin-left: 5px; 66 | outline: none; 67 | } 68 | .tag_input--two, 69 | .tag_input--button { 70 | margin-left: 5px; 71 | padding: 5px 0; 72 | } 73 | .tag_input--button { 74 | padding: 6px 10px; 75 | background: blueviolet; 76 | border: 0; 77 | color: #fff; 78 | outline: none; 79 | cursor: pointer; 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /dist/bundle.js: -------------------------------------------------------------------------------- 1 | !function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=12)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={data:function(){return{msg:"hello vue ~"}}}},function(t,e,n){"use strict";n.r(e);var r=n(0),o=n.n(r);for(var i in r)"default"!==i&&function(t){n.d(e,t,function(){return r[t]})}(i);e.default=o.a},function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){"use strict";var r=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"test"},[e("div",{staticClass:"demo"},[this._v("\n "+this._s(this.msg)+"\n "),e("img",{attrs:{src:n(6)}})])])},o=[];r._withStripped=!0,n.d(e,"a",function(){return r}),n.d(e,"b",function(){return o})},function(t,e,n){"use strict";function r(t,e,n,r,o,i,a,s){var c,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=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__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var l=u.render;u.render=function(t,e){return c.call(e),l(t,e)}}else{var f=u.beforeCreate;u.beforeCreate=f?[].concat(f,c):[c]}return{exports:t,options:u}}n.d(e,"a",function(){return r})},function(t,e,n){"use strict";var r=n(17);n.n(r).a},function(t,e,n){t.exports=n.p+"img/test.jpg?736d980ad0d54fa8a7156ba73afda6da"},function(t,e,n){"use strict";n.r(e);var r=n(3),o=n(1);for(var i in o)"default"!==i&&function(t){n.d(e,t,function(){return o[t]})}(i);n(5);var a=n(4),s=Object(a.a)(o.default,r.a,r.b,!1,null,null,null);s.options.__file="src/components/sidePanel/index.vue",e.default=s.exports},function(t,e){var n,r,o=t.exports={};function i(){throw new Error("setTimeout has not been defined")}function a(){throw new Error("clearTimeout has not been defined")}function s(t){if(n===setTimeout)return setTimeout(t,0);if((n===i||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:i}catch(t){n=i}try{r="function"==typeof clearTimeout?clearTimeout:a}catch(t){r=a}}();var c,u=[],l=!1,f=-1;function d(){l&&c&&(l=!1,c.length?u=c.concat(u):f=-1,u.length&&p())}function p(){if(!l){var t=s(d);l=!0;for(var e=u.length;e;){for(c=u,u=[];++f1)for(var n=1;n=0&&(t._idleTimeoutId=setTimeout(function(){t._onTimeout&&t._onTimeout()},e))},n(9),e.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,n(2))},function(t,e,n){"use strict";n.r(e),function(t,n){ 2 | /*! 3 | * Vue.js v2.5.16 4 | * (c) 2014-2018 Evan You 5 | * Released under the MIT License. 6 | */ 7 | var r=Object.freeze({});function o(t){return void 0===t||null===t}function i(t){return void 0!==t&&null!==t}function a(t){return!0===t}function s(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function c(t){return null!==t&&"object"==typeof t}var u=Object.prototype.toString;function l(t){return"[object Object]"===u.call(t)}function f(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function d(t){return null==t?"":"object"==typeof t?JSON.stringify(t,null,2):String(t)}function p(t){var e=parseFloat(t);return isNaN(e)?t:e}function v(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o-1)return t.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function g(t,e){return y.call(t,e)}function _(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var b=/-(\w)/g,w=_(function(t){return t.replace(b,function(t,e){return e?e.toUpperCase():""})}),C=_(function(t){return t.charAt(0).toUpperCase()+t.slice(1)}),$=/\B([A-Z])/g,A=_(function(t){return t.replace($,"-$1").toLowerCase()}),x=Function.prototype.bind?function(t,e){return t.bind(e)}:function(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 O(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function k(t,e){for(var n in e)t[n]=e[n];return t}function T(t){for(var e={},n=0;n0,J=K&&K.indexOf("edge/")>0,Z=(K&&K.indexOf("android"),K&&/iphone|ipad|ipod|ios/.test(K)||"ios"===q),Q=(K&&/chrome\/\d+/.test(K),{}.watch),Y=!1;if(z)try{var tt={};Object.defineProperty(tt,"passive",{get:function(){Y=!0}}),window.addEventListener("test-passive",null,tt)}catch(t){}var et=function(){return void 0===V&&(V=!z&&!W&&void 0!==t&&"server"===t.process.env.VUE_ENV),V},nt=z&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function rt(t){return"function"==typeof t&&/native code/.test(t.toString())}var ot,it="undefined"!=typeof Symbol&&rt(Symbol)&&"undefined"!=typeof Reflect&&rt(Reflect.ownKeys);ot="undefined"!=typeof Set&&rt(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 at=S,st=0,ct=function(){this.id=st++,this.subs=[]};ct.prototype.addSub=function(t){this.subs.push(t)},ct.prototype.removeSub=function(t){m(this.subs,t)},ct.prototype.depend=function(){ct.target&&ct.target.addDep(this)},ct.prototype.notify=function(){for(var t=this.subs.slice(),e=0,n=t.length;e-1)if(i&&!g(o,"default"))a=!1;else if(""===a||a===A(t)){var c=Ft(String,o.type);(c<0||s0&&(se((c=t(c,(n||"")+"_"+r))[0])&&se(l)&&(f[u]=ht(l.text+c[0].text),c.shift()),f.push.apply(f,c)):s(c)?se(l)?f[u]=ht(l.text+c):""!==c&&f.push(ht(c)):se(c)&&se(l)?f[u]=ht(l.text+c.text):(a(e._isVList)&&i(c.tag)&&o(c.key)&&i(n)&&(c.key="__vlist"+n+"_"+r+"__"),f.push(c)));return f}(t):void 0}function se(t){return i(t)&&i(t.text)&&function(t){return!1===t}(t.isComment)}function ce(t,e){return(t.__esModule||it&&"Module"===t[Symbol.toStringTag])&&(t=t.default),c(t)?e.extend(t):t}function ue(t){return t.isComment&&t.asyncFactory}function le(t){if(Array.isArray(t))for(var e=0;eOe&&we[n].id>t.id;)n--;we.splice(n+1,0,t)}else we.push(t);Ae||(Ae=!0,Zt(ke))}}(this)},Se.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||c(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Rt(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},Se.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Se.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},Se.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||m(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var Ee={enumerable:!0,configurable:!0,get:S,set:S};function Ie(t,e,n){Ee.get=function(){return this[e][n]},Ee.set=function(t){this[e][n]=t},Object.defineProperty(t,n,Ee)}var je={lazy:!0};function Pe(t,e,n){var r=!et();"function"==typeof n?(Ee.get=r?Me(e):n,Ee.set=S):(Ee.get=n.get?r&&!1!==n.cache?Me(e):n.get:S,Ee.set=n.set?n.set:S),Object.defineProperty(t,e,Ee)}function Me(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),ct.target&&e.depend(),e.value}}function Le(t,e,n,r){return l(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=t[n]),t.$watch(e,n,r)}function Ne(t,e){if(t){for(var n=Object.create(null),r=it?Reflect.ownKeys(t).filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}):Object.keys(t),o=0;o=0||n.indexOf(t[o])<0)&&r.push(t[o]);return r}return t}function cn(t){this._init(t)}function un(t){return t&&(t.Ctor.options.name||t.tag)}function ln(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!function(t){return"[object RegExp]"===u.call(t)}(t)&&t.test(e)}function fn(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=un(a.componentOptions);s&&!e(s)&&dn(n,i,r,o)}}}function dn(t,e,n,r){var o=t[e];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),t[e]=null,m(n,e)}cn.prototype._init=function(t){var e=this;e._uid=on++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r,n._parentElm=e._parentElm,n._refElm=e._refElm;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)}(e,t):e.$options=Pt(an(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(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}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&pe(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,o=n&&n.context;t.$slots=ve(e._renderChildren,o),t.$scopedSlots=r,t._c=function(e,n,r,o){return rn(t,e,n,r,o,!1)},t.$createElement=function(e,n,r,o){return rn(t,e,n,r,o,!0)};var i=n&&n.data;At(t,"$attrs",i&&i.attrs||r,null,!0),At(t,"$listeners",e._parentListeners||r,null,!0)}(e),be(e,"beforeCreate"),function(t){var e=Ne(t.$options.inject,t);e&&(wt(!1),Object.keys(e).forEach(function(n){At(t,n,e[n])}),wt(!0))}(e),function(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[];t.$parent&&wt(!1);var i=function(i){o.push(i);var a=Lt(i,e,n,t);At(r,i,a),i in t||Ie(t,"_props",i)};for(var a in e)i(a);wt(!0)}(t,e.props),e.methods&&function(t,e){for(var n in t.$options.props,e)t[n]=null==e[n]?S:x(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;l(e=t._data="function"==typeof e?function(t,e){lt();try{return t.call(e,e)}catch(t){return Rt(t,e,"data()"),{}}finally{ft()}}(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];r&&g(r,i)||R(i)||Ie(t,"_data",i)}$t(e,!0)}(t):$t(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=et();for(var o in e){var i=e[o],a="function"==typeof i?i:i.get;r||(n[o]=new Se(t,a||S,S,je)),o in t||Pe(t,o,i)}}(t,e.computed),e.watch&&e.watch!==Q&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o1?O(e):e;for(var n=O(arguments,1),r=0,o=e.length;rparseInt(this.max)&&dn(a,s[0],s,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return F}};Object.defineProperty(t,"config",e),t.util={warn:at,extend:k,mergeOptions:Pt,defineReactive:At},t.set=xt,t.delete=Ot,t.nextTick=Zt,t.options=Object.create(null),N.forEach(function(e){t.options[e+"s"]=Object.create(null)}),t.options._base=t,k(t.options.components,vn),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=O(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}}(t),function(t){t.mixin=function(t){return this.options=Pt(this.options,t),this}}(t),function(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,a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=Pt(n.options,t),a.super=n,a.options.props&&function(t){var e=t.options.props;for(var n in e)Ie(t.prototype,"_props",n)}(a),a.options.computed&&function(t){var e=t.options.computed;for(var n in e)Pe(t.prototype,n,e[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,N.forEach(function(t){a[t]=n[t]}),i&&(a.options.components[i]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=k({},a.options),o[r]=a,a}}(t),function(t){N.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]}})}(t)}(cn),Object.defineProperty(cn.prototype,"$isServer",{get:et}),Object.defineProperty(cn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(cn,"FunctionalRenderContext",{value:Ge}),cn.version="2.5.16";var hn=v("style,class"),mn=v("input,textarea,option,select,progress"),yn=v("contenteditable,draggable,spellcheck"),gn=v("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"),_n="http://www.w3.org/1999/xlink",bn=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},wn=function(t){return bn(t)?t.slice(6,t.length):""},Cn=function(t){return null==t||!1===t};function $n(t,e){return{staticClass:An(t.staticClass,e.staticClass),class:i(t.class)?[t.class,e.class]:e.class}}function An(t,e){return t?e?t+" "+e:t:e||""}function xn(t){return Array.isArray(t)?function(t){for(var e,n="",r=0,o=t.length;r-1?Xn(t,e,n):gn(e)?Cn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):yn(e)?t.setAttribute(e,Cn(n)||"false"===n?"false":"true"):bn(e)?Cn(n)?t.removeAttributeNS(_n,wn(e)):t.setAttributeNS(_n,e,n):Xn(t,e,n)}function Xn(t,e,n){if(Cn(n))t.removeAttribute(e);else{if(X&&!G&&"TEXTAREA"===t.tagName&&"placeholder"===e&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var Gn={create:qn,update:qn};function Jn(t,e){var n=e.elm,r=e.data,a=t.data;if(!(o(r.staticClass)&&o(r.class)&&(o(a)||o(a.staticClass)&&o(a.class)))){var s=function(t){for(var e=t.data,n=t,r=t;i(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(e=$n(r.data,e));for(;i(n=n.parent);)n&&n.data&&(e=$n(e,n.data));return function(t,e){return i(t)||i(e)?An(t,xn(e)):""}(e.staticClass,e.class)}(e),c=n._transitionClasses;i(c)&&(s=An(s,xn(c))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var Zn,Qn={create:Jn,update:Jn},Yn="__r",tr="__c";function er(t,e,n,r,o){e=function(t){return t._withTask||(t._withTask=function(){Kt=!0;var e=t.apply(null,arguments);return Kt=!1,e})}(e),n&&(e=function(t,e,n){var r=Zn;return function o(){null!==t.apply(null,arguments)&&nr(e,o,n,r)}}(e,t,r)),Zn.addEventListener(t,e,Y?{capture:r,passive:o}:r)}function nr(t,e,n,r){(r||Zn).removeEventListener(t,e._withTask||e,n)}function rr(t,e){if(!o(t.data.on)||!o(e.data.on)){var n=e.data.on||{},r=t.data.on||{};Zn=e.elm,function(t){if(i(t[Yn])){var e=X?"change":"input";t[e]=[].concat(t[Yn],t[e]||[]),delete t[Yn]}i(t[tr])&&(t.change=[].concat(t[tr],t.change||[]),delete t[tr])}(n),re(n,r,er,nr,e.context),Zn=void 0}}var or={create:rr,update:rr};function ir(t,e){if(!o(t.data.domProps)||!o(e.data.domProps)){var n,r,a=e.elm,s=t.data.domProps||{},c=e.data.domProps||{};for(n in i(c.__ob__)&&(c=e.data.domProps=k({},c)),s)o(c[n])&&(a[n]="");for(n in c){if(r=c[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),r===s[n])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===n){a._value=r;var u=o(r)?"":String(r);ar(a,u)&&(a.value=u)}else a[n]=r}}}function ar(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(i(r)){if(r.lazy)return!1;if(r.number)return p(n)!==p(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var sr={create:ir,update:ir},cr=_(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 ur(t){var e=lr(t.style);return t.staticStyle?k(t.staticStyle,e):e}function lr(t){return Array.isArray(t)?T(t):"string"==typeof t?cr(t):t}var fr,dr=/^--/,pr=/\s*!important$/,vr=function(t,e,n){if(dr.test(e))t.style.setProperty(e,n);else if(pr.test(n))t.style.setProperty(e,n.replace(pr,""),"important");else{var r=mr(e);if(Array.isArray(n))for(var o=0,i=n.length;o-1?e.split(/\s+/).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 br(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(/\s+/).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 wr(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&k(e,Cr(t.name||"v")),k(e,t),e}return"string"==typeof t?Cr(t):void 0}}var Cr=_(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"}}),$r=z&&!G,Ar="transition",xr="animation",Or="transition",kr="transitionend",Tr="animation",Sr="animationend";$r&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Or="WebkitTransition",kr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Tr="WebkitAnimation",Sr="webkitAnimationEnd"));var Er=z?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function Ir(t){Er(function(){Er(t)})}function jr(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),_r(t,e))}function Pr(t,e){t._transitionClasses&&m(t._transitionClasses,e),br(t,e)}function Mr(t,e,n){var r=Nr(t,e),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Ar?kr:Sr,c=0,u=function(){t.removeEventListener(s,l),n()},l=function(e){e.target===t&&++c>=a&&u()};setTimeout(function(){c0&&(n=Ar,l=a,f=i.length):e===xr?u>0&&(n=xr,l=u,f=c.length):f=(n=(l=Math.max(a,u))>0?a>u?Ar:xr:null)?n===Ar?i.length:c.length:0,{type:n,timeout:l,propCount:f,hasTransform:n===Ar&&Lr.test(r[Or+"Property"])}}function Dr(t,e){for(;t.length1}function Hr(t,e){!0!==e.data.show&&Rr(e)}var zr=function(t){var e,n,r={},c=t.modules,u=t.nodeOps;for(e=0;ev?_(t,o(n[y+1])?null:n[y+1].elm,n,p,y,r):p>y&&w(0,e,d,v)}(c,p,v,n,s):i(v)?(i(t.text)&&u.setTextContent(c,""),_(c,null,v,0,v.length-1,n)):i(p)?w(0,p,0,p.length-1):i(t.text)&&u.setTextContent(c,""):t.text!==e.text&&u.setTextContent(c,e.text),i(d)&&i(l=d.hook)&&i(l=l.postpatch)&&l(t,e)}}}function x(t,e,n){if(a(n)&&i(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r-1,a.selected!==i&&(a.selected=i);else if(j(Gr(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));o||(t.selectedIndex=-1)}}function Xr(t,e){return e.every(function(e){return!j(e,t)})}function Gr(t){return"_value"in t?t._value:t.value}function Jr(t){t.target.composing=!0}function Zr(t){t.target.composing&&(t.target.composing=!1,Qr(t.target,"input"))}function Qr(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Yr(t){return!t.componentInstance||t.data&&t.data.transition?t:Yr(t.componentInstance._vnode)}var to={model:Wr,show:{bind:function(t,e,n){var r=e.value,o=(n=Yr(n)).data&&n.data.transition,i=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&o?(n.data.show=!0,Rr(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=Yr(n)).data&&n.data.transition?(n.data.show=!0,r?Rr(n,function(){t.style.display=t.__vOriginalDisplay}):Ur(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)}}},eo={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 no(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?no(le(e.children)):t}function ro(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[w(i)]=o[i];return e}function oo(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var io={name:"transition",props:eo,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(function(t){return t.tag||ue(t)})).length){var r=this.mode,o=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return o;var i=no(o);if(!i)return o;if(this._leaving)return oo(t,o);var a="__transition-"+this._uid+"-";i.key=null==i.key?i.isComment?a+"comment":a+i.tag:s(i.key)?0===String(i.key).indexOf(a)?i.key:a+i.key:i.key;var c=(i.data||(i.data={})).transition=ro(this),u=this._vnode,l=no(u);if(i.data.directives&&i.data.directives.some(function(t){return"show"===t.name})&&(i.data.show=!0),l&&l.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(i,l)&&!ue(l)&&(!l.componentInstance||!l.componentInstance._vnode.isComment)){var f=l.data.transition=k({},c);if("out-in"===r)return this._leaving=!0,oe(f,"afterLeave",function(){e._leaving=!1,e.$forceUpdate()}),oo(t,o);if("in-out"===r){if(ue(i))return u;var d,p=function(){d()};oe(c,"afterEnter",p),oe(c,"enterCancelled",p),oe(f,"delayLeave",function(t){d=t})}}return o}}},ao=k({tag:String,moveClass:String},eo);function so(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function co(t){t.data.newPos=t.elm.getBoundingClientRect()}function uo(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"}}delete ao.mode;var lo={Transition:io,TransitionGroup:{props:ao,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=ro(this),s=0;s-1?En[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:En[t]=/HTMLUnknownElement/.test(e.toString())},k(cn.options.directives,to),k(cn.options.components,lo),cn.prototype.__patch__=z?zr:S,cn.prototype.$mount=function(t,e){return function(t,e,n){return t.$el=e,t.$options.render||(t.$options.render=vt),be(t,"beforeMount"),new Se(t,function(){t._update(t._render(),n)},S,null,!0),n=!1,null==t.$vnode&&(t._isMounted=!0,be(t,"mounted")),t}(this,t=t&&z?function(t){return"string"==typeof t?document.querySelector(t)||document.createElement("div"):t}(t):void 0,e)},z&&setTimeout(function(){F.devtools&&nt&&nt.emit("init",cn)},0),e.default=cn}.call(this,n(2),n(10).setImmediate)},function(t,e,n){"use strict";var r=i(n(11)),o=i(n(7));function i(t){return t&&t.__esModule?t:{default:t}}new r.default({el:"#app",render:function(t){return t(o.default)}})},,,,,function(t,e){}]); --------------------------------------------------------------------------------

布局1

布局2