demo初始化

config.json

@@ -329,14 +329,18 @@
       "showDemo": true
     },
     {
-      
       "name": "ShortPwd",
       "chnName": "短密码弹层",
       "desc": "6位短密码弹层",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "NavBar",
+      "chnName": "拖动导航栏",
+      "desc": "用来解决深层页面跳转其他页面困难的问题， 初始化的时候是一个圆点，当我们需要跳转其他页面的时候，点击打开就行，同时支持拖动圆点",
+      "type": "component",
+      "showDemo": true
     }
-   
-    
   ]
 }

src/demo/navbar.vue

@@ -0,0 +1,86 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <!-- DEMO区域 -->
+        
+        <!-- DEMO代码 -->
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return{
+            direction: 'h',
+            boundary: {top: 50, bottom: 20, left: 0, right: 0},
+            isSide: false,
+            demo1:`<nut-drag direction="h"></nut-drag>`,
+            demo2:`<nut-drag :boundary="{top: 20, bottom: 20}"></nut-drag>`,
+            demo3:`<nut-drag :isSide="false"></nut-drag>`,
+        }
+    },
+    methods:{
+        changeMove(x, e){
+            let dom = e.currentTarget;
+            let siblings = dom.parentElement.children;
+            this.removeClass(siblings);
+            dom.classList.add('curr');
+            this.direction = x;
+        },
+        changeBoundary(x, e){
+            let dom = e.currentTarget;
+            let siblings = dom.parentElement.children;
+            this.removeClass(siblings);
+            dom.classList.add('curr');
+            if (x=='y') {
+                this.boundary = {top: 50, bottom: 20, left: 0, right: 0};
+            }else{
+
+                this.boundary = {top: 50, bottom: 0, left: 0, right: 0};
+            }
+            
+        },
+        changeSide(b, e){
+            let dom = e.currentTarget;
+            let siblings = dom.parentElement.children;
+            this.removeClass(siblings);
+            dom.classList.add('curr');
+            dom.classList.add('curr');
+            this.isSide = b;
+        },
+        removeClass(siblings){  //去除同级的class
+            for ( let i in siblings) {
+                if (siblings.hasOwnProperty(i) === true){
+                    siblings[i].className = 'button-primary';
+                }
+            }
+        },
+    }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.button-primary{
+    display: inline-block;
+    height: 38px;
+    padding: 0 10px;
+    color: #555;
+    text-align: center;
+    font-size: 12px;
+    line-height: 38px;
+    text-decoration: none;
+    white-space: nowrap;
+    background-color: transparent;
+    border-radius: 3px;
+    border: 1px solid #bbb;
+    cursor: pointer;
+    box-sizing: border-box;
+    &.curr{
+        background-color: #33C3F0;
+        border-color: #33C3F0; 
+        color: #fff;
+    }
+}
+</style>

src/package/navbar/index.js

@@ -0,0 +1,7 @@
+import NavBar from './src/navbar.vue';
+
+NavBar.install = function(Vue) {
+  Vue.component(NavBar.name, NavBar);
+};
+
+export default NavBar

src/view/navbar.vue

