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

实现效果

差不多是这样的效果

相关推荐
nuIl几秒前
实现一个 Coding Agent(3):工具调用
前端·agent·cursor
nuIl7 分钟前
实现一个 Coding Agent(4):ReAct 循环
前端·agent·cursor
nuIl8 分钟前
实现一个 Coding Agent(1):一次 LLM 调用
前端·agent·cursor
nuIl8 分钟前
实现一个 Coding Agent(2):让 LLM 流式响应
前端·agent·cursor
copyer_xyf10 分钟前
Python 异常处理
前端·后端·python
sugar__salt17 分钟前
从栈队列数据结构到JS原型面向对象全解
前端·javascript·数据结构
MageGojo28 分钟前
随机文案模块怎么做?从接口封装到前端展示的完整实现思路
javascript·前端开发·api接口·后端开发·随机文案
独特的螺狮粉29 分钟前
篮球集训班器具管理系统 - 鸿蒙PC Electron框架完整技术实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙
小妖66629 分钟前
js 生成随机数技巧 Math.random().toString(36)
javascript·随机数
pusheng202530 分钟前
IFSJ全英文专访:中国创新力量重塑先进气体感知技术,赋能全球关键基础设施安全
前端·网络·人工智能·物联网·安全