软键盘回车触发搜索

这样安卓的就可以看到回车键变成了“搜索” 二字，而且直接敲回车也是可以调搜索事件的。

1. input的type改为search，再写keydown按下时的事件调取搜索事件的方法，

但是问题是，ios系统，虽然可以敲回车调事件，但是回车键仍然是“换行”二字，并没有变成“搜索”二字。那么解决这个问题 就需要加上第2和3步

2. input 外面套form，必须要有action，action=“javascript:return true”
3. 表单提交阻止默认提交事件，（methods加上阻止事件）

<template>
	<div>
	  <img src="../../assets/img/fdj.png" alt="">
	  <form @submit.prevent="formSubmit" action="javascript:return true">
	  	<input type="search" v-model="content" @keydown="handleCarriage($event)">
	  </form>
	  <span @click="search()">搜索</span>
	</div>
</template>

methods:{
    
    
  //兼容ios
  formSubmit () {
    
    
    return false
  }
  search(){
    
    
    alert("你想搜索")    //这里是搜索事件的方法内容 
  }
  handleCarriage(ev){
    
    
    if(ev.keyCode == 13) {
    
      //键盘回车的编码是13
      this.search();
    }
  },
}

客服聊天框自动滚到底部

通过ref给元素注册引用信息，唯一id

<div :style="{
  width: '100%',
  overflowY: 'auto',
  height: RollHeight,
  background: '#f8f9ff',
}" ref= "chatRoom">内容...</div>

data() {
    
    
  return {
    
    
  	RollHeight: document.body.offsetHeight + "px",//动态高度
  }
},
mounted() {
    
    
    //页面挂载完成时调用
    this.scrollToBottom()
},
updated() {
    
    
    //页面更新后调用
    this.scrollToBottom()
},

methods: {
    
    
  scrollToBottom() {
    
    
      // 聊天定位到底部
      let chatRoom = this.$refs.chatRoom    //通过$refs获取到该元素
      chatRoom.scrollTop = chatRoom.scrollHeight
      console.log('聊天定位到底部！')
    }
}

Navbar顶部组件封装

创建Navbar.vue

<template>
  <div id="NavBar">
    <van-nav-bar :title="title" :left-arrow="isleftarrow" @click-left="onClickLeft" />
  </div>
