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

实现效果

差不多是这样的效果

相关推荐
小聪7085 分钟前
elpis-core 抽离 npm 包过程的难点和卡点
前端·架构
钱栈up26 分钟前
坯料管理导入功能bug修复:只改前端一个文件就解决问题
前端·bug
沉迷...29 分钟前
Git skip-worktree 使用笔记(本地忽略配置文件)
javascript·git
石小石Orz1 小时前
民间AI排行榜单新鲜出炉,Fable 5.1仅排第三
前端·后端·ai编程
FYKJ_20101 小时前
【毕设分享】基于Web的校园兼职信息发布与申请系统07059
前端·vue.js·spring boot·mysql·typescript·spark·课程设计
志尊宝3 小时前
Vue3 零基础每日笔记(032):Suspense 与异步组件——懒加载与顶层 await 终极方案
前端·javascript·vue.js·笔记·html5
Peter-Code3 小时前
微前端避坑指南:主应用与子应用的高度及滚动条协调
css·前端框架·微前端
Alice-YUE3 小时前
前端速通 Agent:5 个项目,一条学习路径
前端·大模型·ai agent·学习路径·deerflow
是立不是利3 小时前
前端分页逻辑与边界场景实战解析
前端·javascript
小聪7083 小时前
elpis-core 动态组件扩展设计
前端