精华内容
下载资源
问答
  • vue下拉组件 vue-listbox-multiselect (vue-listbox-multiselect) Vue Dual list-box multi-select drop-down component for enterprise applications. Vue用于企业应用程序的双列表框多选下拉组件。 动机 ...

    vue下拉组件

    vue-listbox-multiselect (vue-listbox-multiselect)

    Vue Dual list-box multi-select drop-down component for enterprise applications.

    Vue用于企业应用程序的双列表框多选下拉组件。

    动机 (Motivation)

    There are several good multi-select components available for Vue. However, none are suitable for enterprise app development. In a typical enterprise app, you are often challenged offering a simple drop-down which allows the user to filter through thousands of categorized items from the server, and allows the user to select hundreds. At Banner Edge Media, we have been using a similar component for multiple years. As we migrate to Vue, we wanted to share this component with the Vue community, and together make it even better.

    Vue有几个不错的多选组件。 但是,没有一种适合企业应用程序开发。 在典型的企业应用程序中,您经常面临提供一个简单下拉菜单的挑战,该下拉菜单允许用户从服务器中筛选成千上万个分类项目,并允许用户选择数百个。 在Banner边缘媒体,我们多年来一直使用类似的组件。 迁移到Vue时,我们希望与Vue社区共享此组件,并一起使其变得更好。

    建立 (Setup)

    Install:

    安装:

    # NPM
    npm install @banneredge/vue-listbox-multiselect

    Usage:

    用法:

    <script lang="ts">
    import Vue from 'vue';
    import VueListboxMultiselect from '@banneredge/vue-listbox-multiselect';
    import dataSet from './usCities';
    
    export default Vue.extend({
      name: 'ServeDev',
      components: {
        VueListboxMultiselect
      },
      data() {
        return {
          selectedList: [] as any[],
        };
      },
      methods: {
        async search(query: string): Promise<any[]> {
          const ids = this.selectedList.map((x) => x.id);
          let subset = dataSet.filter((x) => !ids.includes(`${x.state}-${x.city}`));
    
          if (!query) {
            subset = subset.slice(0, 100);
          } else {
            const q = query.toLowerCase();
            subset = subset.filter((x) => x.city.toLowerCase().includes(q) || x.state.toLowerCase().includes(q));
            subset = subset.slice(0, 100);
          }
    
          return subset.map((x: any) => {
            return {
              id: `${x.state}-${x.city}`,
              value: x.city,
              group: x.state
            }
          });
        },
      },
    });
    </script>
    
    <template>
      <v-app id="app">
        <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
        <vue-listbox-multiselect
            v-model="selectedList"
            :search-function="search"
            placeholder="Search Items"
            style="width: 300px; margin: 20px auto"
            size="medium"
            :hide-search="false"
        />
      </v-app>
    </template>
    

    笔记: (Notes:)

    • The current version is heavily dependent on Vuetify with mdi icons for the arrows

      当前版本严重依赖Vuetify,带有箭头的MDI图标

    • There is no direct way to pass in the items, everything must go through the async search function. The function will get called with a blank query on load.

      没有直接传递项目的方法,所有内容都必须通过异步搜索功能进行。 加载时将使用空白查询来调用该函数。

    • You must implement your own limit, filtering and excluding selected items (See examples). This is set up because we assume most use-cases will be calling the server for data and that will need to be handled on the server.

      您必须实现自己的限制,过滤并排除所选项目(请参见示例)。 进行此设置是因为我们假设大多数用例将在服务器上调用数据,并且需要在服务器上进行处理。

    • There is lots of room for improvement, so please check out the Roadmap and contribute!

      还有很多改进的空间,因此请查看路线图并做出贡献!

    • Current recommendation is to pull 100 results with each query. Users do not need to scroll through more, they can just search to get what they need.

      当前的建议是在每个查询中提取100个结果。 用户不需要滚动更多内容,他们只需搜索即可获得所需内容。

    道具 (Props)

    PropDescription
    v-model Model to bind output to. You can set it initially to pre-select items. Note: you will need to exclude selected items from each query. Type: {id: string, value: string, group?: string}. The component will NOT watch for changes on the model and re-fresh the list.
    :search-function Function that will get called when the component needs data. It should be async or return a Promise. A string query will be passed in as the only parameter. While the promise is not fulfilled, a loading indicator will show.
    placeholder Text to show in the select field when no items are selected. Defaults to 'None'
    size How wide to expand the menu. Options are, null, medium, large, x-large. They will fall back on a size that fits. Default size is 366px wide, it will look good in most modern mobile devices.
    hide-search Hides the search bar. Search is on by default. If you have a small list and still want to use this component, you have the option to turn it off. You can also turn it off dynamically if items < 10 for example.
    Struts 描述
    模型 绑定输出的模型。 您可以将其初始设置为预选项目。 注意:您需要从每个查询中排除选定的项目。 类型:{id:字符串,值:字符串,组?:字符串}。 该组件将不会监视模型上的更改并重新刷新列表。
    :搜索功能 当组件需要数据时将调用的函数。 它应该是异步的或返回一个Promise。 字符串查询将作为唯一参数传递。 当未实现承诺时,将显示加载指示器。
    占位符 没有选择任何项目时在选择字段中显示的文本。 默认为“无”
    尺寸 展开菜单的宽度。 选项为null,medium,large,x-large。 它们将退回到合适的尺寸。 默认大小为366像素宽,在大多数现代移动设备中看起来都不错。
    隐藏搜索 隐藏搜索栏。 默认情况下,搜索处于打开状态。 如果列表较小,但仍要使用此组件,则可以选择将其关闭。 例如,如果项目<10,您也可以动态关闭它。

    路线图: (Roadmap:)

    • Add demo and documentation static site.

      添加演示和文档静态站点。

    • Clean up the code a bit and add comments.

      稍微整理一下代码并添加注释。

    • Add interfaces for parameters

      添加参数接口

      • We should add a few more features before making contracts

        签订合同之前,我们应该添加一些其他功能
    • Speed it up

      加快速度

      • It gets a little slow when you have 1000 items, and you have to group and sort them

        当您有1000个项目时,它会变得有点慢,并且您必须对它们进行分组和排序
      • Keeping the limit to 100 makes it work well.

        限制为100会使它正常工作。
    • Test browser compatibility.

      测试浏览器兼容性。

      • Seems to work well in Chrome, Firefox, Edge

        似乎可以在Chrome,Firefox,Edge中正常运行
      • We should establish what we support.

        我们应该建立我们所支持的。
    • Remove Vuetify dependency

      删除Vuetify依赖

      • Vuetify provides some very cool pre-made components, but we want this to be usable with any library.

        Vuetify提供了一些非常酷的预制组件,但是我们希望它可以在任何库中使用。
    • Figure out a smart way to do widths.

      找出做宽度的聪明方法。

      • Sometimes if we have a large monitor and long item names, we want to stretch it very wide. If the item names are not long it does not look good.
      • 有时,如果我们有一个大型监视器和较长的项目名称,则我们希望将其扩展得很宽。 如果项目名称不长,则看起来不太好。
    • Add a prop to Hide Search (May want to keep it for all use-cases?)

      在“隐藏搜索”中添加一个道具(可能要在所有用例中保留它吗?)

      • Sometimes we want to use this with a very small list and don't need the search box.有时我们希望将其与很小的列表一起使用,而不需要搜索框。
    • Add test coverage?

      增加测试范围?

    • Add a way to reset it to original state dynamically

      添加一种将其动态重置为原始状态的方法

      • Reset selected list

        重置所选列表
      • Re-run blank query

        重新运行空白查询
      • Through Emitter?

        通过发射器?
    • Add slots to make it fully customizable

      添加插槽以使其完全可定制

    • Add more input interactions

      添加更多输入互动

        • Click (Select)

          单击(选择)
        • Ctrl-Click (Select Multiple)

          按住Ctrl键单击(选择多个)
        • Double-Click (Move Item)

          双击(移动项目)
        • Shift-Click

          Shift-点击
        • Ctrl-A ?

          Ctrl-A吗?
        • Move with arrow keys?

          用箭头键移动?
        • Shift-arrow keys?

          Shift键?

    翻译自: https://vuejsexamples.com/vue-dual-listbox-multiselect-dropdown-component/

    vue下拉组件

    展开全文
  • vue下拉列表

    2019-07-24 17:43:00
    vue处理下拉列表 vue绑定下拉列表 <select id="selected" v-model="selected"> <option value="" >{{selecttext}}</option> </select> selected:...

    vue处理下拉列表  vue绑定下拉列表

            <select id="selected" v-model="selected">
               <option value="" >{{selecttext}}</option>
            </select>
              selected:'',
            selecttext:'选择优惠券',
                        //处理优惠券
                              let list=[];
                              list=data.list;
                              for(let i=0;i<list.length;i++){
                                  $("#selected").append("<option  value='"+list[i].id+"'>"+list[i].name+"</option>");
                                  }   

     

    转载于:https://www.cnblogs.com/qq376324789/p/11239674.html

    展开全文
  • vue 下拉刷新数据

    2020-04-01 12:19:08
    借助vant完后下拉刷新出来新数据 这是vant官网的list 列表 https://youzan.github.io/vant/#/zh-CN/list 直接上代码 <template> <div> <van-pull-refresh v-model="refreshing" @refresh=...

    借助vant完后下拉刷新出来新数据

    这是vant官网的list 列表
    https://youzan.github.io/vant/#/zh-CN/list
    

    直接上代码

    <template>
      <div>
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <ul>
                <li v-for="(e,i) in list" :key="i">
                    <img v-lazy="e.img" alt="">
                    <p>{{e.t1}}</p>
                    <p>{{e.t2}} {{e.t3}}</p>
                    <p>{{e.t4}}</p>
                </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>
    </template>
    
    <script>
    import axios from "axios"
    export default {
       data() {
        return {
          list: [],
          loading: false,
          finished: false,
          refreshing: false,
          page:0,
          number:10,
          all:""
        };
      },
      mounted()
      {
        axios.get("/static/data.json").then((res)=>{
          this.all=res.data.list.length
          this.list=res.data.list.slice(this.page,this.number)
        })
      },
      methods: {
        onLoad() {
          setTimeout(() => {
            if (this.refreshing) {
              //这是下拉刷新新数据
              this.page=this.page+10;
              this.number=this.number+10;
              axios.get("/static/data.json").then((res)=>{
                var data = res.data.list.slice(this.page,this.number)
                data.forEach((e)=>{
                this.list.unshift(e)
              })
            })
              this.refreshing = false;
            }
    
    
            //这里面可以写滚动到底部加载更多数据
    
            // for (let i = 0; i < 10; i++) {
            //   this.list.push(this.list.length + 1);
            // }
            
          
    
            this.loading = false;
    
            if (this.list.length >= this.all) {
              this.finished = true;
            }
          }, 3000);
        },
        onRefresh() {
          // 清空列表数据
          this.finished = false;
    
          // 重新加载数据
          // 将 loading 设置为 true,表示处于加载状态
          this.loading = true;
          this.onLoad();
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
     ul{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            li{
                width: 50%;
            }
        }
    </style>
    
    展开全文
  • vue 下拉刷新下拉加载组件(请求封装,搜索) 组件内容 <template> <div class="list-module" ref="List"> <mt-loadmore :top-method="pullRefresh" :bottom-all-loaded="allLoaded" ref="loadmore...

    vue 下拉刷新下拉加载组件(请求封装,搜索)

    组件内容

    <template>
        <div class="list-module" ref="List">
            <mt-loadmore :top-method="pullRefresh" :bottom-all-loaded="allLoaded" ref="loadmore">
                <ul class="ulis" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
                    :infinite-scroll-distance="distance">
                    <li v-for="(item,index) in list" :key="index">
                        <slot :item="item" :index="index"></slot>
                    </li>
                </ul>
                <!-- <p v-show="!loading" class="loading-state">
                   <mt-spinner type="fading-circle" :size="30"></mt-spinner>
                   &nbsp;&nbsp;&nbsp;加载中...
                 </p>-->
                <p class="txt-center no-data" v-show="noData">暂无数据!</p>
                <div slot="top" class="loading-top-state">
                <span v-show="refreshing" style="display: inline-block">
                  <mt-spinner type="snake" :size="30"></mt-spinner>
                </span>
                </div>
            </mt-loadmore>
        </div>
    </template>
    
    <script>
        export default {
            name: "newScroll",
            props: {
                interface: {
                    type: String,
                    default:''
                },
                size: {},
                param: {},
                distance: {
                    default: 10
                },
                hasChange: {
                    default: true
                }
            },
            data() {
                return {
                    allLoaded: false,
                    loading: false,
                    refreshing: false,
                    currentPage: -1,
                    list: [],
                    noData: false,
                }
            },
            watch: {
                interface() {
                    if (!this.hasChange) {
                        this.currentPage = 0;
                        this.list = [];
                        this.getList();
                    }
                },
                param: {
                    handler() {
                        if (this.hasChange) {
                            this.currentPage = 0;
                            this.list = [];
                            this.getList()
                        }
                    },
                    deep: true
                }
            },
            updated() {
                this.$emit('change')
            },
            mounted() {
                this.$nextTick(() => {
                    // 保证包裹下拉列表的div的高度
                    this.h = document.documentElement.clientHeight - this.$refs.List.getBoundingClientRect().top
                    this.$refs.List.style.height = this.h + 'px';
                })
            },
            methods: {
                deleteIndex(index) {
                    this.list.splice(index, 1);
                },
                fresh() {
                    this.currentPage = 0;
                    this.list = [];
                    this.getList();
                },
                // 下拉刷新
                pullRefresh() {
                    this.refreshing = true;
                    this.currentPage = 0;
                    this.list = [];
                    this.getList();
                },
                // 上拉加载
                loadMore() {
                    this.currentPage++;
                    this.getList();
                },
                // 获取列表
                getList() {
                    let self = this;
                    if(!self.interface){
                        return
                    }
                    let data = {
                        page: self.currentPage,
                        per_page: self.size
                    };
                    if (self.param) {
                        data = Object.assign(data, self.param)
                    }
                    self.$newAjax({
                        type: 'get',
                        url: self.interface,
                        data: data,
                        success(res) {
                            localStorage.setItem('_list_total', res.total);
                            if (res.err_code === '0') {
    
                                self.noData = res.total === '0';
    
                                self.list = self.list.concat(res.data);
                                self.$emit('changeList',self.list);
                                if (self.list.length === parseInt(res.total)) {
                                    /*self.allLoaded = true;*/
                                    self.loading = true;
                                } else {
                                    self.loading = false;
                                }
                                setTimeout(() => {
                                    if (self.refreshing) {
                                        self.refreshing = false;
                                        self.$refs.loadmore.onTopLoaded();
                                    }
                                }, 1500)
                            }
                        },
                        dataError(res) {
                            self.loading = false;
                            console.log(res.err_msg);
                        }
                    })
                }
            }
        }
    </script>
    
    <style scoped>
        .mint-spinner {
            display:inline-block;
            vertical-align:middle;
        }
        .list-module {
            overflow:scroll;
        }
        .no-more-data, .no-data {
            line-height:75px;
            font-size:32px;
        }
        .mint-loadmore {
            min-height:100%;
        }
    </style>
    

    调用页面

    <div class="search-area">
    	<input class="txt-center" type="text" placeholder="搜索" v-model="newData.name">
    	<i class="iconfont icon-sousuo-"></i>
    </div>
    <new-scroll size=15 :interface="interFace" :param="newData" class="lists">
    	<template slot-scope="slotProps">
    		<ul class="list-content">
    	  		<li style="width: 25%;">{{(slotProps.index)+1}}</li>
    	 		<li style="width: 40%;">{{slotProps.item.created_at | cutBefore}}</li>
    	  		<li style="width: 35%;">{{slotProps.item.number}}</li>
    		</ul>
    	</template>
    </new-scroll>
    

    记住需要import

    	data() {
                return {
                  newData:{
                    name:''
                  },
                  interFace:请求的接口
                }
            },
    

    如果需要有底部固定的话可以再加一个钩子函数
    两个定义分贝对应你自己设置的class

    mounted() {
                // 控制列表的高度(减去底部高度)
                this.$nextTick(() => {
                    let list = document.querySelector('.list-module');
                    let bottom = document.querySelector('.toHome').clientHeight;
                    list.style.height = parseFloat(list.style.height) - bottom + 'px';
                })
            },
    
    展开全文
  • ul class="list-group"> <li class="list-group-item" v-for='(v, k) in redHtml' :class='{bg: k == index}' v-html="v" @click='enter(k)' @mouseenter='mouseEnter(k)' @mouseleave='mouseLeave(k)'>{{...
  • vue下拉刷新

    2019-07-27 16:12:12
    <orderitems :list="list" class="order-item" @click="toDeatil(list)"> import orderitems from '@/components/OrderItems' import BScroll from 'better-scroll' import apis from '@/api/order' ...
  • vue下拉列表去重

    千次阅读 2019-08-19 12:45:49
    var tempData =res.data.list; var hash = {}; tempData = tempData.reduce(function (item, next) { hash[next.post_name] ? '' : hash[next.post_name] = true && item.push(next); return item; }, []); self....
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 下拉列表 组件模板</title> </head> <body> <div id...
  • 之前也写过这个小组件,最近遇到select下加搜索的功能,所以稍微完善一下。 效果图: 子组件 dropdown.vue ... <div class=list-and-search class=isShow?> <div class=search-module clearfix v-show=
  • Vue下拉树组件

    2019-12-20 17:14:33
    allNode.forEach((element) => element.classList.remove('is-current')) }, filterNode (value, data) { if (!value) return true; return data.name.indexOf(value) !== -1; } }, watch: { value () { ...
  • 1.下拉列表传入的是一个string类型的List 2.下拉列表传入的是一个对象的list
  • vue下拉刷新 上拉加载

    2020-04-29 16:18:40
    <template> <van-pull-refresh v-model="isLoading" @refresh="onRefresh">...van-list v-model="loading" :finished="finished" :offset="50" finished-text="没有更多了" @load="onL...
  • vue下拉菜单 从后台获取数据

    千次阅读 2019-11-07 17:00:10
    <template> <section class="brand-list"> <div style="margin: 20px 0 0 20px"> <el-form :inline="true" :model="networkBasic" style="margin-left: 10px;" size="...
  • Vue下拉菜单实例demo

    2017-04-19 16:11:00
    效果图: 代码 1 // 组件三大块:样式结构 行为逻辑 数据 2 // //注册组件 组件名 组件描述 3 //注册组件 ... 6 // 不能共享一个对象 不然显示会一起运行 ... 9 Vue.component("custom-select"...
  • VUE 下拉菜单动态获取

    万次阅读 2018-03-26 11:19:15
    <li v-for="dataItem in selectList" @click="selectItem(dataItem)">{{dataItem.vName}} export default{ name:'autoSelect', props:{   //父级传过来的默认被选中的值 name:{ type:...
  • vue下拉刷新,滚动加载(Mint UI)

    千次阅读 2019-01-02 19:11:56
    1.安装Mint UI并配置环境 安装模块 npm i mint-ui -S 引入 Mint UI (1)完整引入 ...import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue' ...
  • 前端代码 data: () => { return { getBankCodeFun:getBankCode, accountSearch: '', } } methods: { accounQuerySearchAsync(queryString, callback) { var list = [{}]; let bankCode ; //如果传输入框是空值,给...
  • input式的下拉列表的东西 由于极其不爽这个input的下拉列表的样式所以自己写了一个 ... class="drop-down-list" :style = "getStyle" @click = "dropDown" ref = "drop"> {{value}} &l...
  • vue下拉自动刷新 上拉加载更多

    千次阅读 2018-07-04 16:15:28
    组件:vue-scrollergit:https://github.com/wangdahoo/vue-scrollerdemo:https://wangdahoo.github.io/vue-scroller/#/customSpinner下载链接:...
  • vue 下拉选是多选的,并且回显

    千次阅读 2019-02-28 13:08:56
    下拉选最重要的就是:下拉选的所有选项放在一个变量,选中的选项放在一个变量。 先加载所有选项的数据,再加载选中选项的数据,并且要保证select下拉的ID和v-model里边的id保持一致。 第一、加载的顺序,应该先...
  • vue实现下拉树——vue-treeselect

    千次阅读 2019-10-17 15:50:40
    vue实现下拉树——vue-treeselect 官网入口:vue-treeselect 里面提供了各种api,本章只简单介绍如何引用此组件以及一些简单功能。 npm下载安装插件指令 npm install --save @riophae/vue-treeselect 下面是 <...
  • 还在理解中,简单的先写一下。 思路: 1、安装插件 npm install vue-infinite-loading 2、引入插件 import InfiniteLoading from ...li v-for="(item,uniquekey) in list" :key="uniquekey"> <div class="im
  • 拖了很久的下拉刷新Vue组件——终于来了,其实写了很久了,一直拖着没写文章… 上效果图 技术点 其实技术点也没什么难的,主要使用H5的touch事件: touchstart: 手指触屏触发的事件,主要工作是在触发时获取鼠标...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,771
精华内容 2,308
关键字:

vue下拉list

vue 订阅