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

实现效果

差不多是这样的效果

相关推荐
MetWeave11 分钟前
跟着一条 SPECI 走流水线:从电报到界面
前端
用户91775337187518 分钟前
从零封装一个地图组件库:OpenLayers + Vue 的工程化实践
vue.js
樱花落木兰26 分钟前
分布式登录实战:Session 会话共享改造,Redis 存储用户登录状态
java·javascript·数据库·redis·分布式·缓存
Helix25028 分钟前
Chrome 开发者工具进阶:长截图、网络调试与性能分析
前端·chrome·chrome devtools·使用技巧·性能分析·开发者工具·长截图
liangshanbo12151 小时前
面试题:线上 JavaScript 报错如何快速定位到源码?
开发语言·javascript·ecmascript
liangshanbo12151 小时前
面试题:Webpack 的 publicPath 有什么作用?
前端·webpack·node.js
mjhcsp1 小时前
DeepSeek V4.1 Flash 批量处理效能实测
java·前端·数据库
雪芽蓝域zzs1 小时前
第7节:多选模式、自定义选项渲染、受控弹窗显隐
vue.js·elementui
CHEEVEN_QY2 小时前
新能源汽车电池托盘FSW量产的工艺稳定性控制
java·前端·汽车
Alice-YUE2 小时前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor