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

news2024/10/5 13:12:49

前言

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.coloradmin.cn/o/1662236.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

k8s安装nginx Ingress超详细指南

在本全面的 Ingress 指南中,您将学习如何在 Kubernetes 上设置 Nginx Ingress控制器并使用 DNS 配置 Ingress。 目前有两种 Nginx Ingress 控制器。 kubernetes 社区的 Nginx Ingress 控制器Nginx Inc 开发的 Nginx Ingress 控制器 我们将使用 Kubernetes 社区 N…

【Qt 学习笔记】Qt常用控件 | 多元素控件 | Table Widget的说明及介绍

博客主页:Duck Bro 博客主页系列专栏:Qt 专栏关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ Qt常用控件 | 多元素控件 | Table Widget的说明及介绍 文章编号&#…

内存拆解分析表:学习版[图片]

对拆解system中主要是对比测试机和对比机之间的差距,测试机那些地方高于对比机 拆解表,作为理解 在拆解表中system测试机比对比机多出113M 这说明是有问题的 对system拆解: system12345对比机9102294380941069391081628测试机10252010331…

腾讯云服务器部署前后端服务

服务器:OpenCloudOS (兼容centos8) 后端:javaSpringboot 前端:Vue 下载jdk 1)下载jdk11 wget https://download.java.net/openjdk/jdk11/ri/openjdk-1128_linux-x64_bin.tar.gz 2)解压jdk …

uni-appH5Android混合开发二 || 使用Android Studio打包应用APK

前言: 在上一章节我们已经讲了如何uni-app离线打包Android平台教程,这一章就该来讲讲如何使用Android Studio打包应用APK提供给Android手机安装使用了。 uni-app跨平台框架介绍和快速入门 uni-app跨平台框架介绍和快速入门 第一步、首先打开已经编译好的…

Element快速上手!

Element是饿了么公司前端团队开发的一套基于Vue的组件库,用于快速构建网页~ 官网链接: Element - The worlds most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.elem…

uni-app(三):离线打包与插件引用(Android)

离线打包与插件引用 1.下载Android离线SDK2.使用Android Studio打开离线打包项目并更新Gradle3.解决报错4.构建5.配置AppKeya.查看证书b.申请AppKeyc.配置AppKey 6.生成本地打包App资源7.拷贝App资源到Android项目中8.修改 appid9.修改Android项目配置文件10.下载证书并配置11.…

基于Springboot+Vue的Java项目-电影院购票系统开发实战(附演示视频+源码+LW)

大家好!我是程序员衣一帆,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &…

开源高性能的分布式时序数据库:Lindb

Lindb:为大数据时代量身打造的高性能时序数据库,让海量数据存储与实时分析触手可及。- 精选真开源,释放新价值。 概览 Lindb 是一款开源的分布式时序数据库,它以其高性能和可伸缩性在海量数据存储及快速查询计算方面展现出独特的…

在数字化时代保持企业财务管理的持续技术创新

根据全球市场调查,在现阶段企业如果还不更新自身的商业运作模式,企业的业务可能会一点一点丧失市场竞争力。技术进步是所有行业发展的明显趋势。许多年轻的初创企业具有创新管理思维、精益求精的决策流程和现代化的商业基础设施,这些顺应时代…

uniapp百度地图聚合

// loadBMap.js ak 百度key export default function loadBMap(ak) {return new Promise((resolve, reject) > {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() > {// 调用加载第三方组件js公共方法加载其他资源库// 加载聚合API// Ma…

基于STM32移植lvgl(V8.2)(SPI接口的LCD)

目录 概述 1 认识LVGL 1.1 LVGL官网 1.2 LVGL库文件下载 2 认识SPI接口型LCD 2.1 PIN引脚定义 2.2 MCU IO与LCD PIN对应关系 3 实现LCD驱动 3.1 使用STM32Cube配置Project 3.2 STM32Cube生成工程 4 移植LVGL 4.1 准备移植文件 4.2 添加lvgl库文件到项目 4.2.1 src下…

【半夜学习MySQL】表结构的操作(含表的创建、修改、删除操作,及如何查看表结构)

🏠关于专栏:半夜学习MySQL专栏用于记录MySQL数据相关内容。 🎯每天努力一点点,技术变化看得见 文章目录 创建表查看表结构修改表删除表 创建表 语法: create table table_name(field1 datatype,field2 datatype,fiel…

springboot3项目练习详细步骤(第三部分:文章管理模块)

目录 发布文章 接口文档 业务实现 自定义参数校验 项目参数要求 实现思路 实现步骤 文章列表(条件分页) 接口文档 业务实现 mapper映射 更新文章 接口文档 业务实现 获取文章详情 接口文档 业务实现 删除文章 接口文档 业务实现 文章管理业务表结构…

Java入门基础学习笔记1——初识java

1、为什么学习java? 几乎统治了服务端的开发;几乎所有的互联网企业都使用;100%国内大中型企业都用;全球100亿的设备运行java。开发岗位薪资高。 Java的流行度很高,商用占有率很高。 可移植性。 2、Java的背景知识 …

Springboot集成SpringbootAdmin实现服务监控管理-10

SpringbootAdmin Spring Boot Admin是一个用于管理和监控Spring Boot应用程序的开源软件。 概要介绍 Spring Boot Admin可以监控Spring Boot单机或集群项目,它提供了详细的健康(Health)信息、内存信息、JVM系统和环境属性、垃圾回收信息、…

解决在Outlook中预定Teams会议不显示入会链接的问题

今天遇到一个很蛋疼的teams问题,花了点时间才解决。本来以为是很简单的问题,随便网上冲浪一下就能找到答案的,结果根本就没有好的解决方案,所以我分享出来希望后来的老哥少走点弯路。 问题描述 简单来说,就是在Outlo…

使用 MSYS2 Qt6 发布绿色版的SDR软件无线电应用

文章目录 概要整体架构流程技术名词解释技术细节在启动器中为子进程设置路径和环境。如何迅速找齐所有的DLL 小结附件 概要 新接触软件定义无线电(SDR)的朋友一般都会一股脑的安装一些现有的SDR平台。无论是GNURadio还是SDR、SDRSharp、SDRAngel&#x…

一文了解spring的aop知识

推荐工具 objectlog 对于重要的一些数据,我们需要记录一条记录的所有版本变化过程,做到持续追踪,为后续问题追踪提供思路。objectlog工具是一个记录单个对象属性变化的日志工具,工具采用spring切面和mybatis拦截器相关技术编写了api依赖包&a…

[windows系统安装/重装系统][step-3]装驱动、打驱动、系统激活

重装系统三部曲 [windows系统安装/重装系统][step-1]U盘启动盘制作,微软官方纯净系统镜像下载-CSDN博客 [windows系统安装/重装系统][step-2]BIOS设置UEFI引导、磁盘分区GPT分区、安装系统[含完整操作拍照图片]-CSDN博客 [windows系统安装/重装系统][step-3]装驱动…