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

实现效果

差不多是这样的效果

相关推荐
秃头网友小李13 小时前
前端难点:Vue3 响应式遇上 Three.js / ECharts —— 为什么要用 shallowRef?
前端·vue.js
梦曦i14 小时前
Vite插件开发框架:14个实用插件与完整工具包
前端
KaMeidebaby14 小时前
卡梅德生物技术快报|biotin 生物素标记抗体全流程
前端·人工智能·算法·数据挖掘·数据分析
VitoChang14 小时前
前端也能快速入门后端! NestJS前台和后台的Auth认证
前端·后端
TheITSea14 小时前
一、React初体验:搭建、解析现代开发环境
前端·react.js·前端框架
盒马盒马14 小时前
Rust:String
java·前端·rust
程序猿阿伟14 小时前
《Chrome非必要服务的精细化关闭指南》
前端·chrome·php
belong_my_offer14 小时前
理解前端函数
前端
长空任鸟飞_阿康14 小时前
RAG 文档摄入全链路,从原理到生产落地
vue.js·人工智能·python
沐土Arvin14 小时前
中国省市区json数据
前端