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

实现效果

差不多是这样的效果

相关推荐
mONESY15 小时前
🔥 React Hooks 进阶实战:受控组件 + 性能优化一站式掌握
javascript
Lear15 小时前
Vite+Vue3 模块自动导入实战:彻底告别繁琐的 import 语句
前端
Synmbrf15 小时前
flv播放设置hasAudio为true黑屏
javascript
Csvn15 小时前
📌 position: sticky 失效的 6 个经典坑:明明写了 sticky,为什么就是不吸顶?
前端
恋猫de小郭15 小时前
Flutter 的另外一种形态?社区 DartNative 要来了。
android·前端·flutter
秋天的一阵风16 小时前
🔥 Network 里那坨 "data:" 我真看吐了,自制开源 Chrome 插件,AI 流式调试直接开挂
前端·人工智能·后端
看到我请叫我铁锤16 小时前
vue编写web端在线预览文档
前端·javascript·vue.js
Ratten16 小时前
【Vben 解决】---- 跨页复选获取选择数据
前端
ssshooter16 小时前
为什么明明只有一个 12px 的小元素,父容器却有 63px 高?
前端·javascript·面试
IT_陈寒16 小时前
Python的GIL让我深夜加班,这破锁到底怎么折腾的
前端·人工智能·后端