Day12--自定义组件-渲染my-search组件的基本结构

news2024/10/5 20:19:09

1.自定义搜索组件

 我的操作:

1》在uni_modules中右键新建uni_modules插件:

 2》看看效果图:

**************************************************************************************************************

2.在分类页面的 UI 结构中,直接以标签的形式使用 my-search 自定义组件:

 

 

**************************************************************************************************************

3.定义 my-search 组件的 UI 结构如下: 

我的操作:

1》在my-search.vue组件中:

**************************************************************************************************************

 4.美化自定义 search 组件的样式:

 我的操作:

1》在my-search.vue中编写其样式。

 

5.当你加入搜索框后出现了一个问题,因为你的可使用窗口的高度(被你变相的变小了

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/37607.html

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

相关文章

工作中常用的设计模式--策略模式

一般做业务开发,不太容易有大量使用设计模式的场景。这里总结一下在业务开发中使用较为频繁的设计模式。当然语言为Java,基于Spring框架。 1 策略模式(Strategy Pattern) 一个类的行为或方法,在运行时可以根据条件的不同,有不同的…

verilog练习——基础语法

目录 基础语法 VL1 四选一多路器 VL2 异步复位的串联T触发器 VL3 奇偶校验 VL4 移位运算与乘法 VL5 位拆分与运算 VL6 多功能数据处理器 VL7 求两个数的差值 VL8 使用generate…for语句简化代码 VL9 使用子模块实现三输入数的大小比较 VL10 使用函数实现数据大小端转…

数据结构题目收录(二十五)

1、排序趟数与序列的原始状态无关的排序方法是()。 Ⅰ、直接插入排序 Ⅱ、简单选择排序 Ⅲ、冒泡排序 Ⅳ、基数排序 A:Ⅰ、ⅢB:Ⅰ、Ⅱ、ⅣC:Ⅰ、Ⅱ、ⅢD:Ⅰ、Ⅳ 解析 交换类的排序,其趟数和…

GUI编程--PyQt5--QDiaglog

文章目录QDialogQFontDialogQColorDialogQFileDialogQInputDialogQDialog 对话框基类,继承QWidget;用于短期任务,分为模态、非模态 模态,阻塞在当前窗口;分为应用程序级别&窗口级别(仅阻塞关联的窗口&…

关于使用鼠标时间mouseMove拖拽元素及元素抖动的解决方案

最近在做一个画布相关的项目时有一个场景是移动画布,最先开始想到的是拖拽事件,但是用户希望元素是实时的变化,所以决定使用mouseMove事件来做。 思路 通过mouseDown事件确定鼠标按下的位置根据mouseMove事件来计算出鼠标相对初始状态的横向…

MySQL锁杂谈

【说明】 1.MySQL版本5.7.37 2.事务隔离级别 REPEATABLE-READ 3.表结构 Create Table: CREATE TABLE isolation_innodb (id bigint(20) NOT NULL AUTO_INCREMENT,name varchar(10) DEFAULT NULL,money int(11) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT4…

jsp库存管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 库存管理系统 是一套完善的web设计系统,对理解JSP java编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开 发,数据库为Mysql,使用ja…

VMware Cloud Director数据库操作

VMware Cloud Director 是一个云服务平台,以自助服务模式提供安全、隔离、弹性的虚拟数据中心计算、网络、存储和安全。在NFV整个架构中属于VIM层,与NFVI层(对VMware来说即vSphere虚拟化环境)对接获取虚拟化资源并提供给租户。 NF…

服务访问质量(QoS)——QoS技术概述与配置

作者简介:一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.QoS技术概述 1.QoS的应用需求 ①网络拥塞的影响&#xff1a…

【Linux】项目自动化构建工具:make/Makefile的使用

文章目录一、背景1、make和makefile是什么?2、为什么要使用make和makefile?二、原理1、使用make和makefile2、依赖关系和依赖方法3、具体原理4、项目清理一、背景 1、make和makefile是什么? make是一个命令,是一个解释makefile中指令的命令…

Linux项目:自主web服务器

文章目录项目描述Web与 http 发展史DNSURI URL URNHTTP 概述项目纲要项目架构套接字的封装HTTP服务启动日志信息与工具类请求、响应类读取请求读取请求行读取请求报头分析请求行分析请求报头读取正文构建响应预处理返回静态网页CGI机制CGI机制的基本概念CGI函数的实现子CGI程序…

【点云处理】点云法向量估计及其加速(4)

上篇文章【点云处理】点云法向量估计及其加速(3)介绍了如何使用pcl提供的gpu版本法向量计算接口对点云发向量计算进行加速。不足之处在于点云k近邻查找依然比较耗时,成为影响整体计算性能的瓶颈。这篇文章就如何优化点云K近邻查找效率进行实验。上一篇文章的示例代码…

redis数据库的下载安装/免安装版

文章目录下载方式一下载方式二免安装版redis是一款高性能的NOSQL系列的非关系型数据库这里分享三个下载源,只介绍免安装版下载方式一 官网下下载https://redis.io(国外网站下载速度比较慢) 下载方式二 Redis中文网http://www.redis.net.cn…

想你所想,华为云桌面Workspace助你轻松办公

想你所想,华为云桌面Workspace助你轻松办公 双11作为近年来最受关注的购物季,从最开始的电商,到现在各行各业纷纷下场推出活动,期望在此段时间内迅速积累用户,从而提升产品知名度和用户基础。华为云也不例外&#xff0…

学生个人博客网页设计作品 学生个人网页模板 个人网页制作 HTML学生个人网站作业设计

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

应用商店的ASO和搜索引擎的SEO的区别

ASO和SEO,目标相似,有着异曲同工之妙,两者都是提高搜索排名的方式,具体有什么区别呢?今天柚鸥ASO给大家做一下总结。 SEO是指搜索引擎优化,利用搜索引擎的规则来提高网站(例如:百度…

室内定位解决方案-最新全套文件

室内定位解决方案-最新全套文件一、建设背景二、建设思路三、建设方案四、获取 - 室内定位全套最新解决方案合集一、建设背景 室内定位顾名思义就是定位室内目标对象的位置,可以是人也可以是物体的位置的一种技术方案,根据定位精度的不同,被…

C++ Primer Plus第五版笔记(p1-50)

1 在unix中 echo 获得状态 2iostream 包含istream以及ostream:随着时间的推移&#xff0c;字符是按照顺序生成或者是消耗的 3cin标准输入 cout标准输出 Cerr标准错误 clog 一般性信息 4cin>>c1>>c2&#xff1b;连续输入 5cout是ostream的对象&#xff0c;第一个<…

VirtualBox安装openEuler

下载&#xff1a; https://www.openeuler.org/zh/mirror/list/ 根据设备架构选择对应的版本&#xff1a;windows是x86架构 选择下面这个4.2G大小的&#xff1a; 安装&#xff1a; 1&#xff0c;点击新建&#xff1a; 按下图设置 设置内存大小&#xff0c;使用的cpu数…

SpringBoot项目在使用Maven打包war中遇到的问题

问题描述 在使用maven打包&#xff08;package&#xff09;springboot项目为war项目后&#xff0c;在本地机器上使用Tomcat跑这个项目&#xff0c;访问资源时出现下面的错误&#xff1a; o.s.b.w.servlet.support.ErrorPageFilter : Cannot forward to error page for reque…