vue 自定义 select内置组件


Posted in Javascript onApril 10, 2018

1.整合了第三方 jQuery 插件 (select2)

vue 自定义 select内置组件

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <link rel="stylesheet" href="js/select2/select2.min.css" /> 
  <style> 
    html, body { 
 font: 13px/18px sans-serif; 
} 
select { 
 min-width: 300px; 
} 
  </style> 
</head> 
<body> 
<div id="el"> 
  <p>选中的: {{ selected }}</p> 
  <select2 :options="options" v-model="selected"></select2> 
</div> 
  <script src="js/jQuery-2.1.4.min.js"></script> 
  <script src="js/select2/select2.min.js"></script> 
  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>   
<script> 
  Vue.component('select2', { 
    props: ['options', 'value'], 
    template: '<select><slot></slot></select>', 
    mounted: function () { 
      var vm = this;// init select2 
      $(this.$el).select2({ data: this.options }).val(this.value).trigger('change').on('change', function () { 
        // emit event on change. 
        vm.$emit('input', this.value) 
      }) 
    }, 
    watch: { 
      value: function (value) { 
          // update value 
        $(this.$el).val(value).trigger('change') 
      }, 
      options: function (options) { 
         // update options 
        $(this.$el).empty().select2({ data: options }) 
      } 
    }, 
    destroyed: function () { 
      $(this.$el).off().select2('destroy') 
    } 
  }) 
var vm = new Vue({ 
  el: '#el', 
  data: { 
    selected: 2, 
    options: [ 
      { id: 0, text: '苹果' }, 
      { id: 1, text: '香蕉' }, 
      { id: 2, text: '香梨' }, 
      { id: 3, text: '榴莲' }, 
      { id: 4, text: '西瓜' } 
    ] 
  } 
}) 
</script> 
</body> 
</html>

2.简单select

vue 自定义 select内置组件

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
  <style>  
  *{ 
    padding: 0; 
    margin: 0; 
  } 
  ul,li { 
    list-style: none; 
  } 
  li { 
    line-height: 2em; 
  } 
  li:hover { 
    background-color: #f9f9f9; 
    border-radius:5px; 
    cursor: pointer; 
  } 
  input{ 
    cursor:pointer; 
    outline:none; 
  } 
  #app { 
    margin-top: 20px; 
  } 
  #app h2 { 
    text-align: center; 
  } 
  .wrap { 
    background-color: rgba(56, 170, 214, 0.45); 
    border-radius: 20px; 
    width: 300px; 
    margin: 40px; 
    padding: 20px; 
  } 
  input[type="button"] { 
    font-size:14px; 
    margin-left:2px; 
    padding:2px 5px; 
    background-color:rgb(228, 33, 33); 
    color:white; 
    border:1px solid rgb(228, 33, 33); 
    border-radius:5px; 
  } 
  .clearFix { 
    padding-left: 
  } 
  input.keyWord { 
    border: 1px solid #777777; 
    border-radius: 10px; 
    height: 30px; 
    width: 80%; 
    padding-left: 10px; 
    font-size: 16px; 
  } 
  ul.list { 
    margin: 20px 0; 
  } 
  ul.list li { 
    padding: 10px 0 0 10px; 
  } 
</style>  
</head>  
 <body>  
 <div id="app"> 
    <div style="float: left;"> 
      <h2>自定义下拉框</h2> 
      <custom-select btn-value="查询" v-bind:list="list1"></custom-select> 
    </div> 
    <div style="float: left;"> 
      <h2>自定义下拉框2</h2> 
      <custom-select btn-value="搜索" v-bind:list="list2"></custom-select> 
    </div> 
  </div> 
  <div id="app1"> 
    <custom-select></custom-select> 
  </div> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>  
 <script> 
    Vue.component("custom-select",{ 
      data(){ 
        return { 
          selectShow:false, 
          val:"" 
        } 
      }, 
      props:["btnValue","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="btnValue" /> 
                <span></span> 
              </div> 
              <custom-list  
                v-show="selectShow"  
                :list="list"  
                v-on:receive="changeValueHandle" 
              > 
              </custom-list> 
            </div> 
           </section>`, 
      methods:{ 
        changeValueHandle(value){ 
          this.val = value; 
        } 
      } 
    }); 
    Vue.component("custom-list",{ 
      props:["list"], 
      template:`<ul class="list"> 
              <li v-for="item in list" @click="selectValueHandle(item)">{{item}} 
              </li> 
           </ul>`, 
      methods:{ 
        selectValueHandle:function(item){ 
          this.$emit("receive",item) 
        } 
      } 
    }) 
    new Vue({ 
      el:"#app", 
      data:{ 
        list1:['北京','上海','广州','杭州'], 
        list2:['17-01-11','17-02-11','17-03-11','17-04-11'], 
      } 
    }) 
  </script> 
  </body>  
</html>

参考:

1.内置组件

总结

以上所述是小编给大家介绍vue 自定义 select内置组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 Javascript
vue实现表格合并功能
Dec 01 Vue.js
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
JavaScript如何对图片进行黑白化
Apr 10 #Javascript
axios 处理 302 状态码的解决方法
Apr 10 #Javascript
vue.js中npm安装教程图解
Apr 10 #Javascript
vue实现验证码按钮倒计时功能
Apr 10 #Javascript
vue 微信授权登录解决方案
Apr 10 #Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 #Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 #Javascript
You might like
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
php代码书写习惯优化小结
2013/06/20 PHP
php实现监听事件
2013/11/06 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python中的条件判断语句基础学习教程
2016/02/07 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
伦敦一卡通:The London Pass
2018/11/30 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
《最大的“书”》教学反思
2014/02/14 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技