发布0.1.1

.browserslistrc

+> 1%
+last 2 versions
+not ie <= 8

.eslintrc.js

+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+  extends: ['plugin:vue/essential'],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

babel.config.js

+module.exports = {
+  presets: ['@vue/app'],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk',
+      },
+    ],
+  ],
+};

lib/demo.html

+<meta charset="utf-8">
+<title>rymUi demo</title>
+<script src="./rymUi.umd.js"></script>
+<link rel="stylesheet" href="./rymUi.css">
+
+<script>
+console.log(rymUi)
+</script>

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "description": "任意门组件库",
-  "main": "src/index.js",
+  "main": "dis/rymUi.common.js ",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --target lib --name rymUi ./src/index.js",
+    "lint": "vue-cli-service lint"
   },
   "repository": {
     "type": "git",
@@ -15,5 +17,24 @@
   "bugs": {
     "url": "https://github.com/kuangshu/rym-element-ui/issues"
   },
-  "homepage": "https://github.com/kuangshu/rym-element-ui#readme"
+  "homepage": "https://github.com/kuangshu/rym-element-ui#readme",
+  "dependencies": {
+    "element-ui": "^2.4.5",
+    "normalize.css": "^8.0.1",
+    "popmotion": "^8.5.5",
+    "vue": "^2.5.21"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.2.0",
+    "@vue/cli-plugin-eslint": "^3.2.0",
+    "@vue/cli-service": "^3.2.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-component": "^1.1.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "vue-template-compiler": "^2.5.21"
+  }
 }

src/ListLayout/ListLayout.vue

-<template>
-  <div class="main-wrap">
-    <div :class="['main-wrap-inner',{'noFooter': !$slots.footer}]">
-      <div
-        v-if="$slots.filterItem || $slots.filterBtn"
-        class="search-box"
-      >
-        <div class="left-box">
-          <slot name="filterItem"></slot>
-        </div>
-        <div class="right-box">
-          <slot name="filterBtn"></slot>
-        </div>
-      </div>
-      <div class="table-wrap">
-        <slot></slot>
-      </div>
-    </div>
-    <div
-      v-if="$slots.footer"
-      class="footer-wrap"
-    >
-      <slot name="footer"></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'list-layout',
-};
-</script>

src/assets/icons/index.js

+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg组件
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

src/assets/icons/svg/delimg.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M817.968553 215.897142l-169.357176 0 0-58.869782c0-25.391297-20.657482-46.048779-46.048779-46.048779l-181.125197 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 58.869782-169.357176 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 71.631434c0 25.391297 20.657482 46.048779 46.048779 46.048779l28.321022 0 0 425.947112c0 59.246359 48.200792 107.447151 107.447151 107.447151l340.40076 0c59.246359 0 107.447151-48.200792 107.447151-107.447151L789.647531 379.626133l28.321022 0c25.391297 0 46.048779-20.657482 46.048779-46.048779l0-71.631434C864.017332 236.554624 843.35985 215.897142 817.968553 215.897142zM426.553932 162.14389l170.892135 0 0 53.753251-170.892135 0L426.553932 162.14389zM738.482221 805.574269c0 31.033807-25.248034 56.281841-56.281841 56.281841L341.79962 861.85611c-31.033807 0-56.281841-25.248034-56.281841-56.281841L285.517779 379.626133l452.964442 0L738.482221 805.574269zM812.852022 328.460824l-601.704045 0 0-61.398372 203.227588 0c2.302439 0.356111 4.66116 0.542352 7.061836 0.542352l181.125197 0c2.400676 0 4.759397-0.186242 7.062859-0.542352l203.226564 0L812.852022 328.460824zM513.023306 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655-14.128789 0-25.582655 11.453866-25.582655 25.582655l0 288.572348C487.440651 771.866562 498.894518 783.320429 513.023306 783.320429zM645.541459 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C619.958804 771.866562 631.41267 783.320429 645.541459 783.320429zM380.505154 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C354.922499 771.866562 366.376365 783.320429 380.505154 783.320429z" p-id="3757"></path></svg>
\ No newline at end of file

src/assets/icons/svg/example.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M770.56 460.8h250.88C998.4 220.16 803.84 25.6 563.2 2.56v250.88c104.96 20.48 186.88 102.4 207.36 207.36z m0 0M460.8 253.44V2.56C220.16 25.6 25.6 220.16 2.56 460.8h250.88c20.48-104.96 102.4-186.88 207.36-207.36z m0 0M563.2 770.56v250.88c243.2-23.04 435.2-217.6 460.8-460.8H773.12C750.08 668.16 668.16 750.08 563.2 770.56z m0 0M253.44 563.2H2.56c23.04 243.2 217.6 435.2 460.8 460.8V773.12C355.84 750.08 273.92 668.16 253.44 563.2z m0 0" fill="" p-id="1816"></path></svg>
\ No newline at end of file

src/assets/icons/svg/eye.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993826520" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M941.677063 391.710356c9.337669-14.005992 6.224772-32.68133-6.224772-43.575447-14.005992-10.894118-32.68133-7.78122-43.575447 6.224771-1.556449 1.556449-174.300768 205.426673-379.727441 205.426673-199.200878 0-379.727441-205.426673-381.28389-206.982098-10.894118-12.450567-31.124881-14.005992-43.575448-3.112898-12.450567 10.894118-14.005992 31.124881-3.112897 43.575448 3.112897 4.668323 40.46255 46.687322 99.600439 93.375667l-79.369676 82.48155c-12.450567 12.450567-10.894118 32.68133 1.556449 43.575448 3.112897 6.224772 10.894118 9.337669 18.675338 9.337669 7.78122 0 15.562441-3.112897 21.787213-9.337669l85.594447-88.706321c40.46255 28.013007 88.706321 54.469566 141.619438 73.14388L340.959485 707.631586c-4.668323 17.118889 4.669346 34.237779 21.787213 38.906101h9.337669c14.005992 0 26.456558-9.337669 29.568432-23.343661l32.68133-110.494556c24.90011 4.668323 51.356668 7.78122 77.813227 7.78122s52.913117-3.112897 77.813227-7.78122l32.68133 108.938108c3.112897 14.005992 17.118889 23.343661 29.569456 23.343661 3.112897 0 6.224772 0 7.78122-1.556449 17.118889-4.669346 26.456558-21.787212 21.788236-38.906102l-32.68133-108.938108c52.913117-18.675338 101.156888-45.131897 141.619438-73.14388l84.037998 87.150896c6.224772 6.224772 14.005992 9.337669 21.787212 9.337669 7.78122 0 15.562441-3.112897 21.787212-9.337669 12.450567-12.450567 12.450567-31.124881 1.556449-43.575448l-79.369675-82.48155c63.808258-46.688345 101.158934-91.820242 101.158934-91.820242z" p-id="7879"></path></svg>
\ No newline at end of file

