前端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 分钟前
Nginx应用与运维——Nginx Web服务应用实战(伪流媒体服务器的搭建)
运维·前端·nginx
铅笔小新z20 分钟前
【stm32】理解弱引用
javascript·stm32·嵌入式硬件
ss27326 分钟前
AI全栈实战 | 2.4-01 Node 与前端工程化:前端为什么离不开 Node,它不只是构建工具的宿主
前端
aixingpan27 分钟前
aixingpan.cn API开发文档:api_docs_transit接口指南
前端·php
鬓戈30 分钟前
Volta:解决 nvm「不能同时存在多个 Node 版本」的痛点
前端
吴声子夜歌33 分钟前
Nginx应用与运维——Nginx Web服务应用实战(HTTP增强协议服务器的搭建)
运维·前端·nginx
凤城老人41 分钟前
从PyQt6到Electron:一款英语字帖生成器的跨平台重构实战与踩坑全记录
javascript·重构·electron
雪芽蓝域zzs9 小时前
第 2 节:基础扩展 - 下拉弹窗常用原生属性
vue.js·elementui
扶风ff9 小时前
新品知识更新太快?用练题簿在线刷题,安排企业培训的小测与复盘
前端·学习·小程序
对空六课10 小时前
支持注意力分析的热力图工具有哪些?
前端·数据库·数据分析