全局filters

liuqimichale
1 parent 8530c025
Showing 5 changed files with 69 additions and 31 deletions
src/components/VParking.vue
src/components/base/AccountNum.vue
src/main.js
src/utils/filters.js
src/utils/formate.js
@@ -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>
+<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>
@@ -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 */
+export  function filterTotal(val) {
+  console.log(val.split(''))
+  return val.split('')
+}
@@ -19,4 +19,8 @@ function formateTime() {
   return str
 }
  
-export  { formateday, formateTime }
+function formaterTotal(val) {
+  return val.split('')
+}
+
+export  { formateday, formateTime, formaterTotal }