Vue音乐--搜索页面01_搜索框布局

最新推荐文章于 2024-08-29 14:05:46 发布
最新推荐文章于 2024-08-29 14:05:46 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 移动端音乐项目 文章标签： vue css 公共组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingAn123/article/details/83002736
版权
这篇博客介绍了如何在Vue项目中创建一个搜索框组件，包括将其设计为公共组件，利用iconfont图标库，使用flex布局，并设置输入框样式。文章强调组件应主要派发事件，避免过多操作。此外，还提供了组件引用示例和iconfont的使用参考链接。
摘要由CSDN通过智能技术生成

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

一、新建搜索框组件的布局

  • 要点：
    • 把输入框做成公共组件search-box
    • 公共组件，尽量只派发事件，而不过多操作（除内部方法）
    • 使用iconfont的ui字体
    • 使用flew布局
    • 设置input输入框的默认内容样式
    • 配置好组件结构，在父组件search.vue中引用
  • SearchBox.vue
<div class&
最低0.47元/天 解锁文章
「已注销」
关注
专栏目录
Vue音乐--搜索页面12_清空按钮弹窗页面
kingAn123的博客
10-11 418
大概步骤： 目标效果 十二、弹窗页面 要点： 弹窗样式布局 公共组件，外部可控性 （一）、点击垃圾桶show弹窗页面 为了不在没必要的地方渲染，不想以前那样用v-show标识来打开，而是在弹窗页面的组件中设置内置方法 ↓searchHistory.vue &lt;!--弹窗组件--&gt; &lt;confirm ref="confirm" co...
Vue音乐搜索播放Demo
08-12
Vue 音乐搜索、播放 Demo
Vue项目城市选择页-搜索框布局（8-2）
罗彬桦的博客
03-01 206
搜索框布局 创建分支city-search 创建Search.vue组件 引入，注册，使用组件
vue手机端 搜索框调起带搜索键盘，点击确认自动关闭
最新发布
qq_42740298的博客
08-29 472
vue手机端 搜索框调起带搜索键盘，点击确认自动关闭
Vue音乐播放和搜索
cuk5239的博客
07-20 331
Vue音乐 (Vue music) For detailed explanation on how things work, checkout the guide and docs for vue-loader. 有关工作原理的详细说明，请查看vue-loader的指南和文档。 现场演示 (Live demo) http://sioxas.github.io/ http://sioxas...
012_Vue音乐播放器（search.vue 搜索 组件）
友人C君的博客
11-22 452
首先是 酷狗搜索的API 请求，在proxyTable中 代理 该地址 在请求API的js文件中，有搜索热门词请求，搜索词条请求 import axios from 'axios'; let commonParams = { inCharset: 'utf-8', outCharset: 'utf-8' } export function getKugouHotKeyword...
Vuejs仿网易云音乐实现听歌及搜索功能
10-20
主要介绍了Vuejs仿网易云音乐实现听歌及搜索功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
在本篇文章中，我们将探讨如何利用Vue.js框架中的el-autocomplete组件来实现一个类似于百度搜索框的功能。Vue.js是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。el-autocomplete是一个具有自动...
WeiboGe2012-automated-test-platform-vue-master_java_自动化_
10-01
2. **Vue Router集成**：Nuxt自动配置Vue Router，处理路由的生成和导航，简化了页面间跳转的实现。 3. **动态路由**：支持基于文件系统的动态路由，方便地创建和管理多级路由。 4. **服务端渲染**：默认支持SSR，能...
本项目是基于Vuepress框架 Vuepress-theme-hope主题搭建的一个个人学习笔记文档站点，项目内记.zip
02-23
此外，Vuepress-theme-hope 还允许用户通过简单的配置文件来调整网站的颜色方案、布局和各种小部件，以满足个人喜好。 在“项目内记.zip”这个压缩包中，可能包含了以下内容： 1. `config.js` 或 `config.yml`: 这...
vue+element实现分页及条件搜索功能(纯前端分页).html
03-09
学习vue+element做用户条件分页查询遇到的坑! ps：(table :data 直接使用 list整个对象赋值，纯前端分页功能实现)!
Vue.js页面中有多个input搜索框如何实现防抖操作
10-16
debounce是lodash工具库中的一个非常好用的函数。这篇文章主要介绍了Vue.js页面中有多个input搜索框如何实现防抖操作,需要的朋友可以参考下
美食搜索小程序mpvue框架
08-10
美食搜索 小程序（mpvue框架）
Vue音乐--搜索页面08_点击歌曲
kingAn123的博客
10-11 774
大概步骤： 目标效果 七、点击歌曲li 要点： 与排行榜歌曲列表的歌曲li点击对比 是把获取到的所有歌曲列表设置为vuex中的播放列表 而搜索结果的歌曲li是把一首歌添加进播放列表，而且不是简单push，而是插入正在播放 因此要和排行榜歌曲li一样要操作的mutations是多个，利用到actions，来操作多个mutations （一）、点击触发actions事件 ↓sea...
Java Spring Boot + Vue 实习项目10：查询界面选项布局
Amzmks的博客
07-11 274
1. 提交选中的权限 1.1 前端提交数据的方法中，this.$myPut方法的第一个参数是服务器访问的路径，第二个参数是一个payload，这里是通过这一路径向服务器发送的一个数组，数组内是选中的权限编号。 //设置权限 setModule(){ this.$confirm('您确实要更新用户权限吗？', '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(()=>...
vue 中实现搜索功能
m0_72759446的博客
08-20 1247
【代码】vue 中实现搜索功能。
六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
微信号：RunsenLiu
10-28 1127
2020/10/28、 周三、今天又是奋斗的一天。
二五、vue仿百度搜索框
梅某某
05-04 3216
html> html lang="en"> head> meta charset="UTF-8"> title>仿百度搜索框title> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> meta name
Vue2.0结合Element-ui实战：前端项目搭建与页面布局
这个界面包含了一个搜索框（el-input），用于查询用户信息，以及一个按钮（el-button），点击后可以触发相应的操作（如编辑）。表格（el-table）用于展示用户信息，通过Element-UI的布局组件el-row和el-col可以轻松...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值