Vue实现自定义下拉菜单
先看例子,后面有对用到的知识点的总结
效果图:
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组件练习</title><link rel="stylesheet" type="text/css" href="component.css"/><script src="vue.js"></script>
</head>
<body>
<div id="app"><h2>组件1</h2><custom-select btn="查询" :list="list1"></custom-select><h2>菜单2</h2><custom-select btn="搜索" :list="list2"></custom-select>
</div>
<script>//注册组件let list1 = ["北京","上海","深圳","郑州","南阳"];let list2 = ["胡歌","陈默","陶亚东","刘同"];Vue.component("custom-select",{data:function(){return {selectShow:false,val:""}},props:["btn","list"],template:`<section class="wrap"><div class="searchIpt clearFix"><div class="clearFix"><input type="text"class="keyWord":value="val"@click="selectShow=!selectShow"/><input type="button" :value="btn"/><span></span></div><custom-listv-show="selectShow":list="list"v-on:value1="selectValueHandle"></custom-list></div></section>`,methods:{selectValueHandle(value){this.val = value;}}});Vue.component("custom-list",{props:["list"],template:`<ul class="list"><liv-for="item in list"@click="searchValueHandle(item)">{{item}}</li></ul>`,methods:{searchValueHandle(item){this.$emit("value1",item)}}});var vm = new Vue({el:"#app",data:{list1:list1,list2:list2}});
</script>
</body>
</html>
考虑到一些朋友想要css代码,但避免css占据太多位置,所以此处将css压缩了,如果不需要看css的可以直接跳过哈
body{margin:0;font-family:"微软雅黑"}ul li{margin:0;padding:0;list-style:none}input{outline:0;cursor:pointer}.clearFix:after{display:block;content:"";clear:both}.wrap{width:348px;padding:100px 76px 50px;margin:50px;background:url(images/select_bg.png) no-repeat;box-shadow:2px 2px 10px #6789ad}.searchIpt{position:relative;width:336px;border:1px solid #3736ae;padding:5px;border-radius:24px;background:#e4e4fe}.searchIpt input{line-height:34px;border-radius:18px}.searchIpt input:nth-of-type(1){float:left;width:228px;padding-left:40px;border:1px solid #c9c9d5;background:#d9d9e2}.searchIpt input:nth-of-type(2){float:right;width:58px;height:36px;border:1px solid #fd635e;background:#fd635e}.searchIpt span{position:absolute;top:12px;left:15px;width:23px;height:23px;background:url(images/select_search.png) no-repeat}.searchIpt input:nth-of-type(1):focus{background:#fff;border-color:#fd635e}.list{margin-top:9px}.list li{margin:3px 0;color:#333;line-height:30px;padding-left:16px;width:270px;box-sizing:border-box;border-radius:14px}.list li.active,.list li:hover{color:#fff;background:#fd635e;cursor:pointer}
用到的知识点总结:
组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
使用组件:先要注册组件
一、注册组件:分为全局注册和局部注册
全局注册:
- 可以在任何模板中使用,使用之前要先注册
语法:使用Vue.component(组件名,选项对象)
组件名命名约定:
- 驼峰:(camelCase)、烤串(kebab-case)
在html中使用组件:
- 使用烤串(keba-case)命名法
注意:即便我们的组件名是驼峰的形式,在html中也要使用的烤串命名法,不要使用驼峰方式,否则会报错
局部注册:
在组件实例中通过选项对象注册,只在所注册的作用域中使用
{
components:{
组件名:选项对象
}
}
二、组件中data必须是函数
每个组件都是相互独立的,如果它们公用一个对象,在更改一个组件数据的时候,会影响其他组件。如果是函数的哈,每个组件都有自己独立的数据。相互之间不会影响
data: function () {return {count: 0}
}
三、组件间通信
父组件要给子组件传递数据,子组件需要将它内部发生大的事情告知给父组件
- 父组件->子组件
组件实例的作用域是孤立的,不能在子组件直接用父组件的数据
可以在组件上使用自定义属性绑定数据,在组件中需要显式的用props声明自定义属性名
- 子组件->父组件
需要用到自定义事件,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件
针对这一节的学习,如果您理解的不是特别的好,推荐看官网Vue.js
Vue实现自定义下拉菜单相关推荐
- Android m 自定义下拉菜单,Android实现动画效果的自定义下拉菜单功能
我们在购物APP里面设置收货地址时,都会有让我们选择省份及城市的下拉菜单项.今天我将使用Android原生的 Spinner 控件来实现一个自定义的下拉菜单功能,并配上一个透明渐变动画效果. 要实现的 ...
- Excel 自定义下拉菜单
在Excel中,我们经常用到自定义下拉菜单.普通方法制作的自定义下拉菜单有个小缺点,就是下拉菜单无法自动将数据源的列表去重,而且使用的函数也比较复杂.其实,只要用好Power Query,外加INDI ...
- vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件 设计规则 何时使用 代码演示 1.基本 2.右键菜单 3. ...
- android 自定义下拉菜单
本实例的自定义下拉菜单主要是继承PopupWindow类来实现的弹出窗体,各种布局效果可以根据自己定义设计.弹出的动画效果主要用到了translate.alpha.scale,具体实现步骤如下: 先上 ...
- Android 自定义下拉菜单的实现(基于PopupWindow+RecyclerView)
文章目录 一.引言 二.效果 三.代码实现 四.结语 一.引言 安卓自带的Spinner局限性较大,基本不能满足开发样式要求,当前又没有成熟的相关框架,所以决定自己使用PopupWindow实现一个下 ...
- vue实现Dropdown下拉菜单
1.需求 点击按钮出现下拉菜单 2.思路 为按钮绑定点击事件showPicker() 在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown 在methods里定义sho ...
- vue element ui下拉菜单和不是table列表全选功能问题解决方案
这半个月都在折腾vue的项目,虽然不是很复杂,但对于刚入门的小白来说,踩到的坑不少,常常因为一个小问题就得浪费好久问题,不过娃不在身边,晚上和周末可以继续研究,趁睡觉前,把今天遇到的问题给总结一下,做 ...
- 基于jquery实现自定义下拉菜单(前端开发)
1.css代码 *,p,h1,h2,h3,h4,h5,h6{padding: 0;margin: 0;border: none;} h1,h2,h3,h4,h5,h6{font-size: 24px; ...
- android spinner自定义样式,android自定义Spinner下拉菜单(下拉列表框)样式
在Android中Spinner就是下拉菜单,它相当于HTML中的标签. Android中提供的Spinner Widget下拉菜单已经非常好用了,样式也适用, 不过我们还是可以通过定义xml的方式来 ...
- android自定义下拉筛选,android自定义Spinner下拉菜单(下拉列表框)样式
在Android中Spinner就是下拉菜单,它相当于HTML中的标签. Android中提供的Spinner Widget下拉菜单已经非常好用了,样式也适用, 不过我们还是可以通过定义xml的方式来 ...
最新文章
- Linux安装Kafka-manager可视化
- 通过输入流获取json格式数据转为map格式
- matlab使用常犯的错误
- Hadoop之NameNode和SecondaryNameNode工作机制详解
- .NET Core TLS 协议指定被我钻了空子~~~
- 第二篇:Dapper中的一些复杂操作和inner join应该注意的坑
- CCS10.2安装步骤
- 如何通过供应商分类来提高采购绩效?
- iGrimaceV8 V8在线威锋源apt.so/qwkjv8手机直接下载安装教程图:
- 【VUE项目实战】42、添加商品分类功能(三)
- PHP常用正则表达式,如验证网址,邮箱等
- mac上chrome插件安装
- 1.树莓派Pi3简介
- 一起学 WebGL:图元的类型
- H5游戏开发包括哪些游戏类型
- Linux下安装免费杀毒软件---ClamAV
- 数据分析初回-探索性数据分析
- 学习各种计算机知识网站推荐
- shell脚本控制jar包启停
- 天线尺寸与频率,口径与波宽的关系
热门文章
- Fibonacci数列(斐波那契数列)
- Linux arm 支持 ntfs 文件系统
- CentOS 安装NTFS-3G,支持NTFS分区的方法
- html3d建模,数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
- LEARNING ACTIONABLE REPRESENTATIONS WITH GOAL-CONDITIONED POLICIES
- 2019智能网联汽车技术大会 | 感知+计算——解决智能网联汽车感知困境的必然趋势...
- Go面向对象---音乐库案例
- 【每日一读】ALG: Fast and Accurate Active Learning Framework for Graph Convolutional Networks
- 2020年找工作越来越难,程序员真的过剩了吗?
- Android,iOS应用适配IPv6之网络配置