md-iview 1.0.12

package/src/components/md-icon/icon.vue

@@ -0,0 +1,77 @@
+<template>
+  <i :class="classString" @click="$emit('click')" :style="[iconStyle, sizeStyle, colorStyle]">{{ title }}</i>
+</template>
+
+<script>
+  import  classNames from 'classnames';
+  import './style/index.less';
+  // import './md-font/styles/iconfont.css'
+  // import  omit from 'omit.js';
+  import  icons from './icons';
+
+  export default {
+    name: "md-icon",
+    computed:{
+      classString() {
+        if (this.isCustom) {
+          return classNames({
+            'ivu-icon': true,
+            "font_family":this.isCustom,
+            "iconfont":this.isCustom,
+            [`${this.type}`]: true,
+          }, this.className)
+        }
+        return classNames({
+          'ivu-icon': true,
+          "font_family":this.isCustom,
+          "iconfont":this.isCustom,
+          [`ivu-icon-${this.type}`]: true,
+        }, this.className)
+      },
+      sizeStyle() {
+        return {
+          fontSize: `${this.size}px`
+        }
+      },
+      isCustom() {
+        if (icons.default.includes(this.type)) {
+          return false
+        }  else {
+          return true;
+        }
+      },
+      colorStyle() {
+        return {
+          color:this.color
+        }
+      }
+    },
+    props:{
+      type:String,
+      className:String,
+      title:String,
+      custom:{
+        type:Boolean,
+        default:false,
+      },
+
+      size:{
+        type:Number|String,
+        default:18,
+      },
+      color:{
+        type:String,
+        default:'#000',
+      },
+      iconStyle:Object,
+    },
+  }
+</script>
+
+<style scoped>
+  .icon {
+    margin-right: 2px;
+    margin-top: -2px;
+    line-height: 28px;
+  }
+</style>

package/src/components/md-icon/icons.js

