底部栏 更新成自己做的封装组件了

README.md

@@ -2,13 +2,10 @@
 
 
 ## 项目名字
-- 先按这个改：
-    - homepage
-    - agreement
-    - contact
-    - mine
+
 
 ## 使用的外部库
+
 - Mint-ui
     - 下载
         - npm i mint-ui -S
@@ -17,7 +14,14 @@
         - import 'mint-ui/lib/style.css'
 
         - Vue.use(MintUI)
+- Element UI 
+    -  npm i element-ui -S
+- stylus
+    -  npm install -g stylus
+- 自己封装的simple-footerbar
+    - npm install simple-footerbar
 
+有的版本好像有点过期了？重新安 了一下上面的外部库UI  就可以跑了
 
 ## 已完成的
 - 第一次
@@ -26,12 +30,9 @@
     - 使用了vue之组件
 - 第二次新增
     - 模拟数据
-
-
-## 未完成的
-- 二级界面 和响应（控件功能）
-- 数据接口  (当前是写死了)
-- 支持多种分辨率  (目前只有在谷歌浏览器-调试台 iPhone5/SE的分辨率正常一点...)
+    - 二级界面 和响应（控件功能）
+    - 数据
+    - 支持多种分辨率
 
 
 ## 效果预览

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "element-ui": "^2.12.0",
     "mint-ui": "^2.2.13",
+    "simple-footerbar": "^1.0.3",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue": "^2.5.2",
@@ -29,7 +30,7 @@
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
+    "css-loader": "^3.2.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
@@ -45,12 +46,12 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
+    "url-loader": "^2.2.0",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0"
   },

src/App.vue

@@ -8,7 +8,8 @@
   </div>
 </template>
 <script>
-import FooterBar from './components/public_footerbar'
+import FooterBar from './components/footerbar'
+//import FooterBar from './components/public_footerbar'
 export default {
   name: 'App',
   data(){
@@ -52,8 +53,6 @@ export default {
   width:100%
   font-size: 10;
 }
-
-
  .slide-right-enter-active,
     .slide-right-leave-active,
     .slide-left-enter-active,

src/components/footerbar.vue

+<template>
+  <div class='footerbar'>
+   <footer-bar 
+        :items='itemsssss'
+        :showIcons='showIcons'
+        :selected_id='selected_id'
+        @change="changeeee"
+    >
+    </footer-bar>
+  </div>
+</template>
+<script>
+
+import FooterBar from 'simple-footerbar'
+export default {
+  name: 'App',
+  components:{
+    FooterBar,
+  },
+  data(){
+        return{
+            showIcons:false, 
+            selected_id:0,
+            itemsssss: [
+            {
+                name:'首页',
+                push:"/homepage",
+                src_selected:require('../assets/首页-选中.png'),
+                src_unselected:require('../assets/首页-未选.png'),
+            },{
+                name:'合同',
+                push:"/agreement",
+                src_selected:require('../assets/合同-选中.png'),
+                src_unselected:require('../assets/合同-未选.png'),
+            },{
+                name:'联系人',
+                push:"/contact",
+                src_selected:require('../assets/联系人-选中.png'),
+                src_unselected:require('../assets/联系人-未选.png'),
+            },{
+                name:'我的',
+                push:"/mine",
+                src_selected:require('../assets/我-选中.png'),
+                src_unselected:require('../assets/我-未选.png'),
+            }
+            
+            
+            ],
+        }
+    },
+    //回调方法不可少，因为需要获取子组件id确定选中状态
+    methods:{
+        changeeee(index){
+            this.selected_id=index;// selectid赋值了 然后同步子组件那边qwq
+        }
+    },
+}
+</script>
+
+<style>
+*{
+  margin:0;
+  padding:0;
+}
+.footerbar {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>
\ No newline at end of file

src/components/public_footerbar.vue

-<template>
-  <div id="tab-bar">
-    <mt-tabbar v-model="selected" v-show="isShow" 
-    fixed class="border-1px-top">
-      <mt-tab-item id="homepage">
-        <img :src="img1" slot="icon">首页
-      </mt-tab-item>
-      <mt-tab-item id="agreement">
-        <img :src="img3" slot="icon">合同
-      </mt-tab-item>
-      <mt-tab-item id="contact">
-        <img :src="img5" slot="icon">联系人
-      </mt-tab-item>
-      <mt-tab-item id="mine">
-        <img :src="img7" slot="icon">我的
-      </mt-tab-item>
-    </mt-tabbar>
-  </div>
-</template>
-<style lang="stylus" scoped>
-.border-1px-top{
-  height:10vh;
-}
-</style>
-<script>
-  export default {
-    data(){
-      return {
-        selected: "homepage",
-        img1: "static/首页-选中.png",
-        img3: "static/合同-未选.png",
-        img5: "static/联系人-未选.png",
-        img7: "static/我-未选.png",
-         }
-    },
-    computed: {
-      isShow: function () {
-        return true;
-      }
-    },
-    watch: {
-      'selected': {
-        handler(){
-          if (this.selected == "homepage") {
-            this.$router.push('/homepage');
-            this.img1 = "static/首页-选中.png"
-          } else {
-            this.img1 = "static/首页-未选.png"
-          }
-          if (this.selected == "agreement") {
-            this.$router.push('/agreement');
-            this.img3 = 'static/合同-选中.png'
-          } else {
-            this.img3 = 'static/合同-未选.png'
-          }
-          if (this.selected == "contact") {
-            this.$router.push('/contact')
-            this.img5 = "static/联系人-选中.png";
-          } else {
-            this.img5 = "static/联系人-未选.png";
-          }
-          if (this.selected == "mine") {
-            this.$router.push('/mine')
-            this.img7 = "static/我-选中.png";
-          } else {
-            this.img7 = "static/我-未选.png";
-          }
-        }
-      }
-    }
-  }
-</script>
\ No newline at end of file

src/main.js

@@ -6,11 +6,11 @@ import router from './router'
 import Mint from 'mint-ui'
 import 'mint-ui/lib/style.css'
 import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
+//import 'element-ui/lib/theme-chalk/index.css';
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */
-Vue.use(Mint);
+//Vue.use(Mint);
 Vue.use(ElementUI);
 new Vue({
   el: '#app',