Vue 输入框样式定制（圆角 / 特殊样式 / 场景化）

最新推荐文章于 2025-11-21 22:15:40 发布
原创 最新推荐文章于 2025-11-21 22:15:40 发布 · 20 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #javascript

Vue 中输入框（<input>/<textarea>）的样式定制核心是 CSS 样式 + Vue 动态绑定，以下覆盖「基础圆角输入框」「不同风格输入框（渐变 / 磨砂 / 搜索框）」「场景化输入框（验证码 / 密码 / 多行文本）」，适配 Vue2/Vue3，支持 <script setup> 和选项式 API。

一、基础圆角输入框（常用）

核心通过 CSS 的 border-radius 控制圆角，搭配 border/padding/focus 优化交互，Vue 中可封装为通用组件复用。

1. 基础圆角输入框组件（Vue3 + <script setup>）

vue

<!-- components/InputRound.vue -->
<template>
  <div class="input-wrapper">
    <!-- 基础输入框 -->
    <input
      type="text"
      class="round-input"
      :placeholder="placeholder"
      v-model="inputValue"
      @input="$emit('update:modelValue', inputValue)"
    />
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

// 声明Props（支持自定义占位符、初始值）
const props = defineProps({
  placeholder: {
    type: String,
    default: '请输入内容'
  },
  modelValue: {
    type: String,
    default: ''
  }
});

// 声明事件（双向绑定）
const emit = defineEmits(['update:modelValue']);

// 本地值绑定
const inputValue = ref(props.modelValue);
</script>

<style scoped>
/* 外层容器（可选，用于统一布局） */
.input-wrapper {
  width: 300px;
  margin: 10px 0;
}

/* 圆角输入框核心样式 */
.round-input {
  /* 圆角：数值越大越圆，50%为圆形（需固定宽高） */
  border-radius: 8px; 
  /* 基础样式 */
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb; /* 浅灰色边框 */
  font-size: 14px;
  box-sizing: border-box; /* 防止padding撑大宽度 */
  outline: none; /* 清除默认聚焦外框 */
  transition: all 0.2s; /* 过渡动画 */
}

/* 聚焦状态 */
.round-input:focus {
  border-color: #409eff; /* 蓝色边框 */
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 聚焦光晕 */
}

/* 禁用状态 */
.round-input:disabled {
  background-color: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

/* 错误状态（可通过动态class绑定） */
.round-input.error {
  border-color: #ef4444;
}
</style>

2. 父组件使用

vue

<template>
  <div>
    <h3>基础圆角输入框</h3>
    <InputRound 
      placeholder="请输入用户名" 
      v-model="username" 
    />
    <!-- 错误状态示例 -->
    <InputRound 
      placeholder="请输入手机号" 
      v-model="phone" 
      :class="{ error: !phone }"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import InputRound from './components/InputRound.vue';

const username = ref('');
const phone = ref('');
</script>

3. 不同圆角效果参考

样式需求border-radius 值效果描述
轻微圆角4px/6px简约风格，适配大部分场景
明显圆角8px/12px主流移动端风格
胶囊型输入框20px/50px高度 40px 时，20px 为胶囊型
圆形输入框50%需固定宽高相等（如 40px）

二、特殊风格输入框（渐变 / 磨砂 / 搜索框）

基于基础圆角样式，扩展个性化风格，适配不同 UI 设计需求。

1. 渐变边框输入框

vue

<template>
  <div class="gradient-input-wrapper">
    <input
      type="text"
      class="gradient-input"
      placeholder="渐变边框输入框"
      v-model="value"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
</script>

<style scoped>
.gradient-input-wrapper {
  width: 300px;
  padding: 2px; /* 渐变背景的宽度 */
  background: linear-gradient(90deg, #409eff, #67c23a); /* 渐变 */
  border-radius: 8px; /* 和输入框圆角一致 */
}

.gradient-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: none; /* 隐藏默认边框 */
  border-radius: 6px; /* 比外层小2px，露出渐变边框 */
  background: #fff;
  outline: none;
  box-sizing: border-box;
}
</style>

2. 磨砂玻璃输入框（毛玻璃效果）

vue

<template>
  <div class="glass-bg"> <!-- 磨砂背景容器 -->
    <input
      type="text"
      class="glass-input"
      placeholder="磨砂玻璃输入框"
      v-model="value"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
</script>

<style scoped>
/* 背景容器 */
.glass-bg {
  width: 300px;
  padding: 20px;
  background: url('https://picsum.photos/800/400') no-repeat center;
  background-size: cover;
  border-radius: 12px;
}

/* 磨砂输入框 */
.glass-input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2); /* 半透明 */
  backdrop-filter: blur(10px); /* 磨砂核心 */
  -webkit-backdrop-filter: blur(10px); /* 兼容webkit */
  color: #fff;
  outline: none;
  font-size: 14px;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
