前端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 小时前
别再满网找零散工具了,腾讯 QQ 浏览器这个“帮小忙”工具箱真能省时间
前端·后端
如果超人不会飞1 小时前
脉络清晰的业务演进:TinyVue Timeline 时间线组件全方位实战指南
vue.js
如果超人不会飞1 小时前
从扁平到立体:掌握 TinyVue Grid 树形表格的高级实战指南
vue.js
To_OC3 小时前
LC 200 岛屿数量:经典 DFS 入门题,我第一次写居然连方向都搞错了
javascript·算法·leetcode
Asmewill3 小时前
grep&curl命令学习笔记
前端
stringwu3 小时前
Flutter 开发必备:MVI 架构的高效实现指南
前端·flutter
用户2136610035724 小时前
Vue2组件化开发与父子通信
前端·vue.js
Momo__5 小时前
TypeScript satisfies 操作符——比 as 更安全的类型守门员
前端·typescript
用户2136610035725 小时前
Vue2事件系统与指令进阶
前端·vue.js
labixiong5 小时前
实现一个能跑的迷你版Promise(一)
前端·javascript·面试