使用vue来开发一个下拉菜单组件(1)
一、新建demo工程
vue init webpack-simple demo
添加src/mixins/emitter.js文件(见前几篇博文)
安装font-awesome字体库:
cnpm install font-awesome --save
配置webpack.config.js,引入字体文件:
{test: /\.(otf|eot|ttf|woff|woff2)$/,loader: 'file-loader' }
在src/main.js中引入font-awesome:
import '../node_modules/font-awesome/css/font-awesome.min.css'
二、组件设计
新建src/components/mySelect.vue和myOption.vue文件
1) 先来设计选项组件,这个比较简单
先来考虑一下使用场景,一般的下拉菜单都是由无序列表组成,而选项则是一个个列表项:
但是直接slot标签很可能会出现重名,所以需要分别prop一个label和value,其中value是必须的,如果没有slot标签则显示label,所以myOption的基本结构为:
<template><li class="my-option"><span v-if="!$slots.default">{{ label }}</span><slot></slot></li> </template><script> import emitter from "../mixins/emitter";export default {name: "myOption",mixins: [emitter],props: {label: {type: String,default: "empty-label"},value: {type: String,required: true}} }; </script>
然后来考虑一下myOption可能会存在的状态,选项有选择和取消两种事件,对应的状态就是是否已经被选择,而且选择的状态需要高亮显示:
先来加一个状态:
data() {return {selected: true} }
然后在最外层的li添加一个selected类名和一个右浮的check图标(可以用v-show="selected"来控制显示,我这里用css与文字颜色一起控制):
<template><li :class="['my-option', { selected: selected }]"><span v-if="!$slots.default">{{ label ? label : value }}</span><slot></slot><i class="fa fa-check pull-right"> </i></li> </template>
css代码:
<style lang="scss" scoped> .my-option {> .fa-check {display: none;}&.selected {color: blue;> .fa-check {display: inline;}} } </style>
由于父组件select需要接收label的值,而prop不能改变,只好再定义一个myLabel标签,然后通过事件发送给父级:
myLabel: this.label || this.value
先后添加点击事件和监听的选择/取消事件:
methods: {handleClick() {this.dispatch("mySelect","option-click",this.selected,this.myLabel,this.value);} }, created() {this.$on("select", value => {if (this.value === value) {this.selected = true;}});this.$on("cancel", value => {if (this.value === value) {this.selected = false;}}); }
然后,不带样式的选项组件基本就完成了,完整代码如下:
<template><li :class="['my-option', { selected: selected }]"><span v-if="!$slots.default">{{ myLabel }}</span><slot></slot><i class="fa fa-check pull-right"> </i></li> </template><script> import emitter from "../mixins/emitter";export default {name: "myOption",mixins: [emitter],props: {label: {type: String,default: ""},value: {type: String,required: true}},data() {return {selected: false,myLabel: this.label || this.value};},methods: {handleClick() {this.dispatch("mySelect","option-click",this.selected,this.myLabel,this.value);}},created() {this.$on("select", value => {if (this.value === value) {this.selected = true;}});this.$on("cancel", value => {if (this.value === value) {this.selected = false;}});} }; </script><style lang="scss" scoped> .my-option {> .fa-check {display: none;}&.selected {color: blue;> .fa-check {display: inline;}} } </style>
转载于:https://www.cnblogs.com/viewts/p/11417384.html
使用vue来开发一个下拉菜单组件(1)相关推荐
- 使用vue来开发一个下拉菜单组件(2)
二.组件设计 接下来是开发选择框组件,首先需要自定义一个点击外部使下拉菜单关闭的指令: export default {bind(el, binding, vnode) {function docum ...
- android studio 下拉菜单,怎么在android studio中使用Spinner实现一个下拉菜单
怎么在android studio中使用Spinner实现一个下拉菜单 发布时间:2021-03-23 14:56:15 来源:亿速云 阅读:92 作者:Leah 这期内容当中小编将会给大家带来有关怎 ...
- Bootstrap学习-详解Bootstrap下拉菜单组件
转载:https://www.cnblogs.com/jnslove/p/5421187.html bootstrap框架中的下拉菜单组件是一个独立的组件,根据不同的版本,他对应的文件: less 对 ...
- 用vue去实现百度下拉菜单
在我们学习ajax的时候一定要做的例子就是下拉菜单了吧?为什么?因为当你输入一个值的时候下面的div里面会无刷新的去加入数据,当时的实现也是挺难的,反正比下面的vue实现难...下面我们来看看vue( ...
- vue项目实录:下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
- flutter实现一个下拉菜单【基于PopupMenuButton】
提示 已将代码上传至gitee,后续会继续更新学习封装的一些组件: flutter练习 实现效果 实现过程 1.封装菜单子项MenuItem /// @author longzipeng /// @创 ...
- 小程序下拉菜单组件(含多层筛选)
图例中筛选是另外一个组件 一般在筛选的场景中需要使用下拉菜单,动态设置筛选条件,比如淘宝,京东的产品筛选列表,携程的旅游目的地的筛选列表. 支持 配置化设置弹层内容 支持动态刷新弹层内容 支持动态修改 ...
- Bootstrap下拉菜单组件
组件的功能是帮助我们的网页实现一些功能,我们可以引用的是Bootstrap中的下拉菜单.我们来看看下拉组件中常用到的一些的功能: 下拉菜单的实现: <div class="dropdo ...
- uView下拉菜单组件u-dropdown设置高度并防止滑动穿透
一.出现的问题: u-dropdown内容自定义时设置高度,滑动时会带动父级,真机滑动会出现问题 这时就需要处理两个问题: 定义内容时设置高度并设置可滑动,可以配合scroll-view组件使用 处理 ...
最新文章
- 三、Appium-python-UI自动化之元素定位uiautomatorviewer
- .net framework处理xml
- Sublime text 3 SVN插件及使用方法
- 基于php计算机等级考试系统毕业设计网站作品
- css displayhidden
- bat文件打开一闪就没了_批量提取文件名
- 使用@Conditional条件注解
- 机器学习实战 | Python机器学习算法应用实践
- CAPL中的键值对(hash)数据类型
- 【元胞自动机】基于元胞自动机之地铁火灾疏散模型matlab源码
- 关于魔兽守卫军的改进建议
- 【一些好听的英文歌曲】
- 最新uniapp打包IOS详细步骤
- docker容器化部署
- 如果你还没冒犯过别人,说明你可能还没做过一件重要的事
- 电压放大器的作用原理是什么
- STL容器系列文章:array容器
- iOS超级签名流程及代码(php版本)
- 单片机嵌入式操作系统内核
- linux 两个子进程,父进程创建两个子进程,在收到中断信号后杀死两个子进程
热门文章
- 收藏 |彻底搞懂感受野的含义与计算
- 【人工智能】全网首发!2020年AI、CV、NLP等最全国际会议、顶会时间汇总!!
- 微信开发者配置服务器信息,【开发】微信验证开发者接口配置信息,服务器没有正确响应Token....
- 逻辑回归(LR)个人学习总结篇
- arm架构和x86架构_ARM、X86和MIPS主流架构优缺点分析
- c mysql异常捕获异常,c#基础之异常处理及自定义异常 从SQLServer转储数据到MySQL...
- 万分之二用百分之怎么表示_红木家具怎么辨别真假
- 如何建立个人博客网站
- MongoDB查询某个字段存在的语句
- 20180804的Test