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

实现效果

差不多是这样的效果

相关推荐
aini_lovee11 分钟前
C# 实现邮件发送源码(支持附件)
开发语言·javascript·c#
GISer_Jing21 分钟前
ReAct规划原理实战指南
前端·react.js·ai·aigc
SoaringHeart24 分钟前
Flutter组件封装:翻转组件 NFlipCard
前端·flutter
LlNingyu1 小时前
文艺复兴,什么是XSS,常见形式(一)
前端·安全·web安全·xss
英俊潇洒美少年1 小时前
js 进程与线程的讲解
javascript
dleei2 小时前
彻底淘汰老旧 SVG 插件:unplugin-icons 与 Tailwind CSS v4 自定义图标最佳实践
前端·程序员·前端框架
LlNingyu2 小时前
文艺复兴,什么是XSS,常见形式(二)
前端·安全·xss
汉堡大王95273 小时前
# AI 终于能"干活"了——Function Calling 完全指南
javascript·人工智能·机器学习
明君879973 小时前
说说我为什么放弃使用 GetX,转而使用 flutter_bloc + GetIt
前端·flutter
Jingyou3 小时前
用 Astro 搭建个人博客:从零到上线的完整实践
前端