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

实现效果

差不多是这样的效果

相关推荐
雪芽蓝域zzs6 小时前
第 9 节:面积测量(测面工具)
vue.js
℘团子এ6 小时前
vue2中自定义指令的使用
前端·javascript·vue.js
计算机魔术师6 小时前
微软Copilot安全机制被一个「句点」绕过了
前端
Data analyse4566 小时前
用户路径SQL按会话起止时间聚合的方法
大数据·服务器·前端·数据库·人工智能·sql·数据分析
独孤九剑打醒他6 小时前
【原创开源·2.0 版】太阳能水闭环氢能源汽车:动态制氢、动能回收与副产物商业闭环
前端·嵌入式硬件·汽车·硬件工程·能源
怕浪猫6 小时前
腾讯又交作业了,开源版 WorkBuddy 太夯了!这回是只粉色小章鱼Octop!
javascript·面试·agent
小毛驴8507 小时前
mvn help:effective-settings 与 mvn help:effective-pom
java·linux·前端
梦醒沉醉7 小时前
8、正则表达式
javascript
志尊宝7 小时前
AI原生前端开发(001):Cursor编辑器深度使用从入门到精通
前端·编辑器·ai-native
ZoeLandia7 小时前
TypeScript 07:工程化——import type、声明文件与 tsconfig
开发语言·前端·typescript