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

实现效果

差不多是这样的效果

相关推荐
Sakura_洁10 小时前
解决 el-table 在 fixed 状态下获取 dom 不准确的问题
前端
best66610 小时前
Vue3什么时候不会触发onMounted生命周期钩子?
前端·vue.js
best66610 小时前
Javascript有哪些遍历数组的方法?哪些不支持中断?那些不支持异步遍历?
前端·javascript·面试
特级业务专家10 小时前
Chrome DevTools 高级调试技巧:从入门到真香
前端·javascript·浏览器
爱学习的程序媛11 小时前
【Web前端】Angular核心知识点梳理
前端·javascript·typescript·angular.js
小时前端11 小时前
前端架构师视角:如何设计一个“站稳多端”的跨端体系?
前端·javascript·面试
p***h64311 小时前
JavaScript图像处理开发
开发语言·javascript·图像处理
袅沫11 小时前
Element-UI 番外表格组件
javascript·vue.js·ui
Hilaku11 小时前
这 5 个冷门的 HTML 标签,能让你少写 100 行 JS
前端·javascript·html
杰克尼11 小时前
vue_day06
前端·javascript·vue.js