前端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 分钟前
TypeScript 类型体操:如何为 SDK 编写优雅的类型定义
前端·aigc
大龄程序员9 分钟前
别再用 ID 定位了!教你用"语义指纹"实现 99% 的元素定位成功率
前端·aigc
RaidenLiu10 分钟前
拒绝重写!Flutter Add-to-App 全攻略:让原生应用“渐进式”拥抱跨平台
前端·flutter·前端框架
大龄程序员10 分钟前
Vite 插件开发实战:如何自动注入 SDK 脚本
前端·aigc
小呆i27 分钟前
零基础搭建前端开发环境(详细版)
前端
icebreaker28 分钟前
Mokup:构建工具友好的可视化 Mock 工具
前端·javascript·后端
昵称老重复31 分钟前
前端如何实现两次跳转dp链接
前端
禾叙_1 小时前
【netty】Channel
开发语言·javascript·ecmascript
不想秃头的程序员1 小时前
Vue3 子传父全解析:从基础用法到实战避坑
前端·vue.js·面试
weixin199701080161 小时前
海外淘宝商品详情页前端性能优化实战
大数据·前端·python