前端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'
			}

实现效果

差不多是这样的效果

相关推荐
Hilaku2 分钟前
前端的技术判断力是怎么练出来的?
前端·javascript·程序员
悠仁さん5 分钟前
【C++】set map 使用
java·前端·c++
用户093671755417 分钟前
用 4500 行 TypeScript 复刻了童年方格纸上的海战棋
前端·vue.js
CCIE-Yasuo11 分钟前
网络安全-学习web开发-基础概念、常用标签
前端·学习
凉介川17 分钟前
给 DeepSeek Harness 写插件:按扩展名接管 Windows 右键打开
前端
涛涛ing17 分钟前
Pretext之后,2026年的前端正在被“平台”和“AI”同时重写
前端
Csvn1 小时前
Worker 与 OffscreenCanvas
前端
Csvn1 小时前
图片字体
前端
m0_738120721 小时前
JWT 安全从入门到实战:六种典型攻击场景解析
前端·网络·python·安全·网络安全
miofly1 小时前
GitHub 今日推荐|floorplan:AI 读代码自动画交互式架构地图
javascript·开源·github