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

实现效果

差不多是这样的效果

相关推荐
晚风予星16 小时前
简记 | 一个基于 AntD 的高效 useDrawer Hooks
前端·react.js·设计
栗子叶16 小时前
网页接收服务端消息的几种方式
前端·websocket·http·通信
菩提小狗16 小时前
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成
前端·css·less
澄江静如练_16 小时前
优惠券提示文案表单项(原生div写的)
前端·javascript·vue.js
C_心欲无痕16 小时前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
L Jiawen16 小时前
【Windows 系统】Chrome浏览器退出登录状态失效
前端·chrome·windows
IT_陈寒16 小时前
Java并发编程实战:从入门到精通的5个关键技巧,让我薪资涨了40%
前端·人工智能·后端
Irene199116 小时前
Vue2 与 Vue3 响应式实现对比(附:Proxy 详解)
vue.js·响应式实现
全栈前端老曹16 小时前
【包管理】read-pkg-up 快速上手教程 - 读取最近的 package.json 文件
前端·javascript·npm·node.js·json·nrm·package.json
程序员爱钓鱼17 小时前
Node.js 编程实战:测试与调试 —— 调试技巧与性能分析
前端·后端·node.js