前端Vue uView 组件<u-search> 自定义右侧搜索按钮样式

前言

uView 文档的效果不是ui设计的样式 需要重新编辑

  • 原效果

ui设计效果

解决方案

设置里说明的需要传一个样式对象

这个对象 需要写在 script 标签里面

这里需要遵循驼峰命名 比如font-size 改为 fontSize

lineHeight和textAlign为水平锤子居中效果

css 复制代码
searchStyle: {
			background: '#F62F33',
			width: '105rpx',
			height: '60rpx',
			borderRadius: '30rpx',
			fontSize: '28rpx',
			color: '#FFFFFF',
			lineHeight:'60rpx',
			textAlign:'center'
			}

实现效果

差不多是这样的效果

相关推荐
jay神2 分钟前
基于 Python + Flask + Vue 的校内求职互助平台
前端·vue.js·后端·python·flask·毕业设计
2501_940041747 分钟前
从跑酷到实时联机:5个能直接用的Web游戏开发需求
前端
RANxy13 分钟前
零基础全栈 React 入门(三):状态管理与事件处理
前端
Csvn15 分钟前
前端调试技巧
前端
右耳朵猫AI15 分钟前
React技术周刊 2026年第20周
前端·react.js·前端框架
问心无愧051317 分钟前
ctf show web入门58
前端·笔记
七夜zippoe18 分钟前
OpenClaw Canvas 执行:JavaScript 注入实战
开发语言·javascript·udp·canvas·openclaw
zzx2006__23 分钟前
JavaScript最终考核
开发语言·前端·javascript
用户44455436542628 分钟前
Android跑马灯控件
前端
光影少年38 分钟前
react全局状态、局部状态、服务端状态如何选型
前端·react.js·掘金·金石计划