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

实现效果

差不多是这样的效果

相关推荐
weixin_382395237 小时前
为小工厂量身打造:本地部署的物料管理系统带缺料计算
前端·制造
__zRainy__7 小时前
解决pnpm v10+不自动构建
前端·pnpm·工程化
猫猫不是喵喵.8 小时前
Vue3 Props 属性
前端·javascript·vue.js
醉城夜风~9 小时前
CSS元素显示模式(display)
前端·css
AI大模型-小华9 小时前
Codex 三方充值快速入门指南
java·前端·数据库·chatgpt·ai编程·codex·chatgpt pro
做前端的娜娜子12 小时前
同一链接实现 PC Web 与移动 H5 自适应
前端·掘金·金石计划
小帅不太帅12 小时前
架构没变、规模没变,DeepSeek V4 Flash 正式版凭什么暴涨 47 分?
前端·aigc·deepseek
jarvisuni12 小时前
DeepSeekFlash前端依旧拉垮,而且变慢了很多!
前端·javascript·算法
卷福同学14 小时前
AI编程出海第二步:验证关键词能否做站
前端·人工智能·后端