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

实现效果

差不多是这样的效果

相关推荐
hoLzwEge15 分钟前
node-linker VS shamefully-hoist
前端·前端框架
袋鱼不重22 分钟前
解决 Web 端图片预览与下载颜色不一致的一种工程方案
前端·后端
风止何安啊28 分钟前
教你用 JS + AI 实现简单的爬虫,零门槛爬取网页信息
前端
cidy_9829 分钟前
codebase-memory-mcp 新手完全教程:让 AI 真正「理解」你的代码库
前端
牛奶36 分钟前
HTTPS你不知道的事
前端·https·浏览器
小小小小宇38 分钟前
前端 Vue 如何避免不必要的子组件渲染全解析
前端
稀土熊猫君1 小时前
一个人能做出什么开源项目?
vue.js·后端·开源
cidy_981 小时前
codebase-memory-mcp 安装教程
前端
mt_z2 小时前
Webpack 与 Vite 完全指南
前端
灏仟亿前端技术团队2 小时前
B 端多弹窗越来越难维护?试试把弹窗交互 Promise 化
前端