前端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 小时前
内容平台-SEO 索引提交
前端·seo
苏打水com1 小时前
HTML/CSS 核心考点详解(字节跳动 ToB 中台场景)
java·前端·javascript
jingling5551 小时前
react | 从零开始:使用 Create React App 创建你的第一个 React 项目
前端·javascript·react.js
nnnnna1 小时前
watch监听(一篇文章彻底搞懂watch监听)
前端·vue.js
hmywillstronger1 小时前
【React 】ASD Structure Drawing Layer Coding System (2007)
javascript·react.js·ecmascript
科普瑞传感仪器2 小时前
基于六维力传感器的机器人柔性装配,如何提升发动机零部件装配质量?
java·前端·人工智能·机器人·无人机
步步为营DotNet2 小时前
深入理解IAsyncEnumerable:.NET中的异步迭代利器
服务器·前端·.net
JackieDYH2 小时前
CSS滚动吸附详解:构建精准流畅的滚动体验-scroll-snap-type
前端·css