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

实现效果

差不多是这样的效果

相关推荐
cidy_9813 小时前
Agent\-Reach 保姆级教程|AI Agent 全网数据源扩展工具(免费无调用费)
前端
乘风gg13 小时前
当 AI 遇到私有组件,Cli 才是 AI Coding 的起点
前端·ai编程·cursor
卤蛋fg613 小时前
vue 甘特图 vxe-gantt 的使用(一):年视图的渲染
vue.js
40岁搬砖工13 小时前
直观高效的 VSCode 略缩图定位注释 MARK
前端
前端开发爱好者13 小时前
支持 110 种文件预览!兼容 Vue、React、Svelte!
前端·javascript·vue.js
陈随易14 小时前
VSCode古法神器fnMap v9开发故事
前端·后端·程序员
大家的林语冰15 小时前
👍 尤大重学 Webpack,Vite 8.1 再进化,打包模式复活!
前端·javascript·vite
张元清15 小时前
React useIsomorphicLayoutEffect:修掉 SSR 下的 useLayoutEffect 警告(2026)
前端·javascript·面试
PBitW15 小时前
直接让GPT每日训练我!!!😕😕😕
前端·javascript·面试
爱勇宝15 小时前
我给自己做了一个新标签页:不登录、不打扰、打开就能用
前端·html·浏览器