src/assets/icons/svg/form.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504319223" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3230" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M942.827259 80.3367c-11.42419-11.406794-26.41051-17.117866-41.377386-17.117866-14.985296 0-29.952172 5.711072-41.358967 17.117866L719.392444 221.014696l-19.441794 19.441794L681.577187 258.832 569.516971 370.909611 375.99749 564.411697l0 0.019443 0 84.372619 81.145112 0 0.010233 0 95.418186-95.435583 213.398228-213.400275 3.14155-3.14155-0.019443 0 9.979282-9.977235 0 0L942.827259 163.073052C965.697129 140.259464 965.697129 103.186104 942.827259 80.3367z" p-id="3231"></path><path d="M793.542234 367.521444 580.14196 580.939115 484.72582 676.376745 473.299583 687.800935 457.152834 687.800935 375.99749 687.800935 337.000314 687.800935 337.000314 648.803759 337.000314 564.411697 337.000314 548.264948 348.424504 536.838711 541.943986 343.338672 654.004201 231.259014 665.428392 219.834824 64.020082 219.834824 64.020082 960.781166 804.966425 960.781166 804.966425 356.116697 796.607036 364.475062Z" p-id="3232"></path></svg>
\ No newline at end of file

src/assets/icons/svg/icon_delete.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1521704598179" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4010" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 557.223994l249.203712 249.203712c12.491499 12.491499 32.730449 12.489452 45.221948-0.002047s12.493545-32.730449 0.002047-45.221948L557.223994 512l249.203712-249.203712c12.491499-12.491499 12.489452-32.730449-0.002047-45.221948s-32.730449-12.493545-45.221948-0.002047L512 466.776006 262.796288 217.572294c-12.491499-12.491499-32.729425-12.490475-45.220924 0.001023-6.246261 6.246261-9.370415 14.429641-9.370415 22.610974s3.121084 16.365736 9.367345 22.610974L466.774983 512 217.572294 761.203712c-6.246261 6.246261-9.367345 14.428617-9.367345 22.610974s3.125177 16.365736 9.370415 22.610974c12.491499 12.491499 32.729425 12.493545 45.220924 0.002047L512 557.223994z" p-id="4011" fill="#d81e06"></path></svg>
\ No newline at end of file

src/assets/icons/svg/link.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1534225155003" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="755" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M516.672 605.76c11.136 42.624 0.64 89.856-32.64 123.136L348.288 864.64c-49.792 49.792-131.264 49.792-180.992 0l-45.248-45.248c-49.792-49.792-49.792-131.264 0-180.992l135.744-135.744c33.216-33.216 80.512-43.776 123.136-32.64L303.04 547.904 277.568 573.312l-110.336 110.336c-24.96 24.96-24.96 65.536 0 90.496l45.248 45.248c24.96 24.96 65.536 24.96 90.496 0l110.336-110.336 25.472-25.472L516.672 605.76zM891.328 140.608 846.08 95.36c-49.792-49.792-131.264-49.792-180.992 0L529.28 231.104C496.064 264.32 485.568 311.616 496.704 354.24l77.888-77.888L600 250.88l110.336-110.336c24.96-24.96 65.536-24.96 90.496 0l45.248 45.248c24.96 24.96 24.96 65.536 0 90.496l-110.336 110.336-25.472 25.472L632.448 489.984c42.624 11.136 89.856 0.64 123.136-32.64l135.744-135.744C941.12 271.808 941.12 190.336 891.328 140.608zM690.496 296.128c-12.416-12.416-32.832-12.48-45.248 0L574.528 366.848 529.28 412.096 438.784 502.656 393.536 547.904 322.816 618.624C319.744 621.696 317.376 625.28 315.84 629.184c-3.136 7.68-3.136 16.384 0 24.128 1.536 3.84 3.904 7.488 6.976 10.56 3.136 3.136 6.72 5.44 10.56 6.976 7.68 3.136 16.384 3.136 24.128 0 3.84-1.536 7.488-3.904 10.56-6.976l70.72-70.72 45.248-45.248 90.496-90.496 45.248-45.248 70.72-70.72C702.976 328.96 702.976 308.608 690.496 296.128z" p-id="756"></path></svg>
\ No newline at end of file

src/assets/icons/svg/password.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994678729" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9229" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z" p-id="9230"></path></svg>
\ No newline at end of file

src/assets/icons/svg/plus.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M185.89696 532.2752h286.72v286.72a20.48 20.48 0 1 0 40.96 0v-286.72h286.72a20.48 20.48 0 1 0 0-40.96h-286.72v-286.72a20.48 20.48 0 1 0-40.96 0v286.72h-286.72a20.48 20.48 0 1 0 0 40.96z" fill="" p-id="3098"></path></svg>
\ No newline at end of file

src/assets/icons/svg/star.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994797471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9770" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M565.272827 34.627285l112.095872 237.542288c8.706637 18.321022 25.411424 31.051641 44.82285 33.996289l250.776598 38.081157c48.697387 7.411435 68.22505 70.046082 32.933559 105.979639l-181.494353 184.937155c-13.998147 14.230618-20.352386 34.815477-17.05903 54.93539l42.819161 261.127145c8.346858 50.695541-42.64204 89.451974-86.225039 65.51841l-224.307979-123.271141c-17.285968-9.525824-37.992596-9.525824-55.278564 0l-224.313514 123.271141c-43.582999 23.933565-94.571897-14.822869-86.219504-65.51841l42.813626-261.127145c3.321031-20.119914-3.088559-40.704772-17.086706-54.93539l-181.439002-184.937155c-35.285956-35.933557-15.819179-98.57374 32.933559-105.979639l250.748923-38.081157c19.350541-2.939112 36.083003-15.675267 44.75643-33.996289l112.123547-237.542288C480.497972-11.540583 543.509003-11.540583 565.272827 34.627285z" p-id="9771"></path></svg>
\ No newline at end of file

