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

实现效果

差不多是这样的效果

相关推荐
随风一样自由1 天前
React中实现iframe嵌套登录页面:跨域与状态同步解决方案详解
前端·react.js·前端框架·跨域
测试人社区—52721 天前
破茧成蝶:DevOps流水线测试环节的效能跃迁之路
运维·前端·人工智能·git·测试工具·自动化·devops
_菜鸟果果1 天前
vue-amap高德地图绘制线路轨迹
前端·vue.js·elementui
一个处女座的程序猿O(∩_∩)O1 天前
React Native vs React Web:深度对比与架构解析
前端·react native·react.js
n***i951 天前
前端技术的下一场进化:从工程化走向智能化的全面重构
前端·重构
@大迁世界1 天前
紧急:React 19 和 Next.js 的 React 服务器组件存在关键漏洞
服务器·前端·javascript·react.js·前端框架
晓得迷路了1 天前
栗子前端技术周刊第 109 期 - Vite 8 Beta、JavaScript 三十周年、Prettier 3.7...
前端·javascript·vite
Terry_Tsang1 天前
ceph mon 报错 full ratio(s) out of order 解决方法
服务器·前端·ceph
别叫我->学废了->lol在线等1 天前
自然语言转成formily+shadcn组件的jsonschema
javascript·json
韩曙亮1 天前
【Web APIs】元素偏移量 offset 系列属性 ④ ( offset 属性案例 - 放大镜效果 )
前端·javascript·css·html·offset·dom·web apis