精华内容
下载资源
问答
  • vue+html select2

    2018-07-25 19:07:02
    vue+html select2在本例中,我们整合了第三方 jQuery 插件 (select2),怎么做到的呢?就是把它内嵌在一个常用组件中。
  • Vue Select2组件 该项目是使用版本2.9.1生成的。 指示 该项目旨在显示如何使用v-select2-component。 如果要在Vue 3.0中使用它,请检查 。 v-select2组件 源代码位于: : 。 相关版本 Vue-Select2-Component基于...
  • vue-select 一个原生Vue.js组件提供类似于的Select2功能
  • ue Vue Select Image Vue 2.x组件,用于从列表中选择图像演示https://mazipan.github.io/vue-select-image/安装#纱线添加vue-s:check_mark_button:Vue Select Image Vue 2.x组件,用于选择清单中的图片演示...
  • @ alfsnd / vue-bootstrap-select Vue版本 演示版 安装 npm install @alfsnd/vue-bootstrap-select --save 用法 import VSelect from '@alfsnd/vue-bootstrap-select' export default { name : 'app' , ...
  • npm i @coleqiu/vue-drag-select yarn add @coleqiu/vue-drag-select :blue_book: 演示版 :compass: 快速指南 :gear: 进口 import Vue from "vue" ; import VueDragSelect from "@coleqiu/vue-drag-select" ; Vue...
  • 本文介绍了vue2.x select2 指令封装,分享给大家,具体如下: 其他的就不说了,说说封装过程的问题吧 1、vue不同版本指令接受参数不一样 2、酱油君对于vue2.x双向绑定的机制不了解(有大神路过望在评论中不吝赐教) ...
  • 从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js vue-search-select一个Vue.js搜索选择组件,没有依赖项。 从https://github.com/Semantic-Org版本2.x借用CSS支持Vue.js 2.x五种选择组件ModelSelect(从...
  • 本文实例讲述了vue中动态select的使用方法。分享给大家供大家参考,具体如下: html代码如下: 通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容 <div class=type-select> &...
  • 主要为大家详细介绍了Vue.js仿 Select下拉框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue中使用select2无法获取数据问题

    千次阅读 2019-06-26 10:22:18
    vue项目中使用jquery的select2插件,无法获取到下拉框的值,后来看文档通过封装组件的形式解决了这一问题 * select2封装 */ Vue.directive('select2', { inserted: function (el, binding, vnode) { let ...

    在vue项目中使用jquery的select2插件,无法获取到下拉框的值,后来看文档通过封装组件的形式解决了这一问题

     * select2封装
     */
    Vue.directive('select2', {
        inserted: function (el, binding, vnode) {
            let options = binding.value || {};
     
            $(el).select2(options).on("select2:select", (e) => {
                // v-model looks for
                // - an event named "change"
                // - a value with property path "$event.target.value"
                el.dispatchEvent(new Event('change', {target: e.target})); 
     
            });
        },
        update: function (el, binding, vnode) {
            for (var i = 0; i < vnode.data.directives.length; i++) {
                if (vnode.data.directives[i].name == "model") {
                    $(el).val(vnode.data.directives[i].value);
     
                }
            }
            $(el).trigger("change");
     
        }
    });
    
    

    在使用时就直接可以用v-select2就可以了

    /*使用案例*/
    
    <select v-select2="" v-model="sale.carNum" required="required" class="form-control select">
        <option value=""></option>
        <option v-for="item in options.carId" :value="item.value">{{item.text}}</option>
    </select>
    
    

    用到的文件
    注意:
    在模式框中使select2时因为层级问题无法捕捉搜索框,在style设置z-index也不行,最后删除了modal中的tabindex="-1"就可以了,也是经验所得,希望大家使用的时候注意。

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
    

    2019/8/27更新

    :动态创建的select2下拉框的高度会发生改变,主要是.select2-selection–single属性高度被强制改变。自己修改高度即可。如下图
    在这里插入图片描述

    <style type="text/css">
       .select2-container .select2-selection--single{  
    		  height:calc(2.95rem + 2px);
    		}
    </style>
    

    select2 ajax动态加载数据,动态查询数据

    
    $('.user').select2({
    	ajax: {
        url: ip+'/data/listuser',
        dataType: 'jsonp',
        jsonp: "callback",
        data: function (params) {
    		var query = {
          orgids: '',
          s: params.term//搜索框中的值
    		  
    		}
        //alert(JSON.stringify(query))
    		// Query parameters will be ?search=[term]&type=public
        return query
        },
        processResults: function (data) {  
          //将获取到的数据整理成select2格式
          var options = new Array();
                   
          for(var i=0;i<data.length;i++){
            
            var userinfo=JSON.parse(data[i].userinfo);
            options.push({          //获取select2个必要的字段,id与text
                            id : userinfo.xingming+"|"+userinfo.gonghao,         //取出items中Code赋值给id
                            text : userinfo.xingming+"|"+userinfo.gonghao    //取出items中CodeName赋值给text
                        });
          };
          return {
                        results: options        //返回数据
                };
                
         
        },
        cache: true
      },
      placeholder: "输入姓名搜索...",
      language: "zh-CN",
      allowClear: true, //允许手动删除选择的值
      minimumInputLength:0, //最小输入的可搜索
      escapeMarkup: function (markup) { return markup; }, // 字符转义处理自定义格式化防止xss注入
      formatSelection: function formatRepoSelection(repo){return repo.text;}
    });
    
    展开全文
  • 主要介绍了vue 不使用select实现下拉框功能,在文章给大家提到了vue select 组件的使用与禁用,需要的朋友可以参考下
  • 主要介绍了vue--select组件的使用与禁用的实现代码,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下
  • pd-select移动滚轮选择 浏览器 版 IE浏览器 > 11 埃德 > = 16 火狐浏览器 > = 57 Chrome > = 47 苹果浏览器 ...npm i pd-select -S ...import pdSelect from 'pd-select' Vue.use(pdSelect) //other code
  • vue下使用select2,绑定数据问题

    千次阅读 2017-12-01 21:08:33
    select元素上应用v-model绑定数据,本来没啥问题,后来应用了select2优化样式,发现v-model不管用了。 html部分: &lt;select id="deviceTypeAdd" name="deviceTypeAdd" v-model=&...

    在select元素上应用v-model绑定数据,本来没啥问题,后来应用了select2优化样式,发现v-model不管用了。

    html部分:
    
    <select id="deviceTypeAdd" name="deviceTypeAdd" v-model="deviceTypeAdd" type="text" class="span3">
         <option value="-1">请选择报废设备类型</option>
         <option v-for="(key, value) in deviceType" value="{{key}}">{{value}}</option>
    </select>
    select元素应用select2:
    
    $('select').select2();

    在浏览器看了下select2把元素渲染了成这样,怪不得绑定不了

    chrome 下查看的

    解决

    //选择的值绑定到全局变量
    $("#deviceTypeAdd").on('change', function (e) {
       this.deviceTypeAdd = e.val;
    });
    
    //select选定某个默认值
    watch: {
        deviceTypeAdd: function (val) {
           $("#deviceTypeAdd").select2('val', val);
        }
    }
    展开全文
  • 本篇文章主要介绍了vue2组件之select2调用的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今日,怂怂就来说说,在项目中刚遇到这么一个功能需求; 描述:当下拉选择不同的属性选项,...代码实现 vue.js: //定义一个select下拉菜单 类型> 表结构变更 value=tableChange> <el-option label=接口变更 va
  • 下面小编就为大家分享一篇VUE2 前端实现 静态二级省市联动选择select的示例。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 因为bootstrap-select功能比较强大,而且样式还不错,所以在项目使用了vue,所以,觉得对bootstrap-select进行封装。 html 代码如下:”input.options” v-model=”input.value” ref=”typeSelect” index=”index...
  • vue-next-select 文献资料 贡献 提出拉取请求之前,请务必先阅读。 # build package yarn build # run linter yarn lint # run tests yarn test
  • 在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关selectVue.js 2.0版本中的应用,需要的朋友可以参考下
  • 主要介绍了使用Vue自定义指令实现Select组件,如果哪位朋友对vue自定义指令不是多了解的话,此篇文章会对你有所帮助的,需要的朋友可以参考下
  • 今天小编就为大家分享一篇解决vue select当前value没有更新到vue对象属性的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 目标:用ul-li标签结合Vue.js知识做一个模仿select标签的下拉选项列表。 知识点: 组件的写法及运用 组件之间的数据传递(props的运用) 组件之间的数据传递($emit的运用) 动态数据的绑定(v-bind) 自定义事件...
  • npm install vue-drag-select-pro --save yarn add vue-drag-select-pro 文档 进口 import Vue from 'vue' import App from './App.vue' import vueDragSelectPro from 'vue-drag-select-pro' // 注意:一定要引入...
  • 下面小编就为大家分享一篇vue.js select下拉框绑定和取值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Live DEMO安装首先使用以下命令安装它:npm install-保存vue-select-sides或yarn添加vue-select-sides然后您可以将其用作组件:从“ vue-select-sides”导入vueSelectSides; 导出默认的{组件:{vueSelectSides}}; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 53,903
精华内容 21,561
关键字:

select2vue

vue 订阅