src/assets/icons/svg/table.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504440567" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M568.6 0h454.9v454.9H568.6V0z m0 568.6h454.9v454.9H568.6V568.6zM0 568.6h454.9v454.9H0V568.6zM0 0h454.9v454.9H0V0z" fill="" p-id="5071"></path></svg>
\ No newline at end of file

src/assets/icons/svg/tree.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511512690058" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3507" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M1013.703 693.345c6.865 6.865 10.297 14.874 10.297 24.027l0 205.944c0 9.916-3.432 18.115-10.297 24.599-6.865 6.483-15.255 9.725-25.171 9.725L782.588 957.64c-9.153 0-17.162-3.242-24.027-9.725-6.865-6.483-10.297-14.683-10.297-24.599L748.264 717.372c0-6.102 1.526-11.823 4.577-17.162s7.246-9.534 12.586-12.586 11.06-4.577 17.162-4.577l77.801 0L860.39 546.896c0-4.577-1.144-8.772-3.432-12.586s-5.339-6.865-9.153-9.153-8.009-3.432-12.585-3.432L543.464 521.725l0 161.323 77.801 0c9.153 0 17.162 3.432 24.027 10.297s10.297 14.874 10.297 24.027l0 205.944c0 6.102-1.526 11.823-4.577 17.162s-7.246 9.534-12.585 12.585-11.06 4.577-17.162 4.577L415.321 957.64c-6.102 0-11.823-1.526-17.162-4.577s-9.725-7.246-13.158-12.585-5.149-11.06-5.149-17.162L379.852 717.372c0-9.153 3.432-17.162 10.297-24.027s15.255-10.297 25.171-10.297l76.657 0L491.977 521.725 188.782 521.725c-7.628 0-13.92 2.479-18.878 7.437-4.958 4.958-7.437 10.869-7.437 17.734l0 136.152 77.801 0c9.916 0 18.115 3.432 24.599 10.297s9.725 14.874 9.725 24.027l0 205.944c0 9.916-3.242 18.115-9.725 24.599-6.483 6.483-14.683 9.725-24.599 9.725L34.324 957.64c-3.814 0-7.437-0.572-10.869-1.716-3.432-1.144-6.483-2.67-9.153-4.577-2.67-1.907-5.149-4.386-7.437-7.437-2.288-3.051-4.004-6.293-5.149-9.725C0.572 930.753 0 927.13 0 923.316L0 717.372c0-3.051 0.381-6.102 1.144-9.153s1.907-5.721 3.432-8.009 3.432-4.577 5.721-6.865 4.577-4.195 6.865-5.721 4.958-2.67 8.009-3.432 6.102-1.144 9.153-1.144l77.801 0L112.125 495.41c0-6.865 2.479-12.776 7.437-17.734s10.869-7.437 17.734-7.437l354.682 0L491.978 342.096l-76.657 0c-9.916 0-18.306-3.432-25.171-10.297s-10.297-14.874-10.297-24.027L379.853 101.828c0-9.916 3.432-18.306 10.297-25.171s15.255-10.297 25.171-10.297l205.944 0c6.102 0 11.823 1.716 17.162 5.149 5.339 3.432 9.534 7.818 12.585 13.158 3.051 5.339 4.577 11.06 4.577 17.162l0 205.944c0 9.153-3.432 17.162-10.297 24.027s-14.874 10.297-24.027 10.297l-77.801 0 0 128.143L885.56 470.24c7.628 0 13.92 2.479 18.878 7.437s7.437 10.869 7.437 17.734l0 187.638 76.657 0C998.448 683.048 1006.838 686.48 1013.703 693.345z" p-id="3508"></path></svg>
\ No newline at end of file

src/assets/icons/svg/user.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993891882" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z" p-id="7987"></path></svg>
\ No newline at end of file

src/assets/styles/element-ui.scss