</template>
<script>
export default {
      
      
  // title：用来显示导航栏的title，isleftarrow用来显示导航栏的左侧返回箭头
  props: ["title","isleftarrow"],
  methods: {
      
      
    onClickLeft() {
      
      
      // 点击回退的时候当做地址回退
      this.$router.go(-1);
    }
  }
};
</script>
<style scoped>
#NavBar {
      
      
  position: fixed;
  top: 0;
  left: 0;
  height: 46px;
  line-height: 46px;
  width:100%;
  z-index: 100;
}
.van-nav-bar{
      
      
  font-size: 18px!important;
  /* 设置导航栏的渐变色 */
  background: linear-gradient(to right, #ff2e29, #fe6e49)!important;
  background: -webkit-linear-gradient(to right, #ff2e29, #fe6e49)!important;
  border:0;
}
.van-hairline--bottom::after {
      
      
     /* 去除导航栏底部的白色横线 */
    border-bottom-width: 0px!important;
}
</style>

main.js 全局导入组件

import {
    
     NavBar } from 'vant';
Vue.use(NavBar);

router.js 设置meta

routes: [
  {
    
    
    path: '/apply',
    name: 'apply',
    meta: {
    
     title: '导航标题1', isleftarrow:true  },
    component: Apply
  },
  {
    
    
    path: '/',
    name: 'exhibition',
    meta: {
    
     title: '导航标题2', isleftarrow:false },
    component: Exhibition
  }
]

App.vue 根文件使用

<template>
  <div id="app">
    <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"></NavBar>
    <router-view />
  </div>
</template>
<script>
import NavBar from "@/components/NavBar.vue";
export default {
      
      
  components: {
      
      
    NavBar,
  },
  data() {
      
      
    return {
      
      
      title: "",
      isleftarrow: "",
      transitionName: "fade",
      navShow: true,
    };
  },
  mounted() {
      
      
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  watch: {
      
      
    $route(to, from) {
      
      
      this.title = to.meta.title;
      this.isleftarrow = to.meta.isleftarrow;
    },
  },
};
</script>

客服悬浮球组件

LevitatedSphere.vue

<!--悬浮球-->
<template>
  <div
    ref="floatDrag"
    class="float-position"
    :style="{ left: left + 'px', top: top + 'px', zIndex: zIndex }"
    @touchmove.prevent
    @mousemove.prevent
    @mousedown="mouseDown"
    @mouseup="mouseUp"
  >
    <svg
      t="1686539465231"
      class="icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="6952"
      width="200"
      height="200"
    >
      <path
        d="M92.330423 512.975238c0 229.595429 185.977905 415.768381 415.548952 416.012191 229.546667 0.24381 415.939048-185.514667 416.426667-415.085715 0.512-229.571048-185.051429-416.158476-414.598095-416.914285A415.548952 415.548952 0 0 0 92.281661 512.999619z"
        fill="#D5E7FF"
        p-id="6953"
      ></path>
      <path
        d="M511.048899 64.999619c205.531429 4.242286 383.512381 143.11619 436.638476 340.675048a148.675048 148.675048 0 0 1 75.288381 139.751619c0 61.513143-26.89219 114.44419-66.876952 135.923809l-20.577524 60.074667c-40.862476 120.393143-151.893333 204.409905-280.429714 216.941714a45.202286 45.202286 0 0 1-43.52 33.645714 45.372952 45.372952 0 0 1-45.104762-45.665523c0-12.117333 4.754286-23.722667 13.214476-32.280381a44.860952 44.860952 0 0 1 31.890286-13.360762c17.798095 0 33.206857 10.435048 40.521143 25.6 119.832381-11.385905 223.451429-89.624381 261.461333-201.923048l11.53219-33.304381c-2.974476 0.316952-6.022095 0.487619-9.094095 0.487619V421.205333c-47.542857-184.880762-213.138286-315.587048-404.967619-319.683047-191.683048 4.144762-357.083429 134.875429-404.48 319.683047v270.823619C46.44547 691.541333 0.511756 626.249143 0.511756 545.401905a149.138286 149.138286 0 0 1 74.386286-139.751619c53.052952-197.38819 230.790095-336.213333 436.175238-340.675048z"
        fill="#87B2FF"
        p-id="6954"
      ></path>
      <path
        d="M529.139566 288.572952a600.30781 600.30781 0 0 1 210.724571 30.232381c50.41981 19.358476 92.257524 39.69219 92.257524 77.385143v68.949334c0 43.641905-50.41981 78.872381-111.908571 78.87238H336.042423c-61.513143 0-111.908571-35.230476-111.908572-78.87238V396.190476c0-37.692952 44.373333-55.53981 94.768762-77.360762a569.58781 569.58781 0 0 1 210.236953-30.256762z m-65.706667 28.330667l-55.393524 107.76381-84.772571 12.824381 100.376381 3.632761 39.204571-65.170285 72.070095 132.949333 58.09981-101.351619 28.501333 34.304 85.74781-4.096-75.093334-12.068571-40.71619-64.853334-57.197714 92.550095-70.826667-136.484571z"
        fill="#87B2FF"
        p-id="6955"
      ></path>
    </svg>
  </div>
</template>

<script>
export default {
      
      
  name: "DragBall",
  props: {
      
      
    distanceRight: {
      
      
      type: Number,
      default: 0,
    },
    distanceBottom: {
      
      
      type: Number,
      default: 100,
    },
    isScrollHidden: {
      
      
      type: Boolean,
      default: false,
    },
    isCanDraggable: {
      
      
      type: Boolean,
      default: true,
    },
    zIndex: {
      
      
      type: Number,
      default: 50,
    },
    value: {
      
      
      type: String,
      default: "悬浮球！",
    },
  },

  //data 域
  data() {
      
      
    return {
      
      
      clientWidth: null,
      clientHeight: null,
      left: 0,
      top: 0,
      timer: null,
      currentTop: 0,
      mousedownX: 0,
      mousedownY: 0,
    };
  },
  created() {
      
      
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
  },
  mounted() {
      
      
    this.isCanDraggable &&
      this.$nextTick(() => {
      
      
        this.floatDrag = this.$refs.floatDrag;
        // 获取元素位置属性
        this.floatDragDom = this.floatDrag.getBoundingClientRect();
        // 设置初始位置
        this.left =
          this.clientWidth - this.floatDragDom.width - this.distanceRight;
        this.top =
          this.clientHeight - this.floatDragDom.height - this.distanceBottom;
        this.initDraggable();
      });
    this.isScrollHidden && window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize", this.handleResize);
  },
  methods: {
      
      
    /**
     * 设置滚动监听
     * 设置滚动时隐藏悬浮按钮，停止时显示
     */
    handleScroll() {
      
      
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
      
      
        this.handleScrollEnd();
      }, 200);
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.left > this.clientWidth / 2) {
      
      
        // 判断元素位置再左侧还是右侧
        this.left = this.clientWidth + this.floatDragDom.width;
      } else {
      
      
        this.left = -this.floatDragDom.width;
      }
    },
    /**
     * 滚动结束
     */
    handleScrollEnd() {
      
      
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop === this.currentTop) {
      
      
        console.log(this.left);
        if (this.left > this.clientWidth / 2) {
      
      
          // 判断元素位置再左侧还是右侧
          this.left = this.clientWidth - this.floatDragDom.width;
        } else {
      
      
          this.left = 0;
        }
        clearTimeout(this.timer);
      }
    },
    /**
     * 窗口resize监听
     */
    handleResize() {
      
      
      this.clientWidth = document.documentElement.clientWidth;
      this.clientHeight = document.documentElement.clientHeight;
      this.checkDraggablePosition();
    },
    /**
     * 初始化draggable
     */
    initDraggable() {
      
      
      this.floatDrag.addEventListener("touchstart", this.toucheStart);
      this.floatDrag.addEventListener("touchmove", (e) => this.touchMove(e));
      this.floatDrag.addEventListener("touchend", this.touchEnd);
    },
    mouseDown(e) {
      
      
      const event = e || window.event;
      this.mousedownX = event.screenX;
      this.mousedownY = event.screenY;
      const that = this;
      let floatDragWidth = this.floatDragDom.width / 2;
      let floatDragHeight = this.floatDragDom.height / 2;
      if (event.preventDefault) {
      
      
        event.preventDefault();
      }
      this.canClick = false;
      this.floatDrag.style.transition = "none";
      document.onmousemove = function (e) {
      
      
        var event = e || window.event;
        that.left = event.clientX - floatDragWidth;
        that.top = event.clientY - floatDragHeight;
        if (that.left < 0) that.left = 0;
        if (that.top < 0) that.top = 0;
        if (that.left >= that.clientWidth - floatDragWidth * 2) {
      
      
          that.left = that.clientWidth - floatDragWidth * 2;
        }
        if (that.top >= that.clientHeight - floatDragHeight * 2) {
      
      
          that.top = that.clientHeight - floatDragHeight * 2;
        }
      };
    },
    mouseUp(e) {
      
      
      const event = e || window.event;
      //判断只是单纯的点击，没有拖拽
      if (
        this.mousedownY == event.screenY &&
        this.mousedownX == event.screenX
      ) {
      
      
        this.$emit("handlepaly");
      }
      document.onmousemove = null;
      this.checkDraggablePosition();
      this.floatDrag.style.transition = "all 0.3s";
    },
    toucheStart() {
      
      
      this.canClick = false;
      this.floatDrag.style.transition = "none";
    },
    touchMove(e) {
      
      
      this.canClick = true;
      if (e.targetTouches.length === 1) {
      
      
        // 单指拖动
        let touch = event.targetTouches[0];
        this.left = touch.clientX - this.floatDragDom.width / 2;
        this.top = touch.clientY - this.floatDragDom.height / 2;
      }
    },
    touchEnd() {
      
      
      if (!this.canClick) return; // 解决点击事件和touch事件冲突的问题
      this.floatDrag.style.transition = "all 0.3s";
      this.checkDraggablePosition();
    },
    /**
     * 判断元素显示位置
     * 在窗口改变和move end时调用
     */
    checkDraggablePosition() {
      
      
      if (this.left + this.floatDragDom.width / 2 >= this.clientWidth / 2) {
      
      
        // 判断位置是往左往右滑动
        this.left = this.clientWidth - this.floatDragDom.width;
      } else {
      
      
        this.left = 0;
      }
      if (this.top < 0) {
      
      
        // 判断是否超出屏幕上沿
        this.top = 0;
      }
      if (this.top + this.floatDragDom.height >= this.clientHeight) {
      
      
        // 判断是否超出屏幕下沿
        this.top = this.clientHeight - this.floatDragDom.height;
      }
    },
  },
  beforeDestroy() {
      
      
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.handleResize);
  },
};
</script>
<style>
html,
body {
      
      
  overflow: hidden;
}
</style>
<style scoped lang="less">
.float-position {
      
      
  position: absolute;
  z-index: 10003;
  right: 0;
  top: 70%;
  width: 3.6em;
  height: 3.6em;
  background: deepskyblue;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 0px 10px 2px skyblue;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em;
  user-select: none;
}
.cart {
      
      
  border-radius: 50%;
  width: 5em;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-notice {
      
      
  display: inline-block;
  transition: all 0.3s;
  span {
      
      
    vertical-align: initial;
  }
  .notice-badge {
      
      
    color: inherit;
    .header-notice-icon {
      
      
      font-size: 16px;
      padding: 4px;
    }
  }
}
.drag-ball .drag-content {
      
      
  overflow-wrap: break-word;
  font-size: 14px;
  color: #fff;
  letter-spacing: 2px;
}
</style>

页面使用

handleCustomerService 为事件，点击悬浮图标跳转页面

<!-- 悬浮图 -->
<Floating @touchFunc="handleCustomerService"> </Floating>

<script>
import Floating from "../components/FloatingIcon.vue";
export default {
    
    
  components: {
    
     Floating },
  methods: {
    
    
    handleCustomerService() {
    
    
      this.$router.push("/customerService");
    },
  }
}
</script>