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

实现效果

差不多是这样的效果

相关推荐
吃瓜的猹2 分钟前
Gemini 3.8 Flash 是真的站起来了,一起来看看我到底做了什么吧~
前端
光影少年2 分钟前
React18 对RN 的影响
android·前端·react.js·ios·前端框架
tryCbest10 分钟前
Vue Router学习及使用
前端·vue.js
杉氧11 分钟前
丝滑的奥秘:Reanimated 3 动画引擎与手势处理(Gesture Handler)
android·前端·react native
用户9701615016823 分钟前
浏览器切到后台后,AI 给我的代码就失效了:我拿 3 个模型测了 6 个定时器坑
前端·代码规范
蓝星空200028 分钟前
GPT Image 2.5 生图模型已上线,支持 Flare 与 Sunburst 型号选择
前端·gpt·aigc·image2·imagen
何何____39 分钟前
js常见继承方法详解
前端·javascript
parade岁月1 小时前
Tailwind CSS 加入 Shopify,正在用 Tailwind 的项目要不要调整?
前端
梨想橙汁1 小时前
Vue2 快速入门:环境搭建、模板语法、指令系统全解
前端·vue.js
King of fraud1 小时前
HTML 页面的 CSS 选择器详解
前端·css·html