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

实现效果

差不多是这样的效果

相关推荐
chilavert31814 小时前
技术演进中的开发沉思-194 JavaScript: Prototype 框架
开发语言·javascript·原型模式
你说啥名字好呢14 小时前
【Vue 渲染流程揭秘】
前端·javascript·vue.js·vue3·源码分析
艾小码14 小时前
Vue表单组件进阶:打造属于你的自定义v-model
前端·javascript·vue.js
Alang14 小时前
【LM-PDF】一个大模型时代的 PDF 极速预览方案是如何实现的?
前端·人工智能·后端
绝无仅有14 小时前
某电商大厂技术面试场景解析
javascript·后端·面试
lcc18715 小时前
Vue mixin混入
前端·vue.js
t***L26615 小时前
终于搞定了!Vue项目打包后白屏问题
前端·javascript·vue.js
u***j32415 小时前
前端组件通信方式,Vue与React对比
前端·vue.js·react.js
小贺要学前端15 小时前
【无标题】
前端·javascript·vue·技术趋势
im_AMBER15 小时前
React 18 用 State 响应输入
前端·react.js·前端框架