@@ -0,0 +1,5 @@
+const icons = {
+  default: ["ios-add-circle-outline","ios-add-circle","ios-add","ios-alarm-outline","ios-alarm","ios-albums-outline","ios-albums","ios-alert-outline","ios-alert","ios-american-football-outline","ios-american-football","ios-analytics-outline","ios-analytics","ios-aperture-outline","ios-aperture","ios-apps-outline","ios-apps","ios-appstore-outline","ios-appstore","ios-archive-outline","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown-circle","ios-arrow-dropdown","ios-arrow-dropleft-circle","ios-arrow-dropleft","ios-arrow-dropright-circle","ios-arrow-dropright","ios-arrow-dropup-circle","ios-arrow-dropup","ios-arrow-forward","ios-arrow-round-back","ios-arrow-round-down","ios-arrow-round-forward","ios-arrow-round-up","ios-arrow-up","ios-at-outline","ios-at","ios-attach","ios-backspace-outline","ios-backspace","ios-barcode-outline","ios-barcode","ios-baseball-outline","ios-baseball","ios-basket-outline","ios-basket","ios-basketball-outline","ios-basketball","ios-battery-charging","ios-battery-dead","ios-battery-full","ios-beaker-outline","ios-beaker","ios-beer-outline","ios-beer","ios-bicycle","ios-bluetooth","ios-boat-outline","ios-boat","ios-body-outline","ios-body","ios-bonfire-outline","ios-bonfire","ios-book-outline","ios-book","ios-bookmark-outline","ios-bookmark","ios-bookmarks-outline","ios-bookmarks","ios-bowtie-outline","ios-bowtie","ios-briefcase-outline","ios-briefcase","ios-browsers-outline","ios-browsers","ios-brush-outline","ios-brush","ios-bug-outline","ios-bug","ios-build-outline","ios-build","ios-bulb-outline","ios-bulb","ios-bus-outline","ios-bus","ios-cafe-outline","ios-cafe","ios-calculator-outline","ios-calculator","ios-calendar-outline","ios-calendar","ios-call-outline","ios-call","ios-camera-outline","ios-camera","ios-car-outline","ios-car","ios-card-outline","ios-card","ios-cart-outline","ios-cart","ios-cash-outline","ios-cash","ios-chatboxes-outline","ios-chatboxes","ios-chatbubbles-outline","ios-chatbubbles","ios-checkbox-outline","ios-checkbox","ios-checkmark-circle-outline","ios-checkmark-circle","ios-checkmark","ios-clipboard-outline","ios-clipboard","ios-clock-outline","ios-clock","ios-close-circle-outline","ios-close-circle","ios-close","ios-closed-captioning-outline","ios-closed-captioning","ios-cloud-circle-outline","ios-cloud-circle","ios-cloud-done-outline","ios-cloud-done","ios-cloud-download-outline","ios-cloud-download","ios-cloud-outline","ios-cloud-upload-outline","ios-cloud-upload","ios-cloud","ios-cloudy-night-outline","ios-cloudy-night","ios-cloudy-outline","ios-cloudy","ios-code-download","ios-code-working","ios-code","ios-cog-outline","ios-cog","ios-color-fill-outline","ios-color-fill","ios-color-filter-outline","ios-color-filter","ios-color-palette-outline","ios-color-palette","ios-color-wand-outline","ios-color-wand","ios-compass-outline","ios-compass","ios-construct-outline","ios-construct","ios-contact-outline","ios-contact","ios-contacts-outline","ios-contacts","ios-contract","ios-contrast","ios-copy-outline","ios-copy","ios-create-outline","ios-create","ios-crop-outline","ios-crop","ios-cube-outline","ios-cube","ios-cut-outline","ios-cut","ios-desktop-outline","ios-desktop","ios-disc-outline","ios-disc","ios-document-outline","ios-document","ios-done-all","ios-download-outline","ios-download","ios-easel-outline","ios-easel","ios-egg-outline","ios-egg","ios-exit-outline","ios-exit","ios-expand","ios-eye-off-outline","ios-eye-off","ios-eye-outline","ios-eye","ios-fastforward-outline","ios-fastforward","ios-female","ios-filing-outline","ios-filing","ios-film-outline","ios-film","ios-finger-print","ios-flag-outline","ios-flag","ios-flame-outline","ios-flame","ios-flash-outline","ios-flash","ios-flask-outline","ios-flask","ios-flower-outline","ios-flower","ios-folder-open-outline","ios-folder-open","ios-folder-outline","ios-folder","ios-football-outline","ios-football","ios-funnel-outline","ios-funnel","ios-game-controller-a-outline","ios-game-controller-a","ios-game-controller-b-outline","ios-game-controller-b","ios-git-branch","ios-git-commit","ios-git-compare","ios-git-merge","ios-git-network","ios-git-pull-request","ios-glasses-outline","ios-glasses","ios-globe-outline","ios-globe","ios-grid-outline","ios-grid","ios-hammer-outline","ios-hammer","ios-hand-outline","ios-hand","ios-happy-outline","ios-happy","ios-headset-outline","ios-headset","ios-heart-outline","ios-heart","ios-help-buoy-outline","ios-help-buoy","ios-help-circle-outline","ios-help-circle","ios-help","ios-home-outline","ios-home","ios-ice-cream-outline","ios-ice-cream","ios-image-outline","ios-image","ios-images-outline","ios-images","ios-infinite-outline","ios-infinite","ios-information-circle-outline","ios-information-circle","ios-information","ios-ionic-outline","ios-ionic","ios-ionitron-outline","ios-ionitron","ios-jet-outline","ios-jet","ios-key-outline","ios-key","ios-keypad-outline","ios-keypad","ios-laptop","ios-leaf-outline","ios-leaf","ios-link-outline","ios-link","ios-list-box-outline","ios-list-box","ios-list","ios-locate-outline","ios-locate","ios-lock-outline","ios-lock","ios-log-in","ios-log-out","ios-magnet-outline","ios-magnet","ios-mail-open-outline","ios-mail-open","ios-mail-outline","ios-mail","ios-male","ios-man-outline","ios-man","ios-map-outline","ios-map","ios-medal-outline","ios-medal","ios-medical-outline","ios-medical","ios-medkit-outline","ios-medkit","ios-megaphone-outline","ios-megaphone","ios-menu-outline","ios-menu","ios-mic-off-outline","ios-mic-off","ios-mic-outline","ios-mic","ios-microphone-outline","ios-microphone","ios-moon-outline","ios-moon","ios-more-outline","ios-more","ios-move","ios-musical-note-outline","ios-musical-note","ios-musical-notes-outline","ios-musical-notes","ios-navigate-outline","ios-navigate","ios-no-smoking-outline","ios-no-smoking","ios-notifications-off-outline","ios-notifications-off","ios-notifications-outline","ios-notifications","ios-nuclear-outline","ios-nuclear","ios-nutrition-outline","ios-nutrition","ios-open-outline","ios-open","ios-options-outline","ios-options","ios-outlet-outline","ios-outlet","ios-paper-outline","ios-paper-plane-outline","ios-paper-plane","ios-paper","ios-partly-sunny-outline","ios-partly-sunny","ios-pause-outline","ios-pause","ios-paw-outline","ios-paw","ios-people-outline","ios-people","ios-person-add-outline","ios-person-add","ios-person-outline","ios-person","ios-phone-landscape","ios-phone-portrait","ios-photos-outline","ios-photos","ios-pie-outline","ios-pie","ios-pin-outline","ios-pin","ios-pint-outline","ios-pint","ios-pizza-outline","ios-pizza","ios-plane-outline","ios-plane","ios-planet-outline","ios-planet","ios-play-outline","ios-play","ios-podium-outline","ios-podium","ios-power-outline","ios-power","ios-pricetag-outline","ios-pricetag","ios-pricetags-outline","ios-pricetags","ios-print-outline","ios-print","ios-pulse-outline","ios-pulse","ios-qr-scanner","ios-quote-outline","ios-quote","ios-radio-button-off","ios-radio-button-on","ios-radio-outline","ios-radio","ios-rainy-outline","ios-rainy","ios-recording-outline","ios-recording","ios-redo-outline","ios-redo","ios-refresh-circle-outline","ios-refresh-circle","ios-refresh","ios-remove-circle-outline","ios-remove-circle","ios-remove","ios-reorder","ios-repeat","ios-resize","ios-restaurant-outline","ios-restaurant","ios-return-left","ios-return-right","ios-reverse-camera-outline","ios-reverse-camera","ios-rewind-outline","ios-rewind","ios-ribbon-outline","ios-ribbon","ios-rose-outline","ios-rose","ios-sad-outline","ios-sad","ios-school-outline","ios-school","ios-search-outline","ios-search","ios-send-outline","ios-send","ios-settings-outline","ios-settings","ios-share-alt-outline","ios-share-alt","ios-share-outline","ios-share","ios-shirt-outline","ios-shirt","ios-shuffle","ios-skip-backward-outline","ios-skip-backward","ios-skip-forward-outline","ios-skip-forward","ios-snow-outline","ios-snow","ios-speedometer-outline","ios-speedometer","ios-square-outline","ios-square","ios-star-half","ios-star-outline","ios-star","ios-stats-outline","ios-stats","ios-stopwatch-outline","ios-stopwatch","ios-subway-outline","ios-subway","ios-sunny-outline","ios-sunny","ios-swap","ios-switch-outline","ios-switch","ios-sync","ios-tablet-landscape","ios-tablet-portrait","ios-tennisball-outline","ios-tennisball","ios-text-outline","ios-text","ios-thermometer-outline","ios-thermometer","ios-thumbs-down-outline","ios-thumbs-down","ios-thumbs-up-outline","ios-thumbs-up","ios-thunderstorm-outline","ios-thunderstorm","ios-time-outline","ios-time","ios-timer-outline","ios-timer","ios-train-outline","ios-train","ios-transgender","ios-trash-outline","ios-trash","ios-trending-down","ios-trending-up","ios-trophy-outline","ios-trophy","ios-umbrella-outline","ios-umbrella","ios-undo-outline","ios-undo","ios-unlock-outline","ios-unlock","ios-videocam-outline","ios-videocam","ios-volume-down","ios-volume-mute","ios-volume-off","ios-volume-up","ios-walk","ios-warning-outline","ios-warning","ios-watch","ios-water-outline","ios-water","ios-wifi-outline","ios-wifi","ios-wine-outline","ios-wine","ios-woman-outline","ios-woman","logo-android","logo-angular","logo-apple","logo-bitcoin","logo-buffer","logo-chrome","logo-codepen","logo-css3","logo-designernews","logo-dribbble","logo-dropbox","logo-euro","logo-facebook","logo-foursquare","logo-freebsd-devil","logo-github","logo-google","logo-googleplus","logo-hackernews","logo-html5","logo-instagram","logo-javascript","logo-linkedin","logo-markdown","logo-nodejs","logo-octocat","logo-pinterest","logo-playstation","logo-python","logo-reddit","logo-rss","logo-sass","logo-skype","logo-snapchat","logo-steam","logo-tumblr","logo-tux","logo-twitch","logo-twitter","logo-usd","logo-vimeo","logo-whatsapp","logo-windows","logo-wordpress","logo-xbox","logo-yahoo","logo-yen","logo-youtube","md-add-circle","md-add","md-alarm","md-albums","md-alert","md-american-football","md-analytics","md-aperture","md-apps","md-appstore","md-archive","md-arrow-back","md-arrow-down","md-arrow-dropdown-circle","md-arrow-dropdown","md-arrow-dropleft-circle","md-arrow-dropleft","md-arrow-dropright-circle","md-arrow-dropright","md-arrow-dropup-circle","md-arrow-dropup","md-arrow-forward","md-arrow-round-back","md-arrow-round-down","md-arrow-round-forward","md-arrow-round-up","md-arrow-up","md-at","md-attach","md-backspace","md-barcode","md-baseball","md-basket","md-basketball","md-battery-charging","md-battery-dead","md-battery-full","md-beaker","md-beer","md-bicycle","md-bluetooth","md-boat","md-body","md-bonfire","md-book","md-bookmark","md-bookmarks","md-bowtie","md-briefcase","md-browsers","md-brush","md-bug","md-build","md-bulb","md-bus","md-cafe","md-calculator","md-calendar","md-call","md-camera","md-car","md-card","md-cart","md-cash","md-chatboxes","md-chatbubbles","md-checkbox-outline","md-checkbox","md-checkmark-circle-outline","md-checkmark-circle","md-checkmark","md-clipboard","md-clock","md-close-circle","md-close","md-closed-captioning","md-cloud-circle","md-cloud-done","md-cloud-download","md-cloud-outline","md-cloud-upload","md-cloud","md-cloudy-night","md-cloudy","md-code-download","md-code-working","md-code","md-cog","md-color-fill","md-color-filter","md-color-palette","md-color-wand","md-compass","md-construct","md-contact","md-contacts","md-contract","md-contrast","md-copy","md-create","md-crop","md-cube","md-cut","md-desktop","md-disc","md-document","md-done-all","md-download","md-easel","md-egg","md-exit","md-expand","md-eye-off","md-eye","md-fastforward","md-female","md-filing","md-film","md-finger-print","md-flag","md-flame","md-flash","md-flask","md-flower","md-folder-open","md-folder","md-football","md-funnel","md-game-controller-a","md-game-controller-b","md-git-branch","md-git-commit","md-git-compare","md-git-merge","md-git-network","md-git-pull-request","md-glasses","md-globe","md-grid","md-hammer","md-hand","md-happy","md-headset","md-heart-outline","md-heart","md-help-buoy","md-help-circle","md-help","md-home","md-ice-cream","md-image","md-images","md-infinite","md-information-circle","md-information","md-ionic","md-ionitron","md-jet","md-key","md-keypad","md-laptop","md-leaf","md-link","md-list-box","md-list","md-locate","md-lock","md-log-in","md-log-out","md-magnet","md-mail-open","md-mail","md-male","md-man","md-map","md-medal","md-medical","md-medkit","md-megaphone","md-menu","md-mic-off","md-mic","md-microphone","md-moon","md-more","md-move","md-musical-note","md-musical-notes","md-navigate","md-no-smoking","md-notifications-off","md-notifications-outline","md-notifications","md-nuclear","md-nutrition","md-open","md-options","md-outlet","md-paper-plane","md-paper","md-partly-sunny","md-pause","md-paw","md-people","md-person-add","md-person","md-phone-landscape","md-phone-portrait","md-photos","md-pie","md-pin","md-pint","md-pizza","md-plane","md-planet","md-play","md-podium","md-power","md-pricetag","md-pricetags","md-print","md-pulse","md-qr-scanner","md-quote","md-radio-button-off","md-radio-button-on","md-radio","md-rainy","md-recording","md-redo","md-refresh-circle","md-refresh","md-remove-circle","md-remove","md-reorder","md-repeat","md-resize","md-restaurant","md-return-left","md-return-right","md-reverse-camera","md-rewind","md-ribbon","md-rose","md-sad","md-school","md-search","md-send","md-settings","md-share-alt","md-share","md-shirt","md-shuffle","md-skip-backward","md-skip-forward","md-snow","md-speedometer","md-square-outline","md-square","md-star-half","md-star-outline","md-star","md-stats","md-stopwatch","md-subway","md-sunny","md-swap","md-switch","md-sync","md-tablet-landscape","md-tablet-portrait","md-tennisball","md-text","md-thermometer","md-thumbs-down","md-thumbs-up","md-thunderstorm","md-time","md-timer","md-train","md-transgender","md-trash","md-trending-down","md-trending-up","md-trophy","md-umbrella","md-undo","md-unlock","md-videocam","md-volume-down","md-volume-mute","md-volume-off","md-volume-up","md-walk","md-warning","md-watch","md-water","md-wifi","md-wine","md-woman","ios-loading"],
+};
+// icons.default.concat(icons.custom);
+export default icons;

