ddmarketing-common-filter
v1.0.4
Published
A common filter
Downloads
2
Readme
common-filter 组件
安装依赖
npm i ddmarketing-common-filter
开始使用
main.js文件中引入并注册
import selfFilter from 'ddmarketing-common-filter'
Vue.use(selfFilter)
参数说明
dialogshow:控制filter弹出层的显示与隐藏,初始化置为false
items:filter可选参数列表,初始化置为空数组,该参数内容会在init事件中从接口获取并做相应处理,具体操作参考下面#如何使用#
filterdb:初始化置为空数组,该参数存储已选择filter的相应内容,在查询操作时取其content即为查询条件
init:初始化方法,在其内调用接口获取filter初始列表并需要对其做相应操作
Apply:提交操作,在执行查询时调用该方法在其内做相应的调用接口和取值的操作
如何使用
<template>
<div>
<selfFilter
:dialogshow.sync="showfiltertt"
:filterdb.sync="filterdbtt"
:items.sync="itemstt2"
@Apply="applyf"
@init="init"
></selfFilter>
</div>
</template>
<script>
export default {
data(){
return{
showfiltertt: false,
filterdbtt: [],
itemstt2: [],
}
},
methods:{
init () {
//调用接口获取部分数据
taskSupportfilter().then((res) => {
//以下为固定操作,需要对数据进行处理才能正常使用
res.content.forEach(item => {
if (item.type == "number" || item.type == "date") {
item.label = ""
item.originlabel = ""
item.value1 = ""
item.value2 = ""
item.originvalue1 = ""
item.originvalue2 = ""
} else if (item.type == "string" || item.type == "selection" || item.type == "setSelection") {
item.label = ""
item.originlabel = ""
item.value1 = []
item.originvalue1 = []
} else if (item.type == "bool") {
item.label = ""
item.originlabel = ""
item.value1 = ""
item.originvalue1 = ""
}
})
this.itemstt2 = res.content
})
},
applyf () {
//filtertask为调用查询接口需要的参数,如下操作所示从filterdbtt的content取
this.filtertask = []
for (let i = 0; i < this.filterdbtt.length; i++) {
this.filtertask.push(this.filterdbtt[i].content)
}
//调用查询接口
this.getTasks()
},
},
}
</script>
特别说明
该组件还需要依赖element UI和亚马逊字体图标库
字体图标库需要引入的依赖如下:
"@fortawesome/fontawesome-free": "^6.0.0",
"@fortawesome/fontawesome-pro": "^6.0.0",
"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-brands-svg-icons": "^6.0.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@fortawesome/pro-duotone-svg-icons": "^6.0.0",
"@fortawesome/pro-light-svg-icons": "^6.0.0",
"@fortawesome/pro-regular-svg-icons": "^6.0.0",
"@fortawesome/pro-solid-svg-icons": "^6.0.0",
"@fortawesome/vue-fontawesome": "^2.0.6",
main.js里面引入即可:
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'