+//to reset element-ui default css
+
+/* 改变主题色变量 */
+$--color-primary: #1459fc;
+$--color-danger: #ff3333;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import '~element-ui/packages/theme-chalk/src/index';
+
+.el-upload {
+  input[type='file'] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+.el-dialog__body {
+  padding: 30px 40px;
+}
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+.el-input__inner {
+  background-color: #f6f6f6;
+  border-color: #f6f6f6;
+}
+.el-select .el-input .el-select__caret.is-reverse {
+  color: $--color-primary;
+}
+.el-select {
+  width: 100%;
+}
+.el-submenu .el-menu-item,
+.el-submenu__title {
+  height: 40px;
+  line-height: 40px;
+}
+.el-input__inner,
+.el-button {
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+}
+.el-button {
+  padding: 0 8px;
+}
+.el-input {
+  .el-input__suffix .el-input__icon {
+    line-height: 22px;
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .el-submenu .el-menu-item,
+  .el-submenu__title {
+    height: 56px;
+    line-height: 56px;
+  }
+  .el-input__inner,
+  .el-button {
+    height: 40px;
+    line-height: 1;
+    font-size: 14px;
+  }
+  .el-button {
+    font-size: 14px;
+    padding: 12px 20px;
+  }
+  .el-input {
+    .el-input__suffix .el-input__icon {
+      line-height: 40px;
+    }
+  }
+}

src/assets/styles/footer.scss

+#app {
+  .footer-wrap {
+    width: 100%;
+    height: $footer-height;
+    line-height: $footer-height;
+    background-color: #fff;
+    display: flex;
+    justify-content: flex-end;
+    .md-pagination {
+      font-size: 12px;
+      padding: 0;
+      padding-right: 12px;
+      .md-pager li {
+        line-height: $footer-height;
+      }
+    }
+    .footer-info {
+      text-indent: 20px;
+      flex: 1;
+      color: #666;
+      font-size: 12px;
+    }
+  }
+  .el-pagination span:not([class*='suffix']),
+  .el-pagination button {
+    font-size: 12px;
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  $footer-height: 48px;
+  #app {
+    .footer-wrap {
+      height: $footer-height;
+      line-height: $footer-height;
+      .md-pagination {
+        .md-pager li {
+          line-height: $footer-height;
+        }
+      }
+      .footer-info {
+        font-size: 14px;
+      }
+    }
+    .el-pagination span:not([class*='suffix']),
+    .el-pagination button {
+      font-size: 14px;
+    }
+  }
+}

src/assets/styles/index.scss

+@import './variables.scss';
+@import './mixin.scss';
+@import './transition.scss';
+@import './element-ui.scss';
+@import './sidebar.scss';
+@import './footer.scss';
+@import './searchbar.scss';
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+div:focus {
+  outline: none;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type='number'] {
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: ' ';
+    clear: both;
+    height: 0;
+  }
+}
+.hide {
+  display: none !important;
+}
+.ImportentText {
+  font-style: normal;
+  color: #ffd200;
+}
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.el-tooltip__popper {
+  max-width: 60%;
+}
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#app {
+  .app-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    min-width: 1280px;
+    background-image: radial-gradient(
+      ellipse farthest-corner at 0px 0px,
+      #6895fe 0%,
+      #2362f6 100%
+    );
+  }
+  .topTitle {
+    display: flex;
+    align-items: center;
+    height: $topBar-height; // background-image: linear-gradient(90deg, #6895fe, #2362f6);
+  }
+  .body-container {
+    display: flex;
+    height: calc(100vh - #{$topBar-height});
+  }
+  // 主体区域
+  .main-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - #{$topBar-height});
+    transition: margin-left 0.28s;
+    background-color: #eee;
+    // main-container全局样式
+    .app-main {
+      width: calc(100vw - #{$sideBar-width});
+      height: calc(100vh - #{$topBar-height} - 30px);
+    }
+    .main-wrap {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      // &::before {
+      // content: '';
+      // width: 100%;
+      // height: 5px;
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      // z-index: 1;
+      // box-shadow: inset 0 5px 10px #eee;
+      // // background-image: linear-gradient(180deg, #eee, transparent);
+      // }
+      .main-wrap-inner {
+        height: calc(100% - #{$footer-height});
+        display: flex;
+        flex-direction: column;
+        &.noFooter {
+          height: 100%;
+          .table-wrap {
+            margin-bottom: 0;
+          }
+        }
+      }
+      .table-wrap {
+        flex: 1;
+        overflow: auto;
+        margin: 12px 12px 22px;
+      }
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  $sideBar-width: 132px;
+  $topBar-height: 72px;
+  $footer-height: 48px;
+  #app {
+    .topTitle {
+      display: flex;
+      align-items: center;
+      height: $topBar-height;
+    }
+    .body-container {
+      height: calc(100vh - #{$topBar-height});
+    }
+    // 主体区域
+    .main-container {
+      height: calc(100vh - #{$topBar-height});
+      .app-main {
+        width: calc(100vw - #{$sideBar-width});
+        height: calc(100vh - #{$topBar-height} - 30px);
+      }
+      .main-wrap {
+        .main-wrap-inner {
+          height: calc(100% - #{$footer-height});
+          overflow: auto;
+          &.noFooter {
+            height: 100%;
+          }
+        }
+        .table-wrap {
+          margin: 16px 20px 22px;
+        }
+      }
+    }
+  }
+}

src/assets/styles/mixin.scss

+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin scrollBar {
+  &::-webkit-scrollbar-track-piece {
+    background: #d3dce6;
+  }
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: #99a9bf;
+    border-radius: 20px;
+  }
+}
+
+@mixin relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+

src/assets/styles/searchbar.scss

+#app {
+  .search-box {
+    margin: 22px 12px 0;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 12px 8px 0;
+    display: flex;
+    // min-width: 1748px;
+    .left-box {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+
+      // .el-input {
+      //   .el-input__suffix .el-input__icon {
+      //     line-height: 22px;
+      //   }
+      // }
+    }
+    .right-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 108px;
+    }
+    // .el-input__inner,
+    // .el-button {
+    //   height: 22px;
+    //   line-height: 22px;
+    //   font-size: 12px;
+    // }
+    .el-button {
+      padding: 0 8px;
+      & + & {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  #app {
+    .search-box {
+      margin: 18px 20px 0;
+      padding: 20px 20px 0;
+      .left-box {
+        .el-input {
+          .el-input__suffix .el-input__icon {
+            line-height: 40px;
+          }
+        }
+      }
+      .right-box {
+        width: 178px;
+      }
+      // .el-input__inner,
+      // .el-button {
+      //   height: 40px;
+      //   line-height: 40px;
+      //   font-size: 14px;
+      // }
+      .el-button {
+        line-height: 1;
+        padding: 12px 20px;
+        & + & {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}

src/assets/styles/sidebar.scss

+#app {
+  // 侧边栏
+  .sidebar-container {
+    transition: width 0.28s;
+    width: $sideBar-width;
+    height: 100%;
+    z-index: 1001;
+    overflow: hidden;
+    // background-image: linear-gradient(0deg, #2362f6, #6895fe);
+    a {
+      display: inline-block;
+      width: 100%;
+    }
+    .svg-icon {
+      margin-right: 6px;
+    }
+    .img-icon {
+      width: 8px;
+      height: 8px;
+      margin-right: 6px;
+    }
+    .el-menu {
+      border: none;
+      width: 100%;
+    }
+  }
+  .hideSidebar {
+    .sidebar-container,
+    .sidebar-container .el-menu {
+      width: 40px;
+      // overflow: inherit;
+    }
+    .main-container {
+      margin-left: 40px;
+    }
+  }
+  .hideSidebar {
+    .submenu-title-noDropdown {
+      padding-left: 10px;
+      position: relative;
+      span {
+        height: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        transition: opacity 3s cubic-bezier(0.55, 0, 0.1, 1);
+        opacity: 0;
+        display: inline-block;
+      }
+      &:hover {
+        span {
+          display: block;
+          border-radius: 3px;
+          z-index: 1002;
+          width: 140px;
+          height: 56px;
+          visibility: visible;
+          position: absolute;
+          right: -145px;
+          text-align: left;
+          text-indent: 20px;
+          top: 0px;
+          background-color: $subMenuBg !important;
+          opacity: 1;
+        }
+      }
+    }
+    .el-submenu {
+      & > .el-submenu__title {
+        padding-left: 10px !important;
+        & > span {
+          display: none;
+        }
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+      .nest-menu {
+        .el-submenu__icon-arrow {
+          display: block !important;
+        }
+        span {
+          display: inline-block !important;
+        }
+      }
+    }
+  }
+  .nest-menu .el-submenu > .el-submenu__title,
+  .el-submenu .el-menu-item {
+    background-color: $subMenuBg !important;
+    padding: 0;
+    width: $sideBar-width;
+    min-width: $sideBar-width;
+    padding-left: 0 !important;
+    text-align: center;
+    font-size: 12px;
+    &:hover {
+      background-color: $menuHover !important;
+    }
+    &.is-active {
+      background-color: $menuActions !important;
+    }
+    .menu-arrow {
+      position: absolute;
+      top: 10px;
+      right: 0;
+      height: 15px;
+      width: 8px;
+      border-right: 8px solid #004cff;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+    }
+    &.is-active .menu-arrow {
+      border-right-color: #eee;
+    }
+  }
+  .el-menu--collapse .el-menu .el-submenu {
+    min-width: 132px !important;
+  }
+  .el-submenu {
+    .el-submenu__icon-arrow {
+      right: 8px;
+      margin-top: -5px;
+    }
+    .el-submenu__title {
+      background-color: transparent !important;
+      color: #fff !important;
+      position: relative;
+      padding: 0 0 0 8px !important;
+      display: flex;
+      align-items: center;
+      font-size: 12px;
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: 2;
+        bottom: -5px;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 5px;
+        background-image: linear-gradient(180deg, #1252e9, transparent);
+        transition: all 0.28s 0.28s;
+        opacity: 0;
+      }
+    }
+    .el-menu-item {
+      text-align: left;
+      text-indent: 20px;
+    }
+    &.is-opened {
+      .el-submenu__title {
+        background-color: $subMenuBg !important;
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (min-width: $bigScreenWidth) {
+  $sideBar-width: 132px;
+
+  #app {
+    // 侧边栏
+    .sidebar-container {
+      width: $sideBar-width;
+      .img-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: 6px;
+      }
+    }
+    .nest-menu .el-submenu > .el-submenu__title,
+    .el-submenu .el-menu-item {
+      width: $sideBar-width;
+      min-width: $sideBar-width;
+      font-size: 14px;
+      .menu-arrow {
+        top: 18px;
+      }
+    }
+    .el-submenu {
+      .el-submenu__title {
+        padding: 0 0 0 12px !important;
+        font-size: 14px;
+      }
+      .el-menu-item {
+        text-indent: 25px;
+      }
+    }
+  }
+}

src/assets/styles/transition.scss

+//globl transition css
+
+/*fade*/
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/*fade*/
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}

src/assets/styles/variables.scss

+// media min-width
+$bigScreenWidth: 1600px;
+//sidebar
+$sideBar-width: 112px;
+$menuBg: #477cfa;
+$subMenuBg: #306bf6;
+$menuHover: #1459fc;
+$menuActions: #1459fc;
+// topbar
+$topBar-height: 44px;
+
+// footer
+$footer-height: 30px;

src/components/ListLayout/ListLayout.vue

+<template>
+  <div class="main-wrap">
+    <div :class="['main-wrap-inner', { noFooter: !$slots.footer }]">
+      <div v-if="$slots.filterItem || $slots.filterBtn" class="search-box">
+        <div class="left-box"><slot name="filterItem"></slot></div>
+        <div class="right-box"><slot name="filterBtn"></slot></div>
+      </div>
+      <div class="table-wrap"><slot></slot></div>
+    </div>
+    <div v-if="$slots.footer" class="footer-wrap">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'list-layout',
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/styles/variables.scss';
+
+#app {
+  .search-box {
+    margin: 22px 12px 0;
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 12px 8px 0;
+    display: flex;
+    // min-width: 1748px;
+    .left-box {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+
+      // .el-input {
+      //   .el-input__suffix .el-input__icon {
+      //     line-height: 22px;
+      //   }
+      // }
+    }
+    .right-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 108px;
+    }
+    // .el-input__inner,
+    // .el-button {
+    //   height: 22px;
+    //   line-height: 22px;
+    //   font-size: 12px;
+    // }
+    .el-button {
+      padding: 0 8px;
+      & + & {
+        margin-left: 8px;
+      }
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  #app {
+    .search-box {
+      margin: 18px 20px 0;
+      padding: 20px 20px 0;
+      .left-box {
+        .el-input {
+          .el-input__suffix .el-input__icon {
+            line-height: 40px;
+          }
+        }
+      }
+      .right-box {
+        width: 178px;
+      }
+      // .el-input__inner,
+      // .el-button {
+      //   height: 40px;
+      //   line-height: 40px;
+      //   font-size: 14px;
+      // }
+      .el-button {
+        line-height: 1;
+        padding: 12px 20px;
+        & + & {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/Pagination/Pagination.vue → src/components/Pagination/Pagination.vue

 <template>
-  <div :class="['el-pagination', {
+  <div
+    :class="[
+      'el-pagination',
+      {
         'is-background': this.background,
-      'el-pagination--small': this.small
-    }]">
-    <total></total>
-    <sizes :pageSizes="this.pageSizes"></sizes>
-    <jumper></jumper>
-    <prev></prev>
+        'el-pagination--small': this.small,
+      },
+    ]"
+  >
+    <total></total> <sizes :pageSizes="this.pageSizes"></sizes>
+    <jumper></jumper> <prev></prev>
     <pager
       :currentPage="this.internalCurrentPage"
       :pageCount="this.internalPageCount"
@@ -26,20 +29,20 @@ import Jumper from './jumper.js';
 export default {
   extends: Pagination,
   components: {
-    MySlot: {
-      render(h) {
-        return this.$parent.$slots.default
-          ? this.$parent.$slots.default[0]
-          : '';
-      },
-    },
+    // MySlot: {
+    //   render(h) {
+    //     return this.$parent.$slots.default
+    //       ? this.$parent.$slots.default[0]
+    //       : '';
+    //   },
+    // },
 
     Total: {
       render(h) {
         return typeof this.$parent.total === 'number' ? (
-          <span class="el-pagination__total">
+          <span class='el-pagination__total'>
             总记录 {this.$parent.total} 条
-            <i class="pagination__pageNum">
+            <i class='pagination__pageNum'>
               {this.$parent.internalCurrentPage}
             </i>
             /{this.$parent.internalPageCount} 页
@@ -97,4 +100,3 @@ export default {
   }
 }
 </style>
-

src/Pagination/jumper.js → src/components/Pagination/jumper.js

+import { Button, Input } from 'element-ui';
+
 const Jumper = {
+  components: {
+    [Button.name]: Button,
+    [Input.name]: Input,
+  },
   data() {
     return {
       oldValue: null,
@@ -56,16 +62,16 @@ const Jumper = {
 
   render(h) {
     return (
-      <span class="el-pagination__jump">
+      <span class='el-pagination__jump'>
         跳转至
         <el-input
-          class="el-pagination__editor is-in-pagination"
+          class='el-pagination__editor is-in-pagination'
           min={1}
           max={this.$parent.internalPageCount}
           value={this.$parent.internalCurrentPage}
           domPropsValue={this.$parent.internalCurrentPage}
-          type="number"
-          ref="input"
+          type='number'
+          ref='input'
           disabled={this.$parent.disabled}
           nativeOnKeyup={this.handleKeyup}
           onChange={this.handleChange}

src/demo/App.vue

+<template>
+  <div id="app">
+    <Layout>
+      <list-layout>
+        <template slot="filterItem">
+          <search-item label="会员ID">
+            <md-select v-model="selectVal">
+              <el-option value="fsd">ds</el-option>
+              <el-option value="ffg">ds</el-option>
+              <el-option value="fga">ds</el-option>
+            </md-select>
+          </search-item>
+          <date-range-picker label="注册时间" v-model="filters.timeRange" />
+        </template>
+
+        <md-table :data="dataList">
+          <md-table-column
+            prop="id"
+            label="ID"
+            min-width="50"
+          ></md-table-column>
+          <md-table-column
+            prop="name"
+            label="姓名"
+            min-width="250"
+          ></md-table-column>
+          <md-table-column
+            prop="name"
+            label="姓名"
+            min-width="250"
+          ></md-table-column>
+          <md-table-column
+            prop="name"
+            label="姓名"
+            min-width="250"
+          ></md-table-column>
+          <md-table-column
+            prop="name"
+            label="姓名"
+            min-width="250"
+          ></md-table-column>
+          <md-table-column
+            prop="name"
+            label="姓名"
+            min-width="250"
+          ></md-table-column>
+          <md-table-column
+            prop="name"
+            label="姓名"
+            min-width="250"
+          ></md-table-column>
+        </md-table>
+        <template slot="footer">
+          <md-pagination
+            class="md-pagination"
+            :pagination="pagination"
+            :changePage="changePage"
+            :changeSizeHandle="changeSizeHandle"
+          />
+        </template>
+      </list-layout>
+    </Layout>
+  </div>
+</template>
+
+<script>
+import Layout from './Layout';
+
+export default {
+  name: 'app',
+  components: {
+    Layout,
+  },
+  data() {
+    let dataList = [];
+    for (let index = 0; index < 20; index++) {
+      dataList[index] = {
+        id: index,
+        name: 'asdad',
+      };
+    }
+    return {
+      filters: {},
+      dataList: dataList,
+      selectVal: '',
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 123,
+      },
+    };
+  },
+  methods: {
+    changePage(index) {
+      console.log(index);
+    },
+    changeSizeHandle(size) {
+      console.log(size);
+    },
+  },
+};
+</script>

src/demo/Layout.vue

+<template>
+  <div class="app-wrapper">
+    <div class="topTitle">
+      <div class="com-logo">
+        <img src="../assets/images/logo.png" alt="logo" />
+      </div>
+      <h1 class="com-title">后台管理系统</h1>
+    </div>
+
+    <div class="body-container">
+      <div class="main-container"><slot></slot></div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '../assets/styles/variables.scss';
+.app-wrapper {
+  .com-logo {
+    width: 80px;
+    height: 30px;
+  }
+  @media screen and (min-width: $bigScreenWidth) {
+    .com-logo {
+      width: 138px;
+      height: 44px;
+    }
+  }
+  .com-title {
+    flex: 1;
+    height: 24px;
+    line-height: 24px;
+    font-size: 14px;
+    font-weight: normal;
+    color: #fff;
+    text-indent: 6px;
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'layout',
+
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+  },
+};
+</script>

src/index.js

-function hello(name) {
-  console.log('hello ' + name);
-}
+import DragDialog from './components/DragDialog/DragDialog';
+import Pagination from './components/Pagination/index';
+import NormalDialog from './components/Dialog/NormalDialog.vue';
+// import UserDialog from './components/Dialog/UserDialogWrap';
+import MessageBox from './components/MessageBox/index';
+import SearchItem from './components/SearchItem/SearchItem.vue';
+import MdSelect from './components/input/Select.vue';
+import DateRangePicker from './components/DateRangePicker/DateRangePicker.vue';
+import DatePicker from './components/DateRangePicker/DatePicker.vue';
+import Table from './components/Table/TableWrap';
+import TableColumn from './components/Table/TableColumn.vue';
+import ListLayout from './components/ListLayout/ListLayout.vue';
+import FormArea from './components/FormArea/FormArea.vue';
+import FormLine from './components/FormArea/FormLine.vue';
+import FormItem from './components/FormArea/FormItem.vue';
+// import AreaSelect from './components/input/AreaSelect.vue';
+// import UserWithContent from './components/UserCard/UserWithContent.vue';
+// import UserCard from './components/UserCard/UserCard.vue';
+// import UserInfo from './components/UserCard/UserInfo.vue';
+// import ServiceTypeSelect from './components/input/ServiceTypeSelect.vue';
+// import GiveTypeSelect from './components/input/GiveTypeSelect.vue';
+// import BaseDataSelect from './components/input/BaseDataSelect.vue';
+import ImgIcon from './components/ImgIcon/ImgIcon.vue';
+import HeaderImg from './components/HeaderImg/HeaderImg.vue';
 
-exports.hello = hello;
+import { Option } from 'element-ui';
+
+import '@/assets/styles/index.scss'; // global css
+
+let rymUi = {};
+
+rymUi.install = Vue => {
+  Vue.prototype.$mdAlert = MessageBox;
+  // Element-ui
+  Vue.component(Option.name, Option);
+  // 布局组件
+  Vue.component(ImgIcon.name, ImgIcon);
+  Vue.component(HeaderImg.name, HeaderImg);
+  Vue.component(ListLayout.name, ListLayout);
+  Vue.component(SearchItem.name, SearchItem);
+  Vue.component(Pagination.name, Pagination);
+  Vue.component(Table.name, Table);
+  Vue.component(TableColumn.name, TableColumn);
+  // Vue.component('UserCard', UserCard);
+  // Vue.component('UserInfo', UserInfo);
+  // Vue.component(UserWithContent.name, UserWithContent);
+  // 弹窗内表单布局
+  Vue.component(FormArea.name, FormArea);
+  Vue.component(FormLine.name, FormLine);
+  Vue.component(FormItem.name, FormItem);
+  // 弹窗
+  Vue.component(DragDialog.name, DragDialog);
+  Vue.component(NormalDialog.name, NormalDialog);
+  // Vue.component(UserDialog.name, UserDialog);
+  // input
+  Vue.component(MdSelect.name, MdSelect);
+  Vue.component(DateRangePicker.name, DateRangePicker);
+  Vue.component(DatePicker.name, DatePicker);
+  // Vue.component(AreaSelect.name, AreaSelect);
+  // Vue.component(BaseDataSelect.name, BaseDataSelect);
+  // Vue.component(ServiceTypeSelect.name, ServiceTypeSelect);
+  // Vue.component(GiveTypeSelect.name, GiveTypeSelect);
+};
+
+export default rymUi;

src/main.js

+import Vue from 'vue';
+import App from './demo/App.vue';
+import rymUi from './index';
+import 'normalize.css/normalize.css';
+
+Vue.use(rymUi);
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');

src/mixins/base/BaseDataSelect.js

+import { selectTypeMapping } from '@/config';
+import { mapGetters, mapActions } from 'vuex';
+
+const getterList = selectTypeMapping.map(types => `optionList${types.value}`);
+const actionsList = selectTypeMapping.map(
+  types => `fetchOptionList${types.value}`
+);
+
+export default {
+  data() {
+    return {
+      baseDataOptionsLabel: [], // 页面需要声明需要使用的基础数据 例如： ['赠送类型']
+    };
+  },
+  created() {
+    this.baseDataOptionsLabel.map(this.getOptionsValue).map(value => {
+      if (!this[`optionList${value}`].length) {
+        this[`fetchOptionList${value}`]();
+      }
+    });
+  },
+  computed: {
+    ...mapGetters(getterList),
+  },
+  methods: {
+    ...mapActions(actionsList),
+    changeHandle(val) {
+      this.$emit('input', val);
+    },
+    getOptionsList(label) {
+      let optionValue = this.getOptionsValue(label);
+      if (optionValue) {
+        let options = this.$store.getters['optionList' + optionValue];
+        if (options && options.length) {
+          return Promise.resolve(options);
+        } else {
+          return this.$store.dispatch('fetchOptionList' + optionValue);
+        }
+      } else {
+        return Promise.resolve([]);
+      }
+    },
+    getOptionsValue(label) {
+      let item = selectTypeMapping.find(item => item.label === label);
+      return item ? item.value : null;
+    },
+    getOptionsName(label, val) {
+      let optionValue = this.getOptionsValue(label);
+      if (optionValue) {
+        let item = this[`optionList${optionValue}`].find(
+          ({ value }) => val === value
+        );
+        return item ? item.name : '';
+      }
+      return '';
+    },
+    formatterMoneyToDouble(val) {
+      return val ? Number(val).toFixed(2) : Number(0).toFixed(2);
+    },
+  },
+};

src/mixins/campusListPage.js

+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  data() {
+    return {
+      filters: {},
+      selected: {},
+      selectedList: [],
+      editType: 0,
+      dialogEditVisible: false,
+    };
+  },
+  computed: {
+    ...mapGetters(['loading', 'campusList']),
+  },
+  created() {
+    let campusPromise = null;
+    if (this.campusList && this.campusList.length) {
+      campusPromise = new Promise(resolve => resolve());
+    } else {
+      campusPromise = this.fetchCampusList();
+    }
+    campusPromise.then(() => {
+      if (this.campusId) {
+        this.filters.campusId = this.campusId;
+      } else if (this.campusList.length === 1) {
+        this.filters.campusId = this.campusList[0].oldCampusid;
+      }
+    });
+  },
+  methods: {
+    ...mapActions(['fetchCampusList']), //权限校区
+    fetchList() {},
+    searchList() {
+      this.changePage(1);
+    },
+    refreshList() {
+      this.changePage(1);
+    },
+    getFilters() {
+      let filters = this.$getFilters(this.filters);
+      return filters;
+    },
+    changePage(index) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: index,
+      });
+    },
+    changeSizeHandle(pageSize) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+      this.updatePagination({
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+    },
+    handleSelectionChange(val) {
+      this.selectedList = val;
+    },
+  },
+};

src/mixins/listPage.js

+import { mapGetters } from 'vuex';
+
+/**
+ * 需要页面组件自己注入或重写参数
+ * listData: 页面列表数据 导入名字key需重命名为listData
+ * pagination: 列表的分页数据
+ * filters: 带有搜索条件的页面需自己定义filters
+ *
+ * 需要页面组件自己注入或重写方法
+ * fetchList: 获取列表数据的方法 通常为触发action的方法
+ * updatePagination: 切换分页大小需要注入此方法更新分页信息
+ */
+export default {
+  data() {
+    return {
+      // listData: [], // 需页面组件自己注入列表并命名为 listData
+      filters: {},
+      selected: {},
+      selectedList: [], // 带有选择框列表选中的列表项
+      editType: 0, // 带有新增/编辑的页面区分编辑状态
+      dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
+    };
+  },
+  //
+  computed: {
+    ...mapGetters(['loading']),
+  },
+  created() {
+    // 当页面没有列表数据的时候调用
+    if (!this.listData || !this.listData.length) {
+      this.fetchList({
+        pageNum: 1,
+      });
+    }
+  },
+  methods: {
+    // 页面组件需自己实现获取列表数据的方法
+    fetchList() {},
+    // 点击搜索时处理函数
+    searchList() {
+      this.changePage(1);
+    },
+    // 获取过滤条件方法 组件可自己实现
+    getFilters() {
+      let filters = this.$getFilters(this.filters);
+      return filters;
+    },
+    // 页码改变时处理函数
+    changePage(index = 1) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: index,
+      });
+    },
+    // 分页大小改变时处理函数
+    changeSizeHandle(pageSize) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+      this.updatePagination({
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+    },
+    // 当列表可选时 处理选择函数
+    handleSelectionChange(val) {
+      this.selectedList = val;
+    },
+    resetEditDialog(done) {
+      this.selected = {};
+      done && typeof done == 'function'
+        ? done()
+        : (this.dialogEditVisible = false);
+    },
+  },
+};

src/mixins/operator.js

+import { mapGetters,mapActions} from 'vuex';
+export default {
+  data() {
+    return {
+      // listData: [], // 需页面组件自己注入列表并命名为 listData
+      filters: {},
+      selected: {},
+      selectedList: [], // 带有选择框列表选中的列表项
+      editType: 0, // 带有新增/编辑的页面区分编辑状态
+      dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
+    };
+  },
+
+  computed: {
+    ...mapGetters(['loading', 'operatorList']),
+
+  },
+  created() {
+    let operatorPromise = null;
+    if (this.operatorList && this.operatorList.length) {
+      operatorPromise = new Promise(resolve => resolve());
+    } else {
+      operatorPromise = this.getOperatorList();
+    }
+    operatorPromise.then(() => {
+      if (this.operatorId) {
+        this.filters.operatorId = this.operatorId;
+      } else if (this.operatorList.length === 1) {
+        this.filters.operatorId = this.operatorList[0].operatorId;
+      }
+    });
+  },
+
+  methods:{
+    ...mapActions(['getOperatorList']),
+      // 页面组件需自己实现获取列表数据的方法
+      fetchList() {},
+      // 点击搜索时处理函数
+      searchList() {
+        this.changePage(1);
+      },
+      // 获取过滤条件方法 组件可自己实现
+      getFilters() {
+        let filters = this.$getFilters(this.filters);
+        return filters;
+      },
+      // 页码改变时处理函数
+      changePage(index) {
+        const filters = this.getFilters();
+        this.fetchList({
+          ...filters,
+          pageNum: index,
+        });
+      },
+      // 分页大小改变时处理函数
+      changeSizeHandle(pageSize) {
+        const filters = this.getFilters();
+        this.fetchList({
+          ...filters,
+          pageNum: 1,
+          pageSize: pageSize,
+        });
+        this.updatePagination({
+          pageNum: 1,
+          pageSize: pageSize,
+        });
+      },
+      // 当列表可选时 处理选择函数
+      handleSelectionChange(val) {
+        this.selectedList = val;
+      },
+      resetEditDialog(done) {
+        this.selected = {};
+        done && typeof done == 'function'
+          ? done()
+          : (this.dialogEditVisible = false);
+      },
+
+  }
+};

src/mixins/user/getUserInfoLabel.js

+import {
+  customerStateOptions,
+  customerTypesOptions,
+  customerSexOptions,
+  customerIsFirstRechargeOptions,
+} from '@/config';
+
+export default {
+  data() {
+    return {
+      customerStateOptions,
+      customerTypesOptions,
+      customerSexOptions,
+      customerIsFirstRechargeOptions,
+    };
+  },
+  methods: {
+    getTypeLabel(val) {
+      let item = customerTypesOptions.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    getStateLabel(val) {
+      let item = customerStateOptions.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    getSexLabel(val) {
+      let item = customerSexOptions.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    getIsFirstRechargeLabel(val) {
+      let item = customerIsFirstRechargeOptions.find(
+        item => item.value === val
+      );
+      return item ? item.label : '';
+    },
+  },
+};

src/mixins/user/userBaseInfo.js

+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  props: {
+    visible: { type: Boolean, default: false },
+    customerId: Number,
+    customerPhone: String,
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.fetchUserBaseInfo({
+          customerId: this.customerId,
+        });
+      }
+    },
+    customerId(newId) {
+      if (newId && this.visible) {
+        this.fetchUserBaseInfo({
+          customerId: this.customerId,
+        });
+      }
+    },
+    customerPhone(newPhone) {
+      if (!this.customerId && newPhone && this.visible) {
+        this.fetchUserBaseInfoByPhone({
+          customerPhone: this.customerPhone,
+        });
+      }
+    },
+  },
+  created() {
+    if (this.visible && this.customerId) {
+      this.fetchUserBaseInfo({
+        customerId: this.customerId,
+      });
+    }
+    if (this.visible && !this.customerId && this.customerPhone) {
+      this.fetchUserBaseInfoByPhone({
+        customerPhone: this.customerPhone,
+      });
+    }
+  },
+  computed: {
+    ...mapGetters(['customerBaseInfo']),
+  },
+  methods: {
+    ...mapActions(['fetchUserBaseInfo', 'fetchUserBaseInfoByPhone']),
+  },
+};

src/mixins/user/validate.js

+export default {
+  methods: {
+    validateCustomerId(cid) {
+      if(cid){
+        //只能是数字的验证
+        let cidboolean = new RegExp('^[0-9]*[1-9][0-9]*$')
+        .test(cid);
+        return cidboolean;
+      }
+    },
+    validatePhone(cphone) {
+      if(cphone){
+        //电话号码验证
+        let cpboolean = new RegExp('^[1][3,4,5,6,7,8,9][0-9]{9}$')
+        .test(cphone);
+        return cpboolean;
+      }
+    },
+    validateMoney(money) {
+        if(money){
+            //金额验证
+            let mboolean = new RegExp('^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,2})?$')
+            .test(money);
+            return mboolean;
+        }
+    },
+    validateidCard(idcard) {
+      if(idcard){
+          //身份证验证
+          let cardboolean = new RegExp( /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$/)
+          .test(idcard);
+          return cardboolean;
+      }
+  },
+  },
+}

vue.config.js

+module.exports = {
+  outputDir: 'lib',
+};