</style>

3. 带图标的搜索输入框

vue

<template>
  <div class="search-input-wrapper">
    <svg class="search-icon" viewBox="0 0 1024 1024" width="16" height="16">
      <path fill="#9ca3af" d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.3 256.6 112 331.8 112 412c0 80.2 31.3 155.4 87.9 212.1C256.6 680.7 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C205.3 528 182 471.8 182 412s23.3-116 65.6-158.4C296 205.3 352.2 182 412 182s116 23.3 158.4 65.6C612.7 296 636 352.2 636 412s-23.3 116-65.6 158.4z"></path>
    </svg>
    <input
      type="text"
      class="search-input"
      placeholder="请输入搜索内容"
      v-model="searchValue"
    />
    <button v-if="searchValue" class="clear-btn" @click="searchValue = ''">×</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const searchValue = ref('');
</script>

<style scoped>
.search-input-wrapper {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 20px; /* 胶囊型 */
  background: #fff;
}

.search-icon {
  margin-right: 8px;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
}

.clear-btn {
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
}
</style>

三、场景化输入框（验证码 / 密码 / 多行文本）

1. 验证码输入框（6 位数字，格子样式）

vue

<template>
  <div class="code-input-wrapper">
    <input
      v-for="(item, index) in 6"
      :key="index"
      class="code-input"
      type="text"
      maxlength="1"
      v-model="codeList[index]"
      @input="handleCodeInput(index)"
      @focus="focusIndex = index"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 验证码数组
const codeList = ref(['', '', '', '', '', '']);
// 当前聚焦索引
const focusIndex = ref(0);

// 输入后自动聚焦下一个
const handleCodeInput = (index) => {
  if (codeList.value[index] && index < 5) {
    const nextInput = document.querySelectorAll('.code-input')[index + 1];
    nextInput?.focus();
  }
};

// 监听验证码完成
watch(
  () => codeList.value.join(''),
  (code) => {
    if (code.length === 6) {
      console.log('验证码输入完成：', code);
    }
  }
);
</script>

