当前位置: 首页 > news >正文

前端Vue uView 组件<u-search> 自定义右侧搜索按钮样式

前言

uView 文档的效果不是ui设计的样式 需要重新编辑

  • 原效果
    1

ui设计效果
2

解决方案

设置里说明的需要传一个样式对象
这个对象 需要写在 script 标签里面
这里需要遵循驼峰命名 比如font-size 改为 fontSize
lineHeight和textAlign为水平锤子居中效果

searchStyle: {background: '#F62F33',width: '105rpx',height: '60rpx',borderRadius: '30rpx',fontSize: '28rpx',color: '#FFFFFF',lineHeight:'60rpx',textAlign:'center'}

1

实现效果

差不多是这样的效果
2

http://www.lryc.cn/news/345922.html

相关文章:

  • 【Linux网络编程】I/O多路转接之select
  • 三下乡社会实践投稿攻略在这里
  • 银河麒麟桌面版开机后网络无法自动链接 麒麟系统开机没有连接ens33
  • vue+onlyOffice+java : 集成在线编辑word并保存
  • linux上用Jmter进行压测
  • 【Java代码审计】代码审计的方法及常用工具
  • 我国吻合器市场规模不断扩大 国产化率有所增长
  • 深度剖析Comate智能产品:科技巧思,实用至上
  • Centos 7.9 配置VNCServer实现远程vnc连接
  • 设计模式-08 - 模板方法模式 Template Method
  • Android 适配阿拉伯语之vector图标镜像
  • 推荐4个可用的github国内镜像
  • 从项目开始学习Vue——02(若依框架)
  • 使用JavaScript日历小部件和DHTMLX Gantt的应用场景(二)
  • springboot整合redis多数据源(附带RedisUtil)
  • Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
  • Apache Flume事务
  • 根据部门id删除该部门下的员工(事务)
  • Java之String类
  • es终止快照恢复进程的方法
  • ubantu安装rabbbitmq
  • 了解 条码工具 Dynamsoft 在条码读取器中的形态运算
  • NIO和NIO.2对比
  • Google准备好了吗?OpenAI发布ChatGPT驱动搜索引擎|TodayAI
  • 乐观锁、悲观锁、互斥锁、读写锁
  • Gin入门指南:从零开始快速掌握Go Web框架Gin
  • Scala里的class、object、case class、case object 、trait
  • 移动端自动化测试工具 Appium 之 main 启动
  • WT32-ETH01作为TCP Client进行通讯
  • jni 返回二维byte数组