Simple vue 2 search component

Last update: Jul 27, 2022

vue-pro-search

Downloads Build & Deploy

simple vue 2 search component。

目录结构

.
├── README.md
├── lerna.json
├── package.json
├── packages             # 放置包的目录
│   ├── base                # 📦 包 @vue-monorepo-template/base
│   │   ├── cjs             # 🔄 编译后的 cjs 目录
│   │   ├── esm             # 🔄 编译后的 esm 目录
│   │   ├── package.json
│   │   ├── src             # 包源码目录
│   │   └── tsconfig.json
│ 
├── tsconfig.json
└── website              # 🐝 包实例测试,网站
    ├── README.md
    ├── babel.config.js
    ├── package.json
    ├── public
    ├── src
    └── vue.config.js

开发

  1. 安装
npm install
  1. 安装包和实例中的依赖
npm run bootstrap
  1. 编译包中代码
npm run build        # 编译所有包 📦 代码

npm run watch:base   # 实时编译 📦 @vue-monorepo-template/base
  1. 启动 website 实例网站
npm run start

demo

">
<template>
  <el-card>
    {{ info }}
    <pro-search
      :items="searchItems"
      :data-source="info"
      :show="show"
      @search="onSearch"
      @clear="clear"
    >
      <template v-for="(v, i) in renderColumns">
        <div
          :key="i"
          :slot="v.slot"
        >
          <el-input
            v-model="info[v.prop]"
            size="small"
          />
        div>
      template>
    pro-search>
  el-card>
template>
<script>
import ProSearch from 'vue-pro-search';
export default {
  name: 'App',
  components: {
    ProSearch,
  },
  data() {
    return {
      info: {},
      show: false,
    };
  },
  computed: {
    searchItems() {
      return [
        {
          type: 'input',
          label: '公司',
          prop: 'clueName',
          clearable: true,
        },
        {
          type: 'input',
          label: '姓名',
          prop: 'conntrName',
        },
        {
          type: 'select',
          label: '跟进状态',
          prop: 'followStatus',
          options: [{ label: '确定', value: '1' }],
        },
        {
          type: 'dateRange',
          label: '创建时间',
          prop: 'createDate',
        },
        {
          type: 'date',
          label: '更新时间',
          prop: 'updateDate',
        },
        {
          type: 'render',
          label: '时间',
          slot: 'aaa',
          prop: 'a',
          renderValue: this.info['a'],
        },
        {
          type: 'render',
          label: '时间2',
          slot: 'bbb',
          prop: 'b',
          renderValue: this.info['b'],
        },
        {
          type: 'radio',
          label: '水果',
          prop: 'fruit',
          options: [
            { label: '苹果', value: 'apple' },
            { label: '梨子', value: 'pear' },
          ],
        },
      ];
    },
    renderColumns() {
      return this.searchItems.filter((item) => item.type === 'render').map((item) => ({ ...item }));
    },
  },
  methods: {
    onSearch() {
      console.log(this.info, 'aaa');
    },
    clear() {},
  },
};
script>

<style>style>

Props

参数 说明 类型 默认值
dataSource 数据 Object {}
items 配置项 Array []
labelPosition 表单表头位置 String left
labelWidth 表单表头宽度 Number 90
labelMaxWidth 表单宽度 String 400px
size 表单大小 String small
showChangeBtn 是否展示切换按钮 Boolean true
span 非只读模式下,可以通过指定 24 列中每列的宽度来创建基本网格系统 string '8'
color 主题色 Boolean true
show 模式切换 boolean true

License

Licensed under the MIT License.

GitHub

https://github.com/ChenlingasMx/vue-pro-search
You might also like...

A very simple Chrome extension that enables fuzzy search of browsing histories.

A very simple Chrome extension that enables fuzzy search of browsing histories.

Chikamichi A very simple Chrome extension that enables fuzzy search of browsing histories and bookmark and tab. Inspired by Sidekick search dialog. Th

Aug 7, 2022

A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

Jul 25, 2022

A Vue.js search select component

A Vue.js search select component

Jul 25, 2022

A Vue.js search select component

A Vue.js search select component

Feb 15, 2019

:alien: A search component with suggestions, customizable and extendable.

:alien: A search component with suggestions, customizable and extendable.

vue-search-panel English | 简体中文 vue-search-panel is a search component with suggestions Contents Features Example Install Usage API Reference Features

Jul 12, 2022

🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Jul 11, 2022

vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Jul 19, 2022

Movue - Movie, Series Search Engine developed using omdb api with Vuejs. Vue Router, Vue Resource, Vuex

 Movue - Movie, Series Search Engine developed using omdb api with Vuejs. Vue Router, Vue Resource, Vuex