<style scoped>
.code-input-wrapper {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.code-input {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  text-align: center;
  font-size: 18px;
  outline: none;
}

.code-input:focus {
  border-color: #409eff;
}
</style>

2. 密码输入框（带显示 / 隐藏切换）

vue

<template>
  <div class="password-input-wrapper">
    <input
      :type="showPwd ? 'text' : 'password'"
      class="password-input"
      placeholder="请输入密码"
      v-model="password"
    />
    <button class="pwd-toggle-btn" @click="showPwd = !showPwd">
      {{ showPwd ? '隐藏' : '显示' }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const password = ref('');
const showPwd = ref(false);
</script>

<style scoped>
.password-input-wrapper {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 12px;
}

.password-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
}

.pwd-toggle-btn {
  width: 40px;
  height: 24px;
  border: none;
  background: #f3f4f6;
  border-radius: 4px;
  color: #666;
  font-size: 12px;
  cursor: pointer;
}
</style>

3. 多行文本输入框（textarea 圆角 + 自适应高度）

vue

<template>
  <textarea
    class="textarea-input"
    placeholder="请输入多行内容"
    v-model="content"
    :style="{ height: `${textareaHeight}px` }"
    @input="autoResize"
  ></textarea>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const content = ref('');
const textareaHeight = ref(80); // 初始高度

// 自适应高度
const autoResize = (e) => {
  // 重置高度为自动，获取滚动高度，再设置
  e.target.style.height = 'auto';
  textareaHeight.value = e.target.scrollHeight;
  // 限制最大高度
  if (textareaHeight.value > 200) {
    textareaHeight.value = 200;
  }
};

// 初始化时执行一次
onMounted(() => {
  autoResize({ target: document.querySelector('.textarea-input') });
});
</script>

<style scoped>
.textarea-input {
  width: 300px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  outline: none;
  resize: none; /* 禁用手动调整大小 */
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.textarea-input:focus {
  border-color: #409eff;
}
</style>

四、Vue 动态样式绑定（进阶）

通过 Vue 的 :class/:style 动态控制输入框样式，适配不同状态。

示例：根据状态切换输入框样式

vue

<template>
  <input
    type="text"
    v-model="value"
    :class="[
      'base-input',
      { 'input-success': isSuccess },
      { 'input-error': isError },
      { 'input-large': size === 'large' }
    ]"
    :style="{ borderRadius: radius + 'px' }"
  />
</template>

<script setup>
import { ref, computed } from 'vue';

const value = ref('');
const isSuccess = ref(false);
const isError = ref(false);
const size = ref('large');
const radius = ref(8); // 动态控制圆角

// 校验输入内容
const checkValue = () => {
  if (!value.value) {
    isError.value = true;
    isSuccess.value = false;
  } else {
    isError.value = false;
    isSuccess.value = true;
  }
};
</script>

<style scoped>
.base-input {
  width: 300px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  outline: none;
  transition: all 0.2s;
}

.input-success {
  border-color: #67c23a;
}

.input-error {
  border-color: #ef4444;
}

.input-large {
  height: 48px;
  font-size: 16px;
  border-radius: 12px;
}
</style>

五、

建议：

  1. 兼容性：backdrop-filter（磨砂）需兼容移动端，可加 -webkit- 前缀；
  2. 无障碍：输入框需加 placeholder、aria-label，聚焦状态需明显；
  3. 性能：避免频繁动态修改 border-radius 等样式（触发重绘），优先用 class 切换；
  4. 复用性：将常用输入框封装为组件（如 InputRound/InputSearch），通过 Props 控制样式；
  5. 适配：移动端输入框高度建议 44px（符合触控习惯），PC 端 36-40px。

核心：

  • 基础样式：border-radius 控制圆角，focus/disabled 优化交互；
  • 特殊样式：渐变 / 磨砂依赖 CSS 背景 / 滤镜，图标输入框依赖 Flex 布局；
  • 动态控制：通过 :class/:style 绑定 Vue 状态，适配不同场景；
  • 场景化：验证码 / 密码框需结合交互逻辑（自动聚焦 / 显示隐藏），多行文本需自适应高度。
Vue2 激活码输入框组件 - 优雅解决长序列输入需求
qq_40493736的博客
11-24 2
本文介绍了一款高度可定制的激活码输入框组件，解决了现有组件在长令牌输入、分段展示和交互功能上的不足。该组件支持自定义分段长度、分隔符和布局方向，提供复制、清空等便捷操作，并具备智能粘贴处理和实时验证功能。技术实现上支持Vue2双向绑定和CSS变量主题定制，可通过props灵活配置样式和功能。组件依赖sass预处理器和Vant2 UI库（可选），提供了详细的安装说明、配置参数和使用示例，适用于各类激活码、序列号和令牌输入场景。
【教程】这篇Vue全面教程，助力你成为前端糕手！（三）
2401_82857325的博客
11-28 1362
在 Vue 应用开发中，组件是构建整个应用的核心单元，可将其视为独立的、可复用的功能模块。每个组件都拥有自己的模板（定义组件的结构和展示内容）、脚本（包含组件的数据、方法、生命周期钩子等逻辑处理）以及样式（用于设置组件的外观风格），就如同搭建积木一般，通过合理组合不同的组件，能够高效地构建出复杂的 Vue 应用程序。
前端Javascript、Vue、CSS等场景面试题目（二）
警警的博客
11-16 1532
前端面试场景题目：Vue|HTML|CSS|JAVASCRIPT|WEBPACK
Android自定义密码输入框仿微信/支付宝教程
weixin_42509513的博客
06-29 1118
密码输入框是网站和应用程序中常见且关键的界面组件。它允许用户输入敏感信息，如密码、账号等，并通过加密手段保证数据的安全。实现密码输入框的基本功能需要掌握HTML表单元素的使用，尤其是标签的使用。这个标签类型会自动将用户输入的内容显示为圆点，从而隐藏实际输入的字符，确保隐私安全。除此之外，还需要了解前端的CSS和JavaScript，以便在用户交互过程中提供更多的自定义功能和优化体验。-- HTML示例 -->
前端面试题整理（vue/js/css）
mingwei_zhu的博客
03-21 5443
什么是盒子模型 把所有的网页元素都看成一个盒子，它具有content，padding，border，margin 四个属性，这就是盒子模型 盒子模型有两种形式：标准盒子模型，怪异盒子模型 标准模式，总宽度= width + margin(左右) + padding(左右) + border(左右) 属性：box-sizing: content-box; 怪异模式，总宽度= width + margin(左右)（即width已经包含了padding和border...
Uniapp + Vue 3 多端适配：解决不同平台（支付宝 / 百度小程序）样式差异问题
2501_93879514的博客
10-30 348
通过条件编译、动态绑定和全局重置，您可以高效解决支付宝和百度小程序的样式差异。优先使用 Uniapp 内置机制，保持样式模块化。实际开发中，建议先通过识别平台，再针对性编码。测试覆盖所有目标平台，确保一致性。如果您有具体组件问题，提供更多细节，我可以给出更针对性的代码示例。
Naive UI 主题编辑器使用：可视化定制组件样式
gitblog_00584的博客
10-10 275
你是否还在为前端组件样式调整而烦恼？手动修改CSS变量效率低下，反复刷新页面预览效果繁琐？Naive UI的主题编辑器（Theme Editor）提供了可视化解决方案，让你通过直观的界面实时调整组件样式，无需编写复杂代码即可实现品牌风格定制。本文将详细介绍如何使用这一工具，读完你将掌握：主题变量实时编辑、样式导出与导入、组件样式批量调整等实用技能。 ## 主题编辑器简介 Naive UI是一个...
知识点总结---vue/小程序/web基础知识片段总结
COCOLI_BK的博客
07-12 331
① 一个CSS相关新属性：flow-root 说明： 这个是display属性中的一个属性值：是解决子元素浮动所造成的内容塌陷的问题 即父元素中添加display:flow-root,子元素float浮动 兼容性：除了IE外的浏览器基本全都支持~ 实例： /*该浮动处理等价于下列样式代码*/ .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flo
BootstrapVue组件样式覆盖：优先级控制与自定义类
gitblog_00034的博客
10-12 321
在使用BootstrapVue开发界面时，样式定制是满足设计需求的关键环节。本文将从CSS优先级原理出发，通过具体案例讲解如何有效覆盖组件默认样式，包括变量重写、自定义类和深度选择器等技术，并提供企业级项目中的最佳实践方案。 ## 样式优先级基础与组件结构 CSS优先级决定了当多个样式规则应用于同一元素时，哪条规则最终生效。BootstrapVue组件的样式体系基于Bootstrap的Sass...
Vue 框架组件模块之布局组件深入分析(二)
Android开发领域创作者
04-01 2230
侧边栏组件通常用于提供额外的导航或功能菜单，常见于后台管理系统、博客网站等。它可以固定在页面一侧，也可以根据需要进行展开和收缩。导航功能：提供一组导航链接，方便用户访问不同的页面或功能模块。可折叠性：支持展开和收缩操作，以节省页面空间。响应式设计：在不同的屏幕尺寸下，侧边栏的显示方式应适应屏幕大小。
elmentpuls输入框样式修改
03-17
如果仅希望某些输入框具有特殊样式，则可以在模板中为这些输入框指定额外的类名，并在样式文件中对其进行定制化处理。例如： ```html <el-input v-model="inputValue" /> </div> </template> .custom-style ...
vue获取验证码倒计时组件
10-16
Vue组件是Vue.js框架中实现代码复用和模块化开发的核心单元。组件可以封装HTML、CSS和JavaScript代码，允许我们在不同的Vue应用或组件中使用它们。一个Vue组件通常包含三个部分：template(模板)、script(脚本)、...
基于Element UI和Vue的配置化组件库
8. **主题与样式定制能力**：基于Element UI的SCSS变量体系，提供主题切换功能，支持品牌色、圆角、字体等全局样式的配置化调整。 此外，该项目还体现了现代前端开发中的模块化思想——各个功能单元被拆分为独立的...
基于spring+vue把图片文件上传至阿里云oss容器并回显
2301_77170676的博客
11-21 503
本文介绍了基于Element UI的文件上传组件实现和阿里云OSS存储的后端处理。前端使用el-upload组件配置了文件上传接口、请求头、上传前后回调方法等属性。后端通过ossUtil工具类实现文件上传到阿里云OSS，包含Endpoint、AccessKey等必要配置参数，以及处理异常情况。最后通过Controller接收前端上传的文件，生成随机文件名后调用OSS工具类上传，返回文件访问URL。整个流程实现了从前端上传到云端存储的完整解决方案。
计算机毕设选题推荐：基于SpringBoot和Vue的校园智能物流管理系统
weixin_72790115的博客
11-19 612
校园智能物流管理系统摘要： 本系统基于SpringBoot和Vue技术栈开发，采用B/S架构解决高校快递管理难题。系统包含管理员、用户和快递员三种角色，实现全流程快递管理：管理员负责基础信息维护和订单监控；用户可在线寄件、预约取件及订单追踪；快递员处理快递状态更新。通过MySQL数据库保障数据可靠性，vue.js构建响应式前端界面，SpringBoot+MyBatis实现高效后端处理。系统有效优化了校园物流流程，提升了快递收发效率和信息透明度，为校园生活提供了便捷的物流服务解决方案。开发环境包括Java、I
父组件向子组件传递对象类型参数时，在子组件中修改对象的方法
SSHLY3的博客
11-20 312
Vue组件间对象参数传递规范 摘要：Vue中父组件向子组件传递对象参数时，禁止直接修改子组件Props（违反单向数据流）。推荐两种解决方案： 需同步父组件时：子组件通过defineEmits触发自定义事件，父组件监听事件并主动修改源数据； 仅子组件使用时：通过深拷贝创建对象副本进行本地修改。 对于表单场景，可使用v-model语法糖简化双向绑定。注意：嵌套对象修改需保持引用完整，深拷贝推荐JSON.parse(JSON.stringify)或lodash.clonedeep。始终遵循"子通知、父修
Vue3 setup 语法糖 和 响应式处理
dlmyrt的博客
11-20 218
setup 语法糖是 Vue3 组合式 API 的简化写法，通过<script setup>标签省略重复代码，直接在脚本内编写组合式 API 逻辑，大幅提升开发效率。
vue 3中 路由的配置方法
laocooon的博客
11-20 159
这是一个使用Vue 3构建的单页面应用(SPA)，配置了路由功能。代码展示了如何创建Vue应用并设置三个路由页面：首页(HomePage)、新闻页(NewsPage)和关于页(AboutPage)。通过vue-router实现页面导航，使用RouterLink组件进行页面跳转，RouterView组件显示当前路由内容。应用包含基础CSS样式，主要内容区域设置了背景色和边框样式。整个示例演示了Vue 3的组合式API和路由配置的基本用法。
Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
最新发布
zeijiershuai的博客
11-21 555
Vue 工程化Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值