package/src/components/md-icon/index.js

@@ -0,0 +1,11 @@
+import MdIcon from './icon.vue'
+import Vue from 'vue';
+// 这里是重点
+const icon = {
+  install: function(Vue){
+    Vue.component('md-icon',MdIcon)
+  }
+}
+
+// 导出组件
+export default icon

package/src/components/md-icon/style/index.less

@@ -0,0 +1 @@
+//@import "http://at.alicdn.com/t/font_1236679_6ckej41ansn.css";

package/src/components/md-loading/index.js

@@ -0,0 +1,55 @@
+// import Vue from 'vue';
+// import MdLoading from './index.vue';
+//
+// export default {
+//     install(Vue, defaultOptions = {}) {
+//       const CONSTRUCTOR = Vue.extend(MdLoading);
+//       let node = new CONSTRUCTOR;
+//       let vm = node.$mount().$el;
+//
+//       function loading(show=true) {
+//         node.show = show;
+//         if (node.show) {
+//           document.body.appendChild(vm)
+//         }
+//       }
+//
+//       Vue.loading = Vue.prototype.$loading = loading;
+//     }
+// }
+
+import MdLoading from './md-loading';
+
+
+let mdLoadingInstance;
+
+
+function getLoadingInstance (render = undefined) {
+  mdLoadingInstance = mdLoadingInstance || MdLoading.newInstance({
+    render: render
+  });
+
+  return mdLoadingInstance;
+}
+
+function loading (options) {
+  const render = ('render' in options) ? options.render : undefined;
+  let instance  = getLoadingInstance(render);
+
+  instance.show(options);
+}
+
+MdLoading.show = function (props = {}) {
+  return loading(props);
+};
+MdLoading.hide = function () {
+  if (!mdLoadingInstance) return false;
+
+  const instance = getLoadingInstance();
+
+  instance.remove(() => {
+    mdLoadingInstance = null;
+  });
+};
+
+export default MdLoading