A project developed using omdb api with Vuejs. Vue Router, Vue Resource, Vuex were used in the development process

Apr 23, 2022

Vue-movie - Vue Movie Search with OMDB API

Vue-movie - Vue Movie Search with OMDB API

VUE MOVIE SEARCH You can find your favorite movies Languages and Tools Vue Js Vu

Jun 14, 2022

Movie search app with the Vue 3 Composition API

movie-search-vue A movie search application showcasing the new Composition API of Vue 3. The application is based on Vue 2 and uses the Composition AP

Jun 17, 2022

vue-fuse - A lightweight plugin for fuzzy search library, Fuse.js

vue-fuse A Vue.js pluggin for fuzzy search library, Fuse.js. This plugin wraps Fuse.js in a convenient component with most of the boilerplate and prop

Aug 9, 2022

Smart route search to make intelligent looking apps with Vue.js.

Smart route search to make intelligent looking apps with Vue.js.

Make your users dynamically navigate routes, make smart commands and queries with a single directive. Vue Smart Route allows you to create a query sys

Jul 15, 2022

A demo app that shows you how to use Vue & the Typesense InstantSearch adapter, to build rich search interfaces.

typesense-vue-instantsearch-demo This is a demo that shows you a quick search interface that was built with Vue and typesense-instantsearch-adapter. I

Jun 10, 2022

WaveBox 🦋: Movie Search App built with Vue 💚

WaveBox 🦋 An Movie Search Application Built with the IMDB API Requirements Build the web app using Vue The Web app will use the OMDB API Have a searc

Feb 24, 2022

vue-itunes-album-search-bookmark

vue-itunes-album-search-bookmark

vue-itunes-album-search-bookmark A web app (single page application) created with vue,vuex, bulma and buefy using free itunes search api. All bookmark

Oct 7, 2021

A half assed implementation of some search algorithms using Vue and javascript.

A half assed implementation of some search algorithms using Vue and javascript.

GRIDY Link: https://0xecho.github.io/gridy/dist/#/ What does this project do? What started out as a simple experiment to make a grid (not the css grid

Jan 9, 2022

A Completed todolist app built in Vue, have advanced filter feature , like filter by status, date, and have search , sort features

todo-app Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Jan 20, 2022

TMovieDB - A movie search listing site using vue.js

TMovieDB - A movie search listing site using vue.js

TMovieDB What is TMovieDB? The TMovieDB is a movie search listing site. Site: Ho

Jun 26, 2022

Star wars search built with vue.js

Star wars search built with vue.js

star-wars Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Mar 7, 2022
A Vue.js search select component

A Vue.js search select component

Feb 15, 2019
:alien: A search component with suggestions, customizable and extendable.
:alien: A search component with suggestions, customizable and extendable.

vue-search-panel English | 简体中文 vue-search-panel is a search component with suggestions Contents Features Example Install Usage API Reference Features

Jul 12, 2022
vue-fuse - A lightweight plugin for fuzzy search library, Fuse.js

vue-fuse A Vue.js pluggin for fuzzy search library, Fuse.js. This plugin wraps Fuse.js in a convenient component with most of the boilerplate and prop

Aug 9, 2022
An archetypical search engine for judiciary cases.
An archetypical search engine for judiciary cases.

An archetypical search engine for judiciary cases.

Oct 10, 2021
Catche provides a low-code way to add instant search to your website in two steps
Catche provides a low-code way to add instant search to your website in two steps

Catche Search Widget AKA a Ctrl/Cmd-K Menu or a Command Palette Catche provides a low-code way to add instant search to your website in two steps! Go

Aug 1, 2022
:mag_right: UI components built with Vue.js for ElasticSearch
:mag_right: UI components built with Vue.js for ElasticSearch

InnerSearch : Vue.js components for ElasticSearch What is InnerSearch ? An Open Source project created to help developers working with vue.js and Elas

Apr 27, 2022
React, React Native and Vue UI components for building data-driven apps with Elasticsearch
React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Reactive Search UI components library for Elasticsearch: Available for React, Vue and React Native Read how to build an e-commerce search UI a.) with

Aug 16, 2022
Quickie-search-movie-vue3 - Quickie Movie Search App Using Vue.js
Quickie-search-movie-vue3 - Quickie Movie Search App Using Vue.js

Quickie Movie Search App This application gives movie details which searched by

Mar 2, 2022
Movie search - Lets you see top streaming movies, search for movies and view their info

Movie-App Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

Jan 3, 2022
Simple vue 2 search component

Simple vue 2 search component

Jul 27, 2022