Vue实现自定义下拉菜单功能


Posted in Javascript onJuly 16, 2018

先看例子,后面有对用到的知识点的总结

效果图:

Vue实现自定义下拉菜单功能

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件练习</title>
  <link rel="stylesheet" type="text/css" href="component.css" rel="external nofollow" />
  <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-list
      v-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">
        <li
          v-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实现自定义下拉菜单功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
javascript removeChild 使用注意事项
Apr 11 Javascript
基于jQuery的弹出框插件
Mar 18 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
JS原形与原型链深入详解
May 09 Javascript
vue实现城市列表选择功能
Jul 16 #Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 #Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 #Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
You might like
PHP中include与require使用方法区别详解
2013/10/19 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
python实现备份目录的方法
2015/08/03 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
PyQt5实现拖放功能
2018/04/25 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
戴森英国官网:Dyson英国
2019/05/07 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
执行总经理岗位职责
2014/02/03 职场文书
职工代表大会主持词
2014/04/01 职场文书
新书发布会策划方案
2014/06/09 职场文书
班级文化建设标语
2014/06/23 职场文书
2014年医生工作总结
2014/11/21 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
自我推荐信格式模板
2015/03/24 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库