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

实现效果

差不多是这样的效果

相关推荐
lightqjx3 分钟前
【前端】前端学习四之JavaScript(Web API -- DOM)
前端·javascript·学习
zzqssliu8 分钟前
Vue3 + Pinia 重构跨境代购前端:从taocarts的React方案学到的状态管理心得
前端·react.js·重构
IT_陈寒12 分钟前
SpringBoot自动配置偷偷给我埋了个坑
前端·人工智能·后端
PieroPc13 分钟前
通用产品标签打印 (为制衣厂 打印纸箱错印或不足 补打修改纸箱通用程序)html版
前端·javascript·vue.js
专注API从业者14 分钟前
用 Open Claw + 淘宝商品接口,快速实现电商商品监控与智能选品(附完整代码)
大数据·前端·数据结构·数据库
muddjsv15 分钟前
前端开发语言使用流行度排行与分析
前端·javascript·typescript
心.c20 分钟前
CommonJS和ES Module
javascript·后端·node.js
步十人23 分钟前
【JWT】验证令牌的使用
前端·bootstrap·html
吃好睡好便好28 分钟前
用if…elseif…end语句输出成绩等级
开发语言·前端·javascript·数据库·学习·matlab·信息可视化