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

实现效果

差不多是这样的效果

相关推荐
betazhou6 小时前
TDSQL-PG创建测试表并定时插入数据模拟生产
前端·javascript·数据库·tdsql·tdsql-pg
W.A委员会6 小时前
地址栏输入url到显示画面
前端·网络
凯小默6 小时前
08.with、eval、严格模式、面向对象、属性描述符
javascript
睡不着的可乐6 小时前
Math对象
javascript
xuankuxiaoyao6 小时前
Vue.js实践-组件基础上
前端·javascript·vue.js
甄心爱学习6 小时前
【项目实训】法律文书智能摘要系统3
前端·人工智能
冲浪中台6 小时前
从追逐技术到回归业务本质,吃互联网红利罢了
服务器·前端·人工智能·低代码
小马_xiaoen6 小时前
前端虚拟列表(Virtual List)从原理到实战:海量数据渲染终极方案
前端·数据结构·list
DoWhatUWant6 小时前
WebUI页面结构
css·html5
M ? A7 小时前
你的 Vue 3 响应式状态,VuReact 如何生成 React Hooks 依赖数组?
前端·javascript·vue.js·经验分享·react.js·面试·vureact