package/src/components/md-loading/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <Row class="md-loading">
+    <Col class="demo-spin-col" span="8" v-show="show">
+      <Spin fix class="spin">
+        <Icon type="ios-loading" color="#3f51b5" size=50 class="demo-spin-icon-load"></Icon>
+      </Spin>
+    </Col>
+  </Row>
+</template>
+
+<script>
+    export default {
+        // props:{
+        //   show:{
+        //     type:Boolean,
+        //     default:false,
+        //   },
+        // },
+        name: "loading",
+        data () {
+          return {
+            show:false,
+          }
+        },
+        methods:{
+        }
+    }
+</script>
+
+<style lang="scss" less>
+  .demo-spin-icon-load{
+    animation: ani-demo-spin 1s linear infinite;
+  }
+  @keyframes ani-demo-spin {
+    from { transform: rotate(0deg);}
+    50%  { transform: rotate(180deg);}
+    to   { transform: rotate(360deg);}
+  }
+  .demo-spin-col{
+    height: 100px;
+    /*position: relative;*/
+    /*border: 1px solid #eee;*/
+
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .spin {
+    background: none;
+  }
+</style>

package/src/components/md-loading/md-loading.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import MdLoading from './index.vue';
+
+MdLoading.newInstance = properties=>{
+  const _props = properties || {};
+
+  const Instance = new Vue({
+    data:Object.assign({}, _props,{}),
+    render(h){
+      return  h(MdLoading, {
+        props:_props
+      })
+    }
+  });
+
+  const component = Instance.$mount();
+  document.body.appendChild(component.$el);
+  const loading = Instance.$children[0];
+
+  return {
+    show() {
+      loading.show = true;
+      setTimeout(()=>{
+        loading.show = false
+      }, 2000)
+    },
+    remove() {
+      loading.show = false;
+    },
+    component:loading,
+
+    destroy () {
+      document.body.removeChild(document.getElementsByClassName('md-loading')[0]);
+    }
+  }
+};
+
+export default MdLoading;

package/src/components/md-print/demo/index.vue

@@ -0,0 +1,260 @@
+<template>
+  <div class="print">
+
+    <div id="printMe" ref="print">
+      <!-- ul,li标签 -->
+      <div class="title">ul/li标签</div>
+      <ul class="printBox1">
+        <Col span="8" v-for="(items,key) in basicInfor" :key="key">
+          <li>
+            <Col span="12" class="textRight"><span>{{items.title}}:</span></Col>
+            <Col span="12"><span>{{items.value}}</span></Col>
+          </li>
+        </Col>
+      </ul>
+      <br/>
+      <br/>
+      <div class="title">form表单</div>
+      <!-- 表单 -->
+      <div class="printBox2">
+        <Form :label-width="80">
+          <FormItem :label="items.title" v-for="(items,key) in formInfo" :key="key">
+            <Input v-if="items.type=='input'" v-model="items.value" ></Input>
+            <Select v-if="items.type=='select'" v-model="items.value">
+                <Option :key="i" v-for="(item,i) in items.dropDown" :value="item.value">{{item.label}}</Option>
+            </Select>
+            <RadioGroup v-if="items.type=='radio'" v-model="items.value">
+                <Radio :key="i" v-for="(item,i) in items.dropDown" :label="item.value">{{item.label}}</Radio>
+            </RadioGroup>
+            <DatePicker v-if="items.type=='date'" type="date" v-model="items.value" class="datapick"></DatePicker>
+            <CheckboxGroup v-if="items.type=='checbox'" v-model="items.value">
+                <Checkbox :key="i" v-for="(item,i) in items.dropDown" :label="item.value">{{item.label}}</Checkbox>
+            </CheckboxGroup>
+            <Input v-if="items.type=='textarea'" v-model="items.value" type="textarea"></Input>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="title">表格</div>
+      <!-- 表格 -->
+      <div class="printBox3">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>姓名</th>
+              <th>性别</th>
+              <th>出生日期</th>
+              <th>籍贯</th>
+              <th>婚姻</th>
+              <th>子女</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(items,key) in tableInfo" :key="key">
+              <td v-for="(item,i) in items" :key="i">{{item}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+       <div class="printBox3">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>姓名</th>
+              <th>性别</th>
+              <th>出生日期</th>
+              <th>籍贯</th>
+              <th>婚姻</th>
+              <th>子女</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(items,key) in tableInfo" :key="key">
+              <td v-for="(item,i) in items" :key="i">{{item}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+       <div class="printBox3">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>姓名</th>
+              <th>性别</th>
+              <th>出生日期</th>
+              <th>籍贯</th>
+              <th>婚姻</th>
+              <th>子女</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(items,key) in tableInfo" :key="key">
+              <td v-for="(item,i) in items" :key="i">{{item}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+       <div class="printBox3">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>姓名</th>
+              <th>性别</th>
+              <th>出生日期</th>
+              <th>籍贯</th>
+              <th>婚姻</th>
+              <th>子女</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(items,key) in tableInfo" :key="key">
+              <td v-for="(item,i) in items" :key="i">{{item}}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="title">p标签</div>
+      <p>
+        {{detail}}
+      </p>
+    </div>
+    <md-btn type="primary" @click="print" class="btns">打印</md-btn>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "md-print",
+    data(){
+      return {
+        basicInfor:{
+          name:{
+            title:"姓名",
+            value:"张三"
+          },
+          sex:{
+            title:"性别",
+            value:"男"
+          },
+          born:{
+            title:"出生日期",
+            value:"2020.12.12"
+          },
+          address:{
+            title:"籍贯",
+            value:"上海"
+          },
+          marray:{
+            title:"婚姻",
+            value:"已婚"
+          },
+          children:{
+            title:"子女",
+            value:"有"
+          },
+        },
+        tableInfo:[
+          {name:"张三",sex:"男",born:"2020.12.12",address:"上海",marray:"已婚",children:"2"},
+          {name:"李四",sex:"女",born:"2020.12.12",address:"北京",marray:"未婚",children:"0"},
+          {name:"王五",sex:"男",born:"2020.12.12",address:"广州",marray:"已婚",children:"3"},
+          {name:"二流子",sex:"男",born:"2020.12.12",address:"美国",marray:"未婚",children:"0"},
+        ],
+        formInfo:{
+          name:{
+            title:"姓名",
+            value:"张三",
+            type:"input",
+            dropDown:[],
+          },
+          address:{
+            title:"籍贯",
+            value:"shanghai",
+            type:"select",
+            dropDown:[],
+          },
+          born:{
+            title:"出生日期",
+            value:"2020.12.12",
+            type:"date",
+            dropDown:[],
+          },
+          sex:{
+            title:"性别",
+            value:"1",
+            type:"radio",
+            dropDown:[],
+          },
+          checbox:{
+            title:"复选框",
+            value:["1","2"],
+            type:"checbox",
+            dropDown:[],
+          },
+          textarea:{
+            title:"富文本",
+            value:"textarea富文本里面的值",
+            type:"textarea",
+            dropDown:[],
+          },
+        },
+        detail:"手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用，手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用，手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用，手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用，手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用，手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用"
+      }
+    },
+    mounted(){
+      this.formInfo.address.dropDown=[{label:"北京",value:"beijing"},{label:"上海",value:"shanghai"},{label:"深圳",value:"shenzhen"}];
+      this.formInfo.sex.dropDown=[{label:"男",value:"1"},{label:"女",value:"2"}];
+      this.formInfo.checbox.dropDown=[{label:"复选框1",value:"1"},{label:"复选框2",value:"2"},{label:"复选框3",value:"3"},{label:"复选框4",value:"4"}];
+    },
+    methods:{
+        print(){
+          this.$print(this.$refs.print)
+        }
+    }
+  }
+</script>
+
+<style scoped>
+.print{
+  text-align:left;
+}
+.datapick{
+  width: 320px;
+}
+.title{
+  font-size:22px;
+  font-weight:bolder;
+  text-align:left;
+  padding-left:50px;
+}
+.printBox1 li{
+  list-style: none;
+  line-height:50px;
+  font-size:16px;
+  text-align:left;
+}
+.textRight{
+  text-align:right;
+}
+.printBox3{
+  margin-top:50px;
+}
+.table{
+  width:100%;
+  text-align:center;
+}
+.table tr td{
+  line-height:30px;
+}
+.printBox2{
+  margin-top:80px;
+  width:400px;
+  margin:0 auto;
+}
+p{
+  padding-top:100px;
+  width:800px;
+  margin:0 auto;
+}
+.btns{
+  margin:50px 0 50px 300px;
+}
+</style>

package/src/components/md-print/index.js

@@ -0,0 +1,123 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print =function(dom, options) {
+    if (!(this instanceof Print)) return new Print(dom, options);
+  
+    this.options = this.extend({
+      'noPrint': '.no-print'
+    }, options);
+  
+    if ((typeof dom) === "string") {
+      this.dom = document.querySelector(dom);
+    } else {
+      this.dom = dom;
+    }
+  
+    this.init();
+  };
+  Print.prototype = {
+    init: function () {
+      var content = this.getStyle() + this.getHtml();
+      this.writeIframe(content);
+    },
+    extend: function (obj, obj2) {
+      for (var k in obj2) {
+        obj[k] = obj2[k];
+      }
+      return obj;
+    },
+  
+    getStyle: function () {
+      var str = "",
+        styles = document.querySelectorAll('style,link');
+      for (var i = 0; i < styles.length; i++) {
+        str += styles[i].outerHTML;
+      }
+      str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+  
+      return str;
+    },
+  
+    getHtml: function () {
+      var inputs = document.querySelectorAll('input');
+      var textareas = document.querySelectorAll('textarea');
+      var selects = document.querySelectorAll('select');
+  
+      for (var k in inputs) {
+        if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+          if (inputs[k].checked == true) {
+            inputs[k].setAttribute('checked', "checked")
+          } else {
+            inputs[k].removeAttribute('checked')
+          }
+        } else if (inputs[k].type == "text") {
+          inputs[k].setAttribute('value', inputs[k].value)
+        }
+      }
+  
+      for (var k2 in textareas) {
+        if (textareas[k2].type == 'textarea') {
+          textareas[k2].innerHTML = textareas[k2].value
+        }
+      }
+  
+      for (var k3 in selects) {
+        if (selects[k3].type == 'select-one') {
+          var child = selects[k3].children;
+          for (var i in child) {
+            if (child[i].tagName == 'OPTION') {
+              if (child[i].selected == true) {
+                child[i].setAttribute('selected', "selected")
+              } else {
+                child[i].removeAttribute('selected')
+              }
+            }
+          }
+        }
+      }
+  
+      return this.dom.outerHTML;
+    },
+  
+    writeIframe: function (content) {
+      var w, doc, iframe = document.createElement('iframe'),
+        f = document.body.appendChild(iframe);
+      iframe.id = "myIframe";
+      iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+  
+      w = f.contentWindow || f.contentDocument;
+      doc = f.contentDocument || f.contentWindow.document;
+      doc.open();
+      doc.write(content);
+      doc.close();
+      this.toPrint(w);
+  
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    },
+  
+    toPrint: function (frameWindow) {
+      try {
+        setTimeout(function () {
+          frameWindow.focus();
+          try {
+            if (!frameWindow.document.execCommand('print', false, null)) {
+              frameWindow.print();
+            }
+          } catch (e) {
+            frameWindow.print();
+          }
+          frameWindow.close();
+        }, 10);
+      } catch (err) {
+        console.log('err', err);
+      }
+    }
+  };
+  const MyPlugin = {}
+  MyPlugin.install = function (Vue, options) {
+    // 4. 添加实例方法
+    Vue.prototype.$print = Print
+  }
+  export default MyPlugin