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

实现效果

差不多是这样的效果

相关推荐
路上^_^6 分钟前
CSS核心笔记001
前端·css·笔记
啊吧啊吧曾小白18 分钟前
作用域、闭包与this指向问题
前端·javascript·面试
Linhieng20 分钟前
浏览器扩展与网页交流
前端
小宁爱Python20 分钟前
CSS的复合选择器
前端·css
今天真是星期八22 分钟前
AI 时代如何正确选择前端框架:React、Angular 还是 Vue?
前端
yaoganjili25 分钟前
WebGL打开 3D 世界的大门(六):透视投影
前端·数据可视化
HiF26 分钟前
Hexo博客集成LivePhoto
javascript
ChasLui28 分钟前
[译]在公共领域构建一个速度极快的缓冲数据网格。
前端·neo
八了个戒39 分钟前
「数据可视化 D3系列」入门第七章:坐标轴的使用
前端·javascript·数据可视化·canvas·d3
NON-JUDGMENTAL41 分钟前
HTML:网页的骨架 — 入门详解教程
前端·html