使用原生input模拟器样式正常,但是真机上 input框溢出

目录

一、问题

二、解决方法

三、总结


tiips:如嫌繁琐,直接移步总结即可!

一、问题

1.使用原生input写了一个搜索框,在模拟器和pc上一切正常。但是打包放到手机上,样式就有问题:这个搜索框的布局是正常的,但是聚焦到input上,就可以看到input明显溢出了!

二、解决方法

1.真是奇怪,我也没有写什么奇怪的东西呀。pc端和移动端的模拟器都是没有问题的。

布局就是简单的flex布局。input 框 flex:1,其余图标自适应。怎么到移动端就有问题呢?

 1)代码如下:

<template>
<!-- 搜索组件 -->
  <div :class="['search-wrap', { round: round }]">
    <template v-if="isCenterStart">
      <span class="center" @click.stop="clickCenter">
        <span class="icon left-icon" v-if="leftIcon">
          <svg-icon :iconClass="leftIcon"></svg-icon>
        </span>
        <span>{{ placeholder }}</span>
      </span>
    </template>
    <template v-else>
      <span class="icon left-icon" v-if="leftIcon">
        <svg-icon :iconClass="leftIcon"></svg-icon>
      </span>
      <input
        v-model="currentValue"
        class="input-area"
        :placeholder="placeholder"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      <span v-if="currentValue" class="icon right-icon clear-icon" @click.stop="handleClear">
        <svg-icon :iconClass="'clearInput'"></svg-icon>
      </span>
      <span v-if="rightIcon" :class="['icon', { 'right-icon': rightIcon }]">
        <svg-icon :iconClass="rightIcon"></svg-icon>
      </span>
      <slot></slot>
    </template>
  </div>
</template>
<script>
import { nextTick } from 'process';
import { defineComponent, onMounted, ref, watch, getCurrentInstance } from 'vue';
//使用的时候需要用v-model
export default defineComponent({
  props: {
    //搜索框的值
    value: {
      type: String,
      default: ''
    },
    //提示
    placeholder: {
      type: String,
      default: '请输入'
    },
    //左图标
    leftIcon: {
      type: String,
      default: 'search'
    },
    //右图标
    rightIcon: {
      type: String,
      default: ''
    },
    //是否圆角
    round: {
      type: Boolean,
      default: false
    },
    //刚开始是否居中
    isCenter: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  setup(props, { emit, slots }) {
    const { proxy } = getCurrentInstance();
    //当前输入的值
    const currentValue = ref('');
    onMounted(() => {
      currentValue.value = props.value;
    });
    //输入事件
    const handleInput = () => {
      //输入了字符再触发
      // if (currentValue.value?.trim()) {
        emit('input', currentValue.value);
      // }
    };
    //清除
    const handleClear = () => {
      currentValue.value = '';
      setCenter();
      emit('input', currentValue.value);
      emit('clear');
    };
    //聚焦
    const handleFocus = () => {
      emit('focus', currentValue.value);
    };
    //失焦
    const handleBlur = () => {
      setCenter();
      emit('blur', currentValue.value);
    };
    //初始时是否显示在中间
    const isCenterStart = ref(props.isCenter);
    const clickCenter = () => {
      isCenterStart.value = false;
      nextTick(() => {
        proxy.$el.querySelector('input')?.focus();
      });
    };
    const setCenter = () => {
      if (props.isCenter && !currentValue.value) {
        isCenterStart.value = true;
      }
    };
    watch(
      () => props.value,
      (newVal) => {
        currentValue.value = newVal;
      }
    );
    return {
      currentValue,
      handleInput,
      handleClear,
      handleFocus,
      handleBlur,
      clickCenter,
      isCenterStart
    };
  }
});
</script>
<style lang="scss" scoped>
.search-wrap {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  background: #f1f3f7;
  border-radius: 18px;
  align-items: center;
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
  }
  .right-icon {
    margin-left: 20px;
  }
  .clear-icon {
    font-size: 60px;
  }
  .input-area {
    flex: 1;
    font-size: 51px;
    line-height: 69px;
    margin-left: 36px;
    border: none;
    background: none;
    &::placeholder {
      color: #acacac;
    }
    &:focus-visible {
      outline: none;
    }
  }
}
.round {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 54px;
}
.center {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #acacac;
  font-size: 51px;
  line-height: 75px;
  transition: ease-in-out;
  span {
    margin-left: 36px;
  }
}
</style>

