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

实现效果

差不多是这样的效果

相关推荐
fjh19974 小时前
通过配置 Edge 浏览器 DoH 和 ECH 实现特定网站如linuxdo裸连访问
前端·edge
北城笑笑4 小时前
Vue 99 ,Vue 项目代理配置规范:跨域解决、路径重写与多环境适配最佳实践( 企业级避坑指南 )
运维·前端·nginx·vue
梵得儿SHI4 小时前
Vue3 实战:从 0 搭建企业级后台管理系统(Router+Pinia+Axios+Element Plus 全整合)
前端·javascript·vue.js·pinia状态管理·项目初始化·页面路由配置·后台首页布局
不能只会打代码4 小时前
基于Vue 3 + Spring Boot的物联网生鲜品储运系统设计与实现(源码附有详细的文档讲解)
java·前端·vue.js·spring boot·后端·物联网·github
A923A4 小时前
【Vue3大事件 | 项目笔记】第三天
前端·vue.js·笔记·vue·前端项目
Smoothcloud润云4 小时前
告别 Selenium:Playwright 现代 Web 自动化测试从入门到实战
前端·人工智能·selenium·测试工具·架构·自动化
前端小D4 小时前
ES6 中的 Promise
前端·javascript·es6·promise
光影少年4 小时前
React和Vue的区别?
前端·vue.js·react.js
遗憾随她而去.4 小时前
前端跨页面通信:8 种方案全解析(附实战案例)
前端
何中应4 小时前
<el-tag>标签使用
前端·vue.js·elementui