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

实现效果

差不多是这样的效果

相关推荐
IT_陈寒22 分钟前
Java性能优化完全指南
前端·人工智能·后端
电子IT笔记28 分钟前
对接群晖NAS,上传和删除踩坑记录
前端·后端
计算机魔术师32 分钟前
半年前说不缺钱,半年后150亿美元超募
前端
用户57084625744034 分钟前
自动化发布器里最贵的 Bug:返回成功,但什么都没发生
前端
爱吃馒头不吃辣39 分钟前
加一道题,改一天代码:题库即数据的降维打击
前端·架构
aiks_yuan42 分钟前
Requestly规则使用技巧:前端联调、接口Mock与网络请求调试实战
前端
程序员老赵1 小时前
Docker 部署 MaxKB:轻松搭建企业级智能体平台
前端·docker·agent
码林鼠1 小时前
flutter状态管理入门教程-Riverpod
开发语言·javascript·flutter
踩蚂蚁1 小时前
输入关键词到离线模型:从 Wake Word 到多关键词 KWS 的一条工程链路
前端
互影派1 小时前
分享:Cocos 互动影游一套代码双端分发(Web H5 + Windows/Steam)实践
javascript