前端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_946244785 小时前
Flutter & OpenHarmony OA系统弹窗对话框组件开发指南
javascript·flutter·microsoft
Johnnyhaha5 小时前
Docker Compose Pull 超时与代理踩坑记录
前端
烟袅5 小时前
React 表单的控制欲:什么时候我们真得控制它了,什么时候该放养了?
前端·react.js
不想秃头的程序员5 小时前
吃透 JS 事件委托:从原理到实战,解锁高性能事件处理方案
前端·面试
AntoineGriezmann5 小时前
前端 Token 刷新机制实战:基于 Axios 的 accessToken 自动续期方案
前端
烟袅5 小时前
从定时器管理出发,彻底搞懂防抖与节流的实现逻辑
前端·javascript
计算机毕设VX:Fegn08955 小时前
计算机毕业设计|基于springboot + vue小区人脸识别门禁系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
幻影星空VR元宇宙5 小时前
多元互动与科技融合的5D体验馆新风尚
css·百慕大冒险·幻影星空
前端小L5 小时前
贪心算法专题(十三):画地为牢的艺术——「划分字母区间」
javascript·算法·贪心算法
北冥有一鲲6 小时前
A2A协议与LangChain.js实战:构建微型软件工厂
开发语言·javascript·langchain