【腾讯IMWeb前端训练营】 Vuejs select下拉框demo

第二次作业:用vuejs 封装一个下拉框组件

效果图:

HTML:

1 <div id="app">
2         <custom-select btn="查询" :list="list1"></custom-select>
3         <custom-select btn="搜索" :list="list2"></custom-select>
4 </div>

JS:

 1  Vue.component("custom-select",{
 2     data:function(){
 3         return {
 4             selectShow:false,
 5             val:""
 6         }
 7     },
 8     props:["btn","list"],
 9     template:`
10         <section class="wrap">
11             <div class="searchIpt">
12                 <div class="search">
13                     <div>
14                         <input type="text"
15                             class="keyword"
16                             @click="selectShow = !selectShow"
17                             v-model="val"
18                         />
19                         <input type="button" :value="btn" class="btn"/>
20                         <span></span>
21                     </div>
22                 </div>
23                 <custom-list
24                     v-show="selectShow"
25                     :list="list"
26                     :val="val"
27                     @receive="changeValueHandle"
28                 ></custom-list>
29             </div>
30         </section>`,
31     methods:{
32         changeValueHandle(value){
33             this.val = value;
34         }
35     }
36 })
37
38 //自定义select组件
39 Vue.component(‘custom-list‘,{
40     props:["list","val"],//
41     template:
42         `<ul class="list">
43             <li v-for="(item,index) of computedList" @click="selectValueHandle(item,index)">{{item}}</li>
44         </ul>`,
45     methods:{ //点击事件
46         selectValueHandle(item,index){
47             this.$emit("receive",item,index)
48         }
49     },
50     computed:{
51         computedList(){ //过滤
52             var val = this.val;
53             return this.list.filter(function(item){
54                 return item.toLowerCase().indexOf(val.toLowerCase())!==-1;
55             })
56         }
57     }
58 })
59
60 new Vue({
61     el:"#app",
62     data:{
63         list1:[‘广州‘,‘深圳‘,‘珠海‘],
64         list2: [‘2017-4-22‘,‘2017-4-23‘,‘2017-4-24‘]
65     }
66 })
时间: 2024-10-01 06:12:00

【腾讯IMWeb前端训练营】 Vuejs select下拉框demo的相关文章

web前端html实例-select下拉菜单美化代码

自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.

JS为Select下拉框增加输入功能

JavaScript使用parentNode.nextSibling.value实现的本功能,实际上你会发现网页上有两个控件元素,一个是Select,一个是input,使用CSS将input覆盖于select之上,再使用JS将下拉框的值赋值给input,实际上是用input模拟出了select的功能,思路很新颖,也不知到底有多少人需要select可输入文字的功能,下面是详细的实现代码:前端资源分享 .代码   <div style="position:relative;">

点击select下拉框获取option的属性值

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行.这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下: <

用JS和C#分别在前端和后端控制下拉框为只读的方法的代码

代码期间,将写代码过程较好的代码段备份一次,下面资料是关于用JS和C#分别在前端和后端控制下拉框为只读的方法的代码,应该对各位朋友有较大用途. <HTML> <HEAD> <TITLE>下拉框模拟只读</TITLE> <script type="text/javascript"> function setReadOnly(obj_id){ var obj = document.getElementById(obj_id); o

Selenium系列(十) - 针对Select下拉框的操作和源码解读

如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识,需要自己去补充哦,博主暂时没有总结(虽然我也会,所以我学selenium就不用复习前端了哈哈哈...) 首先,将下面html代码保存到一个文件中 后续的代码小案例都是访问此html的<!DOCTYPE html> <html lang="en"> <head&

JavaScript获取Select下拉框Option的Value和Text值的方法

Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个form表单中的Select下拉框菜单为例,来说明如何用JavaScript获取其 Value值和Text值: 示例表单,里面是一个select下拉列表框的各个列表项及值: <form name="form1"> <select name="testvalue&

Javascript获取select下拉框选中的的值

现在有一id=test的下拉框,怎么拿到选中的那个值呢? 分别使用javascript原生的方法和jquery方法 <select id="test"  name="">     <option   value="1">text1</option>     <option   value="2">text2</option>    </select> co

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">   

模拟select下拉框之多选(数据源采用模拟Ajax数据--原创)

最近需要一个下拉多选,本来想偷懒的,所以在网上百度了一番,最终还是发现没有一个符合自己要求的,所以我自己写了一个插件.下面是GIF动态效果图展示 相信大家已经看到效果了,接下来就是我的代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟select下拉框之多选</title> <style