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 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
PHP中英混合字符串截取函数代码
2011/07/17 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
php中关于换行的实例写法
2019/09/26 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
2017/12/25 jQuery
angular实现input输入监听的示例
2018/08/31 Javascript
浅谈Angular7 项目开发总结
2018/12/19 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
详解Django中的form库的使用
2015/07/18 Python
python队列queue模块详解
2018/04/27 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python3远程监控程序的实现方法
2019/07/15 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
什么是继承
2013/12/07 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
大学生简历求职信
2014/06/24 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书