Nit-Picking Magistrate

    vue3-search-bar

    1.3.7 • Public • Published

    search-bar

    一个可展开折叠的 element-plus 风格的搜索组件,使用 vue3 + ts 实现。目前默认支持在 vue3 + ts 环境中使用。

    如果想在 vue3 + js 的项目中使用,可以引入 /lib 文件中编译的 vue3-search-bar.common.js 文件,记得同时引入 vue3-search-bar.css

    通常给搜索区域一个绝对定位的父元素,使得搜索组件脱离文档流,不影响页面下半部分的布局

    预览

    • 收起状态: 收起
    • 展开状态: 展开

    安装

    npm install vue3-search-bar

    使用

    • 全局注册
    import { createApp } from 'vue'
    import App from './App.vue'
    import SearchBar from 'vue3-search-bar'
    
    createApp(App)
      .use(SearchBar)
      .mount('#app')
    • 按需引用
    <template>
      <search-bar :search-config="searchConfig" @search="handleSearch">
        <el-button type="primary">右侧按钮</el-button>
      </search-bar>
    </template>
    
    <script lang="ts" setup>
    import { onMounted } from 'vue'
    import { SearchBar, ISearchConfig } from 'vue3-search-bar'
    
    const searchConfig: ISearchConfig[] = [
      {
        label: '状态',
        field: 'stautus',
        type: 'select',
        defaultShow: true,
        options: [
          {
            label: '正在进行',
            value: 'running'
          },
          {
            label: '已完成',
            value: 'finished'
          }
        ],
        multiple: false
      },
      {
        label: '项目名称',
        field: 'name',
        defaultShow: true,
        type: 'input'
      },
      {
        label: '型号',
        field: 'model',
        type: 'select',
        options: []
      },
      {
        label: '是否修正',
        field: 'modified',
        type: 'switch',
        default: true
      },
      {
        label: '创建日期',
        field: 'createDate',
        type: 'datetimerange'
      },
      {
        label: '模态不变量',
        field: 'const',
        type: 'inputrange'
      }
    ]
    
    function handleSearch () {
      console.log('search')
    }
    
    onMounted(async () => {
      // 模拟异步请求回来的数据
      setTimeout(() => {
        searchConfig.forEach(item => {
          if (item.field === 'model') {
            item.options = ['model1', 'model2'].map(item => ({ label: item, value: item }))
          }
        })
      }, 500)
    })
    </script>
    • 如果需要 v-ellipsis 可以引入注册

    v-ellipsis 是一个溢出隐藏时鼠标悬浮显示 title 的全局自定义指令

    // 安装
    import { createApp } from 'vue'
    import App from './App.vue'
    import { Ellipsis } from 'vue3-search-bar'
    
    createApp(App)
      .directive('ellipsis', Ellipsis)
      .mount('#app')
    <!-- 使用: 需要有确定的宽度,固定宽度或百分比宽度均可 -->
    <div v-ellipsis style="width: 100%;">如果文字过长,会隐藏超出的部分并以...显示,鼠标悬浮会显示所有内容</div>
    • 在js中使用
    import { createApp } from 'vue'
    import App from './App.vue'
    import SearchBar, { Ellipsis } from 'vue3-search-bar/lib/vue3-search-bar.common.js'
    import 'vue3-search-bar/lib/vue3-search-bar.css'
    
    createApp(App)
      .use(SearchBar)
      .directive('ellipsis', Ellipsis)
      .mount('#app')

    开发

    Project setup

    npm install
    

    Compiles and hot-reloads for development

    npm run serve
    

    Compiles and minifies for production

    npm run build
    

    Lints and fixes files

    npm run lint
    

    编译 js

    npm run lib
    

    Install

    npm i vue3-search-bar

    DownloadsWeekly Downloads

    3

    Version

    1.3.7

    License

    MIT

    Unpacked Size

    8.31 MB

    Total Files

    27

    Last publish

    Collaborators

    • wudandong