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

实现效果

差不多是这样的效果

相关推荐
计算机安禾11 小时前
【c++面向对象编程】第35篇:构造函数与异常:如何避免资源泄露?
开发语言·javascript·c++·算法·性能优化
广州灵眸科技有限公司11 小时前
瑞芯微(EASY EAI)RV1126B 千兆以太网电路
服务器·前端·人工智能·python·深度学习
梦想的旅途211 小时前
基于 RPA 自动化技术的外部群主动消息推送实现指南
前端·自动化·rpa
jiayong2311 小时前
前端面试题库 - React框架篇
前端·javascript·react.js
ttwuai11 小时前
XYGo Admin 国际化实战:Vue3 中后台多语言方案详解
前端·javascript·vue.js·vue
IT_陈寒11 小时前
React状态更新后视图不刷新?我差点以为是灵异事件
前端·人工智能·后端
Csvn11 小时前
JS 技巧:设计模式(下)- 策略、装饰器、代理
前端
一颗小青松11 小时前
uniapp 集成友盟并且上传页面路径
前端·vue.js·uni-app
周淳APP11 小时前
微前端核心沙箱机制深度解析:从iframe到乾坤沙箱
前端·学习·iframe·微前端·qiankun·前端架构
JarvanMo11 小时前
Android View 相关工具包终于成为了历史
前端