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

实现效果

差不多是这样的效果

相关推荐
wuhen_n11 分钟前
LangChain Function Call 实战:让 AI 调用自定义工具
前端·langchain·ai编程
DyLatte15 分钟前
很多人把坚持,误以为成长
前端·后端·程序员
yingyima26 分钟前
凌晨3点的警报声:定时任务监控与告警的最佳实践
前端
he___H31 分钟前
B、B+树和vue部分知识
数据结构·vue.js·b树
zach33 分钟前
React中的兄弟通讯之发布订阅模式
前端·react.js
书中枫叶35 分钟前
我用 Vue3 写了一个 Chrome 步骤录制插件:自动截图、本地存储、一键导出教程
前端·vue.js
达达尼昂38 分钟前
AI Native 工程实践 : agent 自动化测试
前端·后端·架构
2501_9400417444 分钟前
前端工程化命题,覆盖性能/架构/交互
前端·交互
夜焱辰1 小时前
我花了3个月,把一个终端 AI Agent 搬进了浏览器——踩坑全记录
前端·agent
阿黎梨梨1 小时前
英伟达API + OpenAI SDK 实战:环境、密钥、异步,全流程拆解
前端