@@ -0,0 +1,376 @@
+<template>
+  <div id="nut-drag" class="nut-drag" @touchstart="touchStart($event)" >
+    <div v-if="!visible"  class="navBtn_open" @click="openBtnClick($event)"></div>
+    <div class="foot-box-wrapper" v-if="visible">
+        <div class="foot-box">
+            <router-link to="/index">
+                <a  href="javascript:void(0)" :class="{'active': currChoose == 0}">
+                    <i class="foot-home"></i>
+                    <span>首页</span>
+                </a>
+            </router-link>
+            <router-link to="/Categroy" v-if="cIndex==0">
+                <a  href="javascript:void(0)" :class="{'active': currChoose == 1}">
+                    <i class="foot-categroy"></i>
+                    <span>分类</span>
+                </a>
+            </router-link>
+            <router-link to="/categroy-normal" v-else>
+                <a  href="javascript:void(0)" :class="{'active': currChoose == 1}">
+                    <i class="foot-categroy"></i>
+                    <span>分类</span>
+                </a>
+            </router-link>
+            <router-link to="/cart">
+                <a href="javascript:void(0)" :class="{'active': currChoose == 2}">
+                    <i class="foot-cart"></i>
+                    <span>购物车</span>
+                </a>
+            </router-link>
+            <router-link to="/my-welfare">
+                <a href="javascript:void(0)"  :class="{'active': currChoose == 3}">
+                    <i class="foot-me"></i>
+                    <span>我的</span>
+                </a>
+            </router-link>
+            <a href="javascript:void(0)" >
+                <i class="navBtn-close" @click="closeBtnClick($event)"></i>
+            </a>
+        </div>
+    </div>
+</div>
+</template>
+<script>
+export default {
+  name: "nut-navBtn",
+  props: {
+    // visible: {
+    //   type: Boolean,
+    //   default: false
+    // },
+    currChoose: {
+      type: Number,
+      default: 0
+    },
+    isSide: {
+      type: Boolean,
+      default: true
+    },
+    unit: {
+      type: String,
+      default: "px"
+    },
+    direction: {
+      type: String,
+      default: "h"
+    },
+    // width: {
+    //   type: [Number, String],
+    //   default: 45
+    // },
+    height: {
+      type: [Number, String],
+      default: 45
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 11
+    },
+    opacity: {
+      type: [Number, String],
+      default: 1
+    },
+    boundary: {
+      type: Object,
+      default: function() {
+        return {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 50
+        };
+      }
+    },
+    callback: {
+      type: Function,
+      default: function() {
+        return function() {};
+      }
+    },
+    href: {
+      //调转链接
+      type: String
+    }
+    // 'bgColor':{
+    //     type:String,
+    //     default:'rgba(0,0,0,.5)'
+    // },
+    // 'closeOnClickModal': {
+    //     type: Boolean,
+    //     default: true
+    // }
+  },
+  data() {
+    return {
+      width: null,
+      // boundary: {
+      //   top: 0,
+      //   left: 0,
+      //   right: 0,
+      //   bottom:50
+      // },
+      visible: false,
+      elWidth: 0,
+      elHeight: 0,
+      screenWidth: 0,
+      screenHeight: 0,
+      startTime: null,
+      endTime: null,
+      startTop: 0,
+      startLeft: 0
+    };
+  },
+  methods: {
+    openBtnClick() {
+      this.visible = true;
+    },
+    closeBtnClick() {
+      this.visible = false;
+      this.boundary.right = null;
+    },
+    // drag中的方法
+    getElementInfo() {
+      let el = document.querySelector(".nut-drag");
+      let domElem = document.documentElement;
+      this.elWidth = el.offsetWidth;
+      this.elHeight = el.offsetHeight;
+      this.screenWidth = domElem.clientWidth;
+      this.screenHeight = domElem.clientHeight;
+      let distance = this.screenWidth - this.elWidth - el.offsetLeft;
+      el.style.zIndex = this.zIndex;
+      el.style.opacity = this.opacity;
+      el.style.width = this.width + this.unit;
+      el.style.height = this.height + this.unit;
+      if (this.boundary.left != 0) {
+        el.style.left = this.boundary.left + "px";
+      } else {
+        el.style.right = this.boundary.right + "px";
+      }
+      if (this.boundary.top != 0) {
+        el.style.top = this.boundary.top + "px";
+      } else {
+        el.style.bottom = this.boundary.bottom + "px";
+      }
+    },
+    touchStart(e) {
+      let target = e.currentTarget;
+      this.startTime = new Date();
+      this.startTop = target.offsetTop;
+      this.startLeft = target.offsetLeft;
+      target.addEventListener("touchmove", this.touchMove, false);
+      target.addEventListener("touchend", this.touchEnd, false);
+    },
+    touchMove(e) {
+      // e.preventDefault();
+      let target = e.currentTarget;
+      if (e.targetTouches.length == 1) {
+        let touch = e.targetTouches[0];
+        let currX = touch.clientX;
+        let currY = touch.clientY;
+        let rightLocation =
+          this.screenWidth - this.elWidth - this.boundary.right;
+        if (Math.abs(currX) > rightLocation) {
+          currX = rightLocation;
+        } else if (currX <= this.boundary.left) {
+          currX = this.boundary.left;
+        }
+        if (currY < this.elHeight / 2 + this.boundary.top) {
+          currY = this.elHeight / 2 + this.boundary.top;
+        } else if (
+          currY >
+          this.screenHeight - this.elHeight - this.boundary.bottom
+        ) {
+          currY = this.screenHeight - this.elHeight / 2 - this.boundary.bottom;
+        }
+        if (this.direction != "h") {
+          target.style.left = currX + this.unit;
+        }
+        if (this.direction != "v") {
+          target.style.top = currY - this.elHeight / 2 + this.unit;
+        }
+      }
+    },
+    touchEnd(e) {
+      // e.preventDefault();
+      let target = e.currentTarget;
+      this.endTime = new Date();
+      let touch = e.changedTouches[0];
+      let currX = touch.clientX;
+      let currY = touch.clientY;
+      let distanceTime = this.endTime - this.startTime;
+      let distanceX = currX - this.startLeft;
+      let distanceY = currY - this.startTop;
+      if (distanceTime > 500 && distanceTime < 2000) {
+        // if(this.visible){
+        //   this.closeBtnClick();
+        // }else{
+        //   this.openBtnClick();
+        // }
+      }
+      let rightLocation = this.screenWidth - this.elWidth - this.boundary.right;
+      if (this.isSide) {
+        if (currX > rightLocation) {
+          currX = rightLocation;
+        } else if (currX < this.boundary.left) {
+          currX = this.boundary.left;
+        } else {
+          currX =
+            currX < this.screenWidth / 2 + this.elWidth / 2
+              ? this.boundary.left
+              : rightLocation;
+        }
+        if (currY < this.elHeight / 2 + this.boundary.top) {
+          currY = this.elHeight / 2 + this.boundary.top;
+        } else if (
+          currY >
+          this.screenHeight - this.elHeight - this.boundary.bottom
+        ) {
+          currY = this.screenHeight - this.elHeight / 2 - this.boundary.bottom;
+        }
+      } else {
+        if (currX > rightLocation) {
+          currX = rightLocation;
+        } else if (currX < this.boundary.left) {
+          currX = this.boundary.left;
+        }
+        if (currY < this.elHeight / 2 + this.boundary.top) {
+          currY = this.elHeight / 2 + this.boundary.top;
+        } else if (
+          currY >
+          this.screenHeight - this.elHeight - this.boundary.bottom
+        ) {
+          currY = this.screenHeight - this.elHeight / 2 - this.boundary.bottom;
+        }
+      }
+      if (this.direction != "h" && Math.abs(distanceX) > 20) {
+        target.style.left = currX + this.unit;
+      }
+      if (this.direction != "v" && Math.abs(distanceY) > 20) {
+        target.style.top = currY - this.elHeight / 2 + this.unit;
+      }
+    }
+  },
+  computed: {
+    cIndex() {
+      return this.$store.state.cIndex;
+    }
+  },
+  watch: {},
+  mounted() {
+    this.$nextTick(() => {
+      this.getElementInfo();
+    });
+  }
+};
+</script>
+<style lang="scss" scoped>
+// @import '../asset/css/common.scss';
+.nut-drag {
+  position: fixed;
+  // bottom: 0.5rem;
+}
+.navBtn_open {
+  width: 0.41rem;
+  height: 0.41rem;
+  opacity: 1;
+  background-image: url("../asset/img/nav.png");
+  background-size: 0.4rem 0.4rem;
+  // position: fixed;
+  // right: 0.2rem;
+  bottom: 0.5rem;
+  // 兼容的处理iphoeX
+  bottom: calc(0.4rem + constant(safe-area-inset-bottom));
+  bottom: calc(0.4rem + env(safe-area-inset-bottom));
+}
+$warmGrey: rgb(153, 153, 153);
+@mixin bgpic($bgw, $bgh) {
+  width: $bgw;
+  height: $bgh;
+  background-size: $bgw $bgh;
+}
+.foot-box-wrapper {
+  width: 100%;
+  height: 0.65rem;
+  // calc动态计算长度值，safe-area-inset-bottom适配iphoneX
+  height: calc(0.65rem + constant(safe-area-inset-bottom));
+  height: calc(0.65rem + env(safe-area-inset-bottom));
+}
+.foot-box {
+  display: border-box;
+  max-width: 640px;
+  width: 3.55rem;
+  height: 0.65rem;
+  // position: fixed;
+
+  margin: 0 0.1rem;
+  // 适配iphoneX,前面的小数和高度有关
+  height: calc(0.65rem + constant(safe-area-inset-bottom));
+  height: calc(0.65rem + env(safe-area-inset-bottom));
+  border-top: 1px solid #d7d7d7;
+  display: flex;
+  background: #fdfdfd;
+  border-radius: 0.4rem;
+  padding: 0 0.1rem;
+  a {
+    flex: 1;
+    flex-direction: column;
+    display: flex;
+    height: 0.65rem;
+    align-items: center;
+    justify-content: center;
+    .foot-home {
+      @include bgpic(0.25rem, 0.25rem);
+      background-image: url("../asset/img/tabHomeNormal.png");
+    }
+    .foot-categroy {
+      @include bgpic(0.25rem, 0.25rem);
+      background-image: url("../asset/img/tabCategoryNormal.png");
+    }
+    .foot-cart {
+      @include bgpic(0.25rem, 0.25rem);
+      background-image: url("../asset/img/tabCartNormal.png");
+    }
+    .foot-me {
+      @include bgpic(0.25rem, 0.25rem);
+      background-image: url("../asset/img/tabMeNormal.png");
+    }
+    .navBtn-close {
+      @include bgpic(0.45rem, 0.45rem);
+      background-image: url("../asset/img/floatingClose.png");
+    }
+    span {
+      color: $warmGrey;
+      margin-top: 0.04rem;
+      font-size: 10px;
+    }
+  }
+  .active {
+    .foot-home {
+      background-image: url("../asset/img/tabHomeSelected.png");
+    }
+    .foot-categroy {
+      @include bgpic(0.21rem, 0.21rem);
+      background-image: url("../asset/img/tabCategorySelected.png");
+    }
+    .foot-cart {
+      background-image: url("../asset/img/tabCartSelected.png");
+    }
+    .foot-me {
+      background-image: url("../asset/img/tabMeSelected.png");
+    }
+    span {
+      color: #ec3b26;
+    }
+  }
+}
+</style>