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

实现效果

差不多是这样的效果

相关推荐
King禅4 分钟前
JavaScript 调试实战指南:从 console.log 到 DevTools 深度运用
javascript
大文说跨境5 分钟前
多账号环境隔离方案技术选型:指纹浏览器、VPS 与云手机的三种架构对比
java·开发语言·前端
咕白m6257 分钟前
使用 C# 将 TIFF 转换为 PDF
前端·c#
全栈项目管理程序猿9 分钟前
ArcGIS JS 基础教程(28):图层渲染顺序管理
前端·javascript
huakoh13 分钟前
MCP 工具报错走哪条通道:三条探针的最小复现检查
前端
用户0333074139519 分钟前
ParadeDB 的 pg_search 0.26 把十词 BM25 搜索从 129ms 降到 29ms
前端
不爱说话郭德纲29 分钟前
从“点点点”到一键出包:我把 uni-app x Android 离线打包做成了脚本
android·前端·uni-app
扶风ff30 分钟前
练题簿在线免费刷题:创建个人任务,把刷题、听题和模考目标放到每天的学习中
开发语言·javascript·学习·小程序
Lstone736436 分钟前
从 Jetpack Compose 到 CMP:跨平台开发学习笔记
前端
deli00740 分钟前
多加一粒沙,整堆为什么就塌了?sandpile 模型 20 万粒实测
前端