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

实现效果

差不多是这样的效果

相关推荐
T___T5 小时前
从 0 搭建 React 待办应用:状态管理、副作用与双向绑定模拟
前端·react.js·面试
林太白6 小时前
vue3这些常见指令你封装了吗
前端·javascript
Tzarevich6 小时前
算法效率的核心:时间复杂度与空间复杂度
javascript·算法
傻啦嘿哟6 小时前
Python在Excel中创建与优化数据透视表的完整指南
java·前端·spring
拜晨6 小时前
用流式 JSON 解析让 AI 产品交互提前
前端·javascript
浩男孩6 小时前
🍀vue3 + Typescript +Tdesign + HiPrint 打印下载解决方案
前端
andwhataboutit?6 小时前
LANGGRAPH
java·服务器·前端
无限大66 小时前
为什么"Web3"是下一代互联网?——从中心化到去中心化的转变
前端·后端·程序员
cypking6 小时前
CSS 常用特效汇总
前端·css
程序媛小鱼6 小时前
openlayers撤销与恢复
前端·js