Skip to content
On this page

linear

1.screenshot example

View demo

2.type linear code

Click me to view the code
vue
<script setup>
import { ref } from 'vue'
import { EverrightFilter } from 'everright-filter'
import 'everright-filter/dist/style.css'
const ERfilterRef = ref(null)
const lang = ref('zh-cn')
const httpParams = {
  options: {
    url: 'https://api.everright.site/api/filter/options',
    get: { // define get
      query: {
        a: 20
      }
    }
  },
  conditions: {
    url: 'https://api.everright.site/api/filter/conditions',
    get: { // define get
      query: {
        a: 20
      }
    }
  },
  props: {
    url: 'https://api.everright.site/api/filter/props',
    get: { // define get
      query: {
        a: 20
      }
    }
  },
  propValues: {
    url: 'https://api.everright.site/api/filter/propValues',
    get: { // define get
      query: {
        a: 50
      }
    }
  }
}
const handleListener = ({ type, data }) => {}
</script>
<template>
  <div>
    <EverrightFilter
      :lang="lang"
      type="linear"
      :httpParams="httpParams"
      @listener="handleListener"
      ref="ERfilterRef"/>
  </div>
</template>
vue
<script setup>
import { ref } from 'vue'
import { EverrightFilter } from 'everright-filter'
import 'everright-filter/dist/style.css'
const ERfilterRef = ref(null)
const lang = ref('zh-cn')
const handleListener = ({ type, data }) => {}
const getOptions = async () => {
  return new Promise((resolve, reject) => {
    resolve({
      data: {
        options: [],
        operators: {}
      }
    })
  })
}
const getConditions = async (params) => {
  return new Promise((resolve, reject) => {
    resolve({
      data: {
        options: [],
        operators: {}
      }
    })
  })
}
const getProps = async () => {
  return new Promise((resolve, reject) => {
    resolve({
      data: {
      }
    })
  })
}
const getPropValues = async (params) => {
  return new Promise((resolve, reject) => {
    resolve({
      data: {
      }
    })
  })
}
</script>
<template>
  <div>
    <EverrightFilter
      :lang="lang"
      @listener="handleListener"
      :getOptions="getOptions"
      :getConditions="getConditions"
      :getProps="getProps"
      :getPropValues="getPropValues"
      ref="ERfilterRef"/>
  </div>
</template>

3.API

Attributes

NameTypeDescriptionAccepted ValuesDefault
httpParamsObjectDefine filter four interfaces-Refer to the demo
typeStringDefine filter type-linear|matrix|quick-search|quick-filter
langStringi18nzh-cn|enzh-cn
isShowValidateStateBooleanWhether to display the verificationtrue|falsetrue
ruleLimitNumberDefine the number of filter conditions--1
getOptionsFunctionDefine API options data--
getConditionsFunctionDefine API conditions data--
getPropsFunctionDefine API props data--
getPropValuesFunctionDefine API propValues data--

Exposes

NameDescriptionParameters
setDataSet data-
getDataGet data, internal verificationtrue|false Whether to verify
pushDataadd filtervalue
clearDataClear filter conditions or clear value-

Event

NameDescription
listenerAll events inside the filter are sent through this event, distinguished by type

type:

  • init

    trigger rendering end

  • triggerChange

    trigger change