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

实现效果

差不多是这样的效果

相关推荐
西红柿炖牛腩3546 分钟前
机房电脑不能联网,怎么离线把课件里的 3D 模型压小?Draco / Meshopt 参数清单
前端·javascript·3d·性能优化·大屏端
爱喝水的小周7 分钟前
实验十三 Vue 过渡与动画—电商后台消息中心实现
前端·javascript·vue.js
hunterandroid10 分钟前
Navigation Component 工程落地:从单 Activity 架构到深度链接配置
android·前端
无责任此方_修行中12 分钟前
如何不用括号调用 JS 的函数?
前端·javascript·node.js
kyriewen16 分钟前
我数了 647 条大厂前端 JD:AI 不再只是加分项
前端·程序员·ai编程
无责任此方_修行中30 分钟前
Deno 的八年:一场没逃出 Node 引力的运行时起义
前端·javascript·node.js
java1234_小锋40 分钟前
【技术专题】HTML5 网页技术 - HTML5 语义化标签
前端·html·html5
涛涛ing1 小时前
2026年,你的JavaScript计数逻辑可以删了:CSS刚刚学会了自己数数
前端
广州华水科技1 小时前
单北斗GNSS变形监测系统在水库安全监测中的应用与优势
前端
PBitW1 小时前
行内编辑,如何防止后端未返回,直接全部更新了?
前端·面试