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

实现效果

差不多是这样的效果

相关推荐
Soulkey18 分钟前
复刻小红书Web端打开详情过渡动画
前端
yuki_uix20 分钟前
你点了「保存」之后,数据都经历了什么?
前端
猪头男27 分钟前
【从零开始学习Vue|第六篇】生命周期
前端
zheshiyangyang2 小时前
前端面试基础知识整理【Day-7】
前端·面试·职场和发展
猫头虎2 小时前
web开发常见问题解决方案大全:502/503 Bad Gateway/Connection reset/504 timed out/400 Bad Request/401 Unauthorized
运维·前端·nginx·http·https·gateway·openresty
qq_24218863322 小时前
3389端口内网转发概述
前端·经验分享·html
Never_Satisfied3 小时前
在JavaScript / HTML中,数组查找第一个符合要求元素
开发语言·javascript·html
伊泽瑞尔3 小时前
2025年终总结
前端·程序员·ai编程
uhakadotcom3 小时前
Hono v4.12.0 发布!路由提速2倍+,JSON响应飞起来
前端·面试·github
少云清3 小时前
【UI自动化测试】10_web自动化测试 _frame切换、多窗口切换
前端·web自动化测试