From f9b345a222b8017271bc120d48f058c98806324f Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Fri, 8 Mar 2019 15:15:33 +0800
Subject: [PATCH] 全局filters

---
 src/components/VParking.vue        | 35 +++++------------------------------
 src/components/base/AccountNum.vue | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 src/main.js                        |  6 ++++++
 src/utils/filters.js               |  4 ++++
 src/utils/formate.js               |  6 +++++-
 5 files changed, 69 insertions(+), 31 deletions(-)
 create mode 100644 src/components/base/AccountNum.vue
 create mode 100644 src/utils/filters.js

diff --git a/src/components/VParking.vue b/src/components/VParking.vue
index 55f4b04..05571d8 100644
--- a/src/components/VParking.vue
+++ b/src/components/VParking.vue
@@ -2,22 +2,19 @@
     <div class="theme-wrap">
         <card-title> <span>停车场消息</span></card-title>
         <div class="theme-body">
-            <div class="total-wrap">
-                <span>总计</span>
-                <div class="total-main">
-                    <div class="eleNumBg">1</div><div class="eleNumBg">3</div><div class="eleNumBg">5</div><div class="eleNumBg">8</div>
-                </div>
-            </div>
+            <account-num></account-num>
         </div>
     </div>
 </template>
 
 <script>
 import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
 export default {
   name: 'VParking',
   components: {
-    CardTitle
+    CardTitle,
+    AccountNum
   }
 }
 </script>
@@ -30,27 +27,5 @@ export default {
         height: calc(100% - 30px);
         margin-left: 20px;
     }
-    .total-wrap{
-        height: 30%;
-        display: flex;
-        align-items: center;
-        .total-main{
-            margin-left: 10px;
-            padding: 5px 5px 5px 0;
-            background: url("../images/content/numBorder.svg") no-repeat;
-            background-size: 100% 100%;
-        }
-        .eleNumBg{
-            width: 20px;
-            height: 30px;
-            display: inline-block;
-            margin-left: 5px;
-            line-height: 30px;
-            font-size: 22px;
-            font-weight: 600;
-            text-align: center;
-            background: url("../images/content/numBg.svg") no-repeat;
-            background-size: 100% 100%;
-        }
-    }
+
 </style>
diff --git a/src/components/base/AccountNum.vue b/src/components/base/AccountNum.vue
new file mode 100644
index 0000000..a9a3538
--- /dev/null
+++ b/src/components/base/AccountNum.vue
@@ -0,0 +1,49 @@
+<template>
+    <div class="total-wrap">
+        <span>总计</span>
+        <div class="total-main">
+            <div class="eleNumBg" v-for="item in total" :key="item">
+                {{item}}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { formaterTotal } from '../../utils/formate'
+export default {
+  name: 'AccountNum',
+  data(){
+    return {
+      total: formaterTotal('219706'),
+      msg:'123'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .total-wrap{
+        height: 30%;
+        display: flex;
+        align-items: center;
+        .total-main{
+            margin-left: 10px;
+            padding: 5px 5px 5px 0;
+            background: url("../../images/content/numBorder.svg") no-repeat;
+            background-size: 100% 100%;
+        }
+        .eleNumBg{
+            width: 20px;
+            height: 30px;
+            display: inline-block;
+            margin-left: 5px;
+            line-height: 30px;
+            font-size: 22px;
+            font-weight: 600;
+            text-align: center;
+            background: url("../../images/content/numBg.svg") no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+</style>
diff --git a/src/main.js b/src/main.js
index edf2c04..7f4e7b0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,12 @@
 import Vue from 'vue'
 import App from './App'
 import './style/reset.css'
+
+import * as filters from './utils/filters'
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
diff --git a/src/utils/filters.js b/src/utils/filters.js
new file mode 100644
index 0000000..9cc88cf
--- /dev/null
+++ b/src/utils/filters.js
@@ -0,0 +1,4 @@
+export  function filterTotal(val) {
+  console.log(val.split(''))
+  return val.split('')
+}
diff --git a/src/utils/formate.js b/src/utils/formate.js
index efcce3d..0480060 100644
--- a/src/utils/formate.js
+++ b/src/utils/formate.js
@@ -19,4 +19,8 @@ function formateTime() {
   return str
 }
 
-export  { formateday, formateTime }
+function formaterTotal(val) {
+  return val.split('')
+}
+
+export  { formateday, formateTime, formaterTotal }
--
libgit2 0.21.4