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

实现效果

差不多是这样的效果

相关推荐
LCG元9 小时前
STM32实战:基于STM32F103的Bootloader设计与IAP在线升级
javascript·stm32·嵌入式硬件
xixingzhe210 小时前
idea启动vue项目
java·vue.js·intellij-idea
超级无敌暴龙兽10 小时前
和我一起刷面试题呀
前端·面试
wzl2026121311 小时前
企业微信定时群发技术实现与实操指南(原生接口+工具落地)
java·运维·前端·企业微信
小码哥_常11 小时前
Robots.txt:互联网爬虫世界的“隐形规则”
前端
小码哥_常11 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒11 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水11 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
coderyi12 小时前
LLM Agent 浅析
前端·javascript·人工智能