2.只能一个个试试到底哪个样式有问题。

3.发现注释了 最外层父盒子的 display:flex,竟然不溢出了。

4.但是吧,我确实需要用flex布局,让子元素一行显示,这样的修改显然不科学。。。

5.最后的最后发现,只需要在 input上 加上样式 width:100%;就好了。甚至flex:1`都不需要!!!!!

6.问题是解决了,但是原因真不知道。。。。。

三、总结

1.移动端怎么会有这么多奇怪的问题呢?

2.移动端确实需要在真机上测试才靠谱!

3.移动端input溢出:尝试设置input width:100%;

4.猜测可能是手机上有内置的样式,所以我们不设置的时候,使用了默认的样式,导致了最终的样式和预期不一致。(有大佬知道原因,欢迎评论区告知,非常感谢!)

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/330949.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pycharm管理仓库(Manager Repository)不见了

经常使用pycharm的大佬们都知道&#xff0c;pycharm中内置了很多库和包&#xff0c;很好用 但是下载来用自带的源很麻烦&#xff0c;于是就用国内的源 可以当我们添加管理仓库的时候&#xff0c;却没有了按钮&#xff0c;如何解决呢&#xff1f; 回到pycharm的主界面&#xf…

【C++】STL 算法 - 累加填充算法 ( 元素累加算法 - accumulate 函数 | 元素填充算法 - fill 函数 )

文章目录 一、元素累加算法 - accumulate 函数1、函数原型分析2、代码示例 二、元素填充算法 - fill 函数1、函数原型分析2、代码示例 一、元素累加算法 - accumulate 函数 1、函数原型分析 在 C 语言 的 标准模板库 ( STL , STL Standard Template Library ) 中 , 提供了 accu…

Unity3D代码混淆方案详解

背景 Unity引擎使用Mono运行时&#xff0c;而C#语言易受反编译影响&#xff0c;存在代码泄露风险。本文通过《QQ乐团》项目实践&#xff0c;提出一种适用于Unity引擎的代码混淆方案&#xff0c;以保护代码逻辑。 引言 在Unity引擎下&#xff0c;为了防止代码被轻易反编译&a…

AVL树 -- C++实现

AVL树 – C实现 1. AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下。因此&#xff0c;两位俄罗斯的数学家G.M.Adelson-Velskii和E.M.Landis在1…

组件v-model(.sync)记录使用(vue3)

示例&#xff08;演示地址&#xff09; 以下是Vue3中使用v-model实现组件的双向数据绑定的示例代码&#xff1a; 首先&#xff0c;让我们来了解一下Vue3中v-model的用法。在Vue3中&#xff0c;v-model 指令可以用于自定义组件上&#xff0c;用于实现组件的双向数据绑定。与Vue2…

为什么选择HelpLook而不是Document360:知识库工具分析

在现今的信息化时代&#xff0c;企业们越来越倾向于使用知识库工具来收集、组织和分享他们的知识资源。HelpLook和Document360是市面上两款不错的知识库管理工具。那如果非要在他们之中选一个&#xff0c;还是建议HelpLook。以下是一些对比分析&#xff0c;希望可以给大家提供参…

Python通过HTTP代理进行数据传输

在Python中&#xff0c;HTTP代理是一种常用的技术&#xff0c;用于控制和修改HTTP请求和响应。通过使用HTTP代理&#xff0c;我们可以更好地控制网络请求的行为&#xff0c;提高安全性、隐私性和效率。下面我们将详细介绍如何在Python中使用HTTP代理进行数据传输。 一、设置HT…

tinyxml2

使用tinyxml2&#xff0c;得知道一些xml基础 xml tutorial--菜鸟 tinyxml2类对象 链接 结构 XMLNode 什么是节点 节点&#xff1a;元素、声明、文本、注释等。 XMLDocument xml文档(文件)对象。 作用&#xff1a; 加载xml文件&#xff0c; tinyxml2作用 先定义两个宏 …

Elasticsearch各种高级文档操作

本文来记录下Elasticsearch各种文档操作 文章目录 初始化文档数据查询所有文档匹配查询文档关键字精确查询文档多关键字精确查询文档字段匹配查询文档指定查询字段查询文档过滤字段查询文档概述指定想要显示的字段示例指定不想要显示的字段示例 组合查询文档范围查询文档概述使…

Redis+lua 解决秒杀超卖问题

商品超卖的原因是在高并发场景下,业务层面扣库存和库存的判断会出现并发情况&#xff0c;但是使用lua 脚本&#xff0c;就会避免超卖的发生。 1.在项目resources文件夹创建一个名为 stock.lua的脚本 if (redis.call(hexists, KEYS[1], KEYS[2]) 1) thenlocal stock tonumber…

HarmonyOS—构建第一个ArkTS应用(Stage模型)

创建ArkTS工程 构建第一个页面 若首次打开DevEco Studio&#xff0c;请点击Create Project创建工程。如果已经打开了一个工程&#xff0c;请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发&#xff0c;选择模板“Empty Ability”&am…

Intel Quartus II IP之DP1.4 工程的创建与使用

前述&#xff1a; Win10电脑安装了Quartus 21.4&#xff0c;这可以满足绝大多数工程&#xff0c;特别是对于简单调用fifo/ram等的工程&#xff0c;但是想要学习Quartus的HDMI/DP等高速接口类IP&#xff0c;首先需要创建HDMI/DP IP的设计demo工程&#xff0c;此时还需要安装Ecl…

android studio从空白开始

对我来说&#xff0c;真正的第一步是清理电脑C盘。从剩余8G清理到25G&#xff0c;把原来看不顺眼又不敢删的文件夹和软件全删了&#xff0c;删爽了的后果就是&#xff0c;用两天的时间在把一些环境配置慢慢装回来&#xff0c;node.js&#xff0c;jdk&#xff0c;npm。努力把它们…

SG3225HBN(晶体振荡器)

SG3225HBN晶体振荡器是一款低抖动、HCSL输出晶振&#xff0c;频率范围100MHz ~ 325MHz&#xff0c;3.2 2.5 1.05mm封装常规有源晶振&#xff0c;具有小尺寸&#xff0c;高稳定性&#xff0c;可以在G&#xff1a;-40℃至 85℃&#xff0c;H&#xff1a;-40℃至 105℃ 的温度内…

网页版短信平台主要功能有哪些|短信系统开发搭建源码

网页版短信平台主要功能有哪些|短信系统开发搭建源码 网页版短信平台是一种方便用户进行在线短信管理和发送的工具。它具有多项实用的功能&#xff0c;使用户能够更高效地进行短信通讯。以下是网页版短信平台的主要功能&#xff1a; 1. **短信发送和接收&#xff1a;** 用户可…

linux第一个小程序 --- 进度条【简洁】

行缓冲区的概念 结果&#xff1a;先输入hello world然后休眠三秒后结束 当去掉’\n“ 后&#xff0c;结果就变成了先休眠三秒&#xff0c;然后打印hello world后结束。 该现象就证明了缓冲区的存在。 当缓冲区中遇到’‘\n’或者缓冲区被写满后才会被打印出来&#xff0c;在第…

vue2项目导入高德地图

1、看官网新手入门链接导入原生高德地图&#xff1a; 展示地图-入门教程-地图 JS API 2.0 | 高德地图API 2、uniapp开发h5&#xff0c;使用map组件&#xff0c;使用高德地图&#xff1a; 在配置文件中配置地图为高德&#xff0c;&#xff08;默认使用的是腾讯&#xff09;&am…

港科夜闻|香港科大团队研发多功能,可重构和抗破坏单线感测器阵列

关注并星标 每周阅读港科夜闻 建立新视野 开启新思维 1、香港科大团队研发多功能、可重构和抗破坏单线感测器阵列。研究人员开发出一种受人类听觉系统启发的感测器阵列设计技术。透过模仿人耳根据音位分布来区分声音的能力&#xff0c;这种新型感测器阵列方法可能优化感测器阵列…

SpringBoot-基础篇

学了好久springBoot但是每一次使用都没有一个固定的方法或者是代码的模版&#xff0c;于是乎使用的时候吗&#xff0c;每次都会遇到很多的问题&#xff0c;所以&#xff0c;总结一篇博客用于日后方便自己开发使用&#xff0c;其中包含项目创建&#xff0c;坐标导入&#xff0c;…

一篇综述洞悉医学大型语言模型的原理,应用和挑战

在过去的一年中&#xff0c;随着 GPT-4、LLaMA、Mistral&#xff0c;PaLM 等先进技术的突飞猛进&#xff0c;大型语言模型&#xff08;Large Language Models&#xff09;已经引领全球人工智能进入了一个全新的基础模型时代&#xff0c;这一时代不仅开启了技术创新的新篇章&…