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

实现效果

差不多是这样的效果

相关推荐
朴shu1 分钟前
Delta数据结构:深入剖析高效数据同步的奥秘
javascript·算法·架构
该用户已不存在4 分钟前
Vibe Coding 入门指南:从想法到产品的完整路径
前端·人工智能·后端
Pedro8 分钟前
Flutter - 日志不再裸奔:pd_log 让打印有型、写盘有序
前端·flutter
申阳9 分钟前
Day 3:01. 基于Nuxt开发个人呢博客项目-初始化项目
前端·后端·程序员
三小河14 分钟前
解决 React + SSE 流式输出卡顿:Nginx 关键配置实战
前端·架构·前端框架
玖月晴空23 分钟前
Uniapp 速查文档
前端·微信小程序·uni-app
琉-璃25 分钟前
vue3+ts 任意组件间的通信 mitt的使用
前端·javascript·vue.js
FogLetter43 分钟前
React Fiber 机制:让渲染变得“有礼貌”的魔法
前端·react.js
不想说话的麋鹿1 小时前
「项目前言」从配置程序员到动手造轮子:我用Vue3+NestJS复刻低代码平台的初衷
前端·程序员·全栈
JunpengHu1 小时前
esri-leaflet介绍
前端