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中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 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
模拟xcopy的函数
2006/10/09 PHP
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python单链表的简单实现方法
2014/09/23 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python三引号输出方法
2019/02/27 Python
python单例设计模式实现解析
2020/01/07 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
商务英语专业毕业生自荐信
2013/11/05 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
初一学生期末评语
2014/04/24 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
医生见习报告范文
2014/11/03 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python