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

实现效果

差不多是这样的效果

相关推荐
2501_9462243115 小时前
旅行记录应用关于应用 - Cordova & OpenHarmony 混合开发实战
javascript·harmonyos·harvester
Shi_haoliu15 小时前
inno setup6.6.1实例,制作安装包,创建共享文件夹,写入注册表(提供给excel加载项,此文章解释iss文件)
前端·vue.js·windows·excel
MediaTea15 小时前
Python:实例 __dict__ 详解
java·linux·前端·数据库·python
狗头大军之江苏分军15 小时前
又是一个周末加班夜,前端的我只想哭…
前端
个案命题16 小时前
鸿蒙ArkUI组件通信专家:@Param装饰器的奇幻漂流
java·服务器·前端
Data_agent16 小时前
CNFANS模式淘宝1688代购系统搭建指南
大数据·开发语言·前端·javascript
美酒没故事°16 小时前
vue3+element 滚动触底加载选择器
javascript·vue.js·ecmascript
澄江静如练_16 小时前
表单输入绑定
服务器·前端·javascript
猩球中的木子16 小时前
vue-plugin-hiprint打印高度不够,提示:没有足够空间,显示下方内容,问题处理方案及实操
前端·vue.js
狗头大军之江苏分军16 小时前
Node.js 原生功能越来越强,我们是不是被 npm 玩坏了?
前端·javascript·架构