本组件二次封装iview和element，可以在全局安装了Iview和element的项目或者局部引入了Select、el-input、datePicker、Button、Spin的页面中自由使用。
目录
效果展示
从左到右分别是：属性名、不限按钮、二级下拉、累计维度选择器、比较维度选择器、比较数值或区间、提示信息
从上到下分别是
功能描述
- 属性名、按钮名、初始数据均由父组件传给子组件
- 选中不限则该属性不做限制，取消选中则开始选择属性
- 二级下拉点击确认、普通下拉收起时进行数据校验
- 选择比较符号的时候，后面输入比较的数值
- 选择范围选项的时候，后面输入范围区间
- 校验的提示信息显示在右上角
- 二级下拉有数据加载动画
- 本组件依赖于组件cCompare和select
结构代码
<template>
<div class="a-pay">
<Row>
<Col flex="110px">
<span class="c-fix-title wt">{
{ attr_name }}</span>
</Col>
<Col flex="90px" v-if="nolimit">
<Button v-if="checked" type="primary" @click="noLimit">不限</Button>
<Button v-else @click="noLimit">不限</Button>
</Col>
<Col flex="auto">
<Button v-if="!select_show && !checked" type="primary" ghost @click="select_handle" >城市</Button >
<Button v-if="select_show && !checked" type="primary" @click="select_confirm" >确认</Button >
<Select v-if="!checked" v-model="dim" placeholder="累计维度" style="width: 140px" @on-open-change="dim_change" >
<Option v-for="item in dimList" :value="item.value" :key="item.value">{
{
item.label
}}</Option>
</Select>
<cCompare v-if="!checked" :init_judge="init_judge" v-model="judgeNum" :initNum="init_num" @getData="getJudge" />
<span v-show="tip_show && !checked" class="tip-span">{
{ Msg }}</span>
</Col>
</Row>
<div class="select-div" v-if="select_show && !checked">
<Spin size="large" fix v-if="spinShow"></Spin>
<selecter v-model="mult_group" :data="selectList" search :title="['一级', '二级']" @on-select="selectAll" @on-delete="delTag" @on-clear="clearTag" />
</div>
<Divider />
</div>
</template>
- checked：控制组合的显示隐藏
- select_show：控制二级下拉的显示隐藏
逻辑代码
// 全选
selectAll ({
list, check = true, current = '' }) {
let data
if (current) {
const item = getNameOfData(list, current)
data = item.children
} else data = list
data.forEach((ret) => {
if (ret.children && ret.children.length) {
ret.children.map((rec) => {
this.$set(rec, 'check', check)
return rec
})
} else this.$set(ret, 'check', check)
})
},
// 删除已选
delTag ({
list, name }) {
const data = getNameOfData(list, name)
if (data.children && data.children.length) {
this.selectAll({
list, check: false, current: data.value })
} else {
this.$set(data, 'check', false)
}
},
// 清空全部
clearTag ({
list }) {
clearTagOfData(list, this)
},
select_handle () {
if (this.selectList.length === 0) {
this.spinShow = true
this.select_show = !this.select_show
setTimeout(() => {
this.selectList = deepCopy(this.attrList)
this.select_init = deepCopy(this.attrList)
this.spinShow = false
}, 2000)
} else {
this.select_show = !this.select_show
}
},
select_confirm () {
this.select_show = !this.select_show
this.selectIds = gameGroup_handle(this.selectList).ids_arr
this.selectKeys = gameGroup_handle(this.selectList).keys_arr
this.selectLabels = gameGroup_handle(this.selectList).labels_arr
this.data_handel_emit()
// this.$emit('getData', this.selectKeys, this.selectLabels, this.attr_name)
},
dim_change (open) {
if (!open) {
this.dimLabel = this.dimList.find((item) => item.value === this.dim).label
this.data_handel_emit()
}
},
// 限制还是不限
noLimit () {
this.checked = !this.checked
if (this.checked) {
// 选中不限
this.$emit('getData', '不限', this.attr_name)
this.init_judge = null
this.judgeNum = null
} else {
if (this.tip_show) this.tip_show = false
this.$Message.info('这里有默认值哦~可以自行修改哦o(*￣▽￣*)ブ')
this.init_judge = 1
this.judgeNum = 1
this.judgeLabel = '>'
this.dim = 1
this.dimLabel = '累计充值金额'
this.data_handel_emit()
}
},
getJudge (label, judge, numRange, content) {
this.checked = false
this.judgeValue = judge
if (content) {
this.rangeContent = content
this.judgeRange = numRange
} else {
this.judgeLabel = label
}
this.data_handel_emit()
},
data_handel_emit () {
var resObj = {
}
// ------------验证------------
if (this.selectLabels.length === 0) {
this.Msg = 'Tips：您忘记选择城市了哦o(╥﹏╥)o'
this.tip_show = true
} else if (this.dim === null) {
this.Msg = 'Tips：您忘记选择累计维度了哦o(╥﹏╥)o'
this.tip_show = true
} else if (this.judgeNum === Infinity || this.judgeNum === 1e30) {
this.Msg = 'Tips：您输入的数值过大o(╥﹏╥)o请重新输入哦~~'
this.tip_show = true
} else if (this.judgeValue !== 7 && this.judgeNum === null) {
this.Msg = 'Tips：您输入的数值为空o(╥﹏╥)o请重新输入哦~~'
this.tip_show = true
} else if (
this.judgeValue === 7 &&
(this.rangeContent === '' || this.rangeContent === '不限')
) {
this.Msg = 'Tips：您忘记输入范围了哦o(╥﹏╥)o'
this.tip_show = true
} else {
// 验证通过
if (this.tip_show) this.tip_show = false
resObj.content = '游戏组：[' + this.selectLabels + ']的' + this.dimLabel
if (this.judgeValue === 7) {
// range
resObj.content = resObj.content + '的范围在' + this.rangeContent + '区间'
resObj.val = {
gameIds: this.selectIds,
selectKeys: this.selectKeys,
selectLabels: this.selectLabels,
dim: this.dim,
dimLabel: this.dimLabel,
judge: 7,
judgeRange: commit_range_handle(this.judgeRange),
rangeContent: this.rangeContent,
nolimit: false
}
} else {
// num
resObj.content = resObj.content + this.judgeLabel + this.judgeNum
resObj.val = {
gameIds: this.selectIds,
selectKeys: this.selectKeys,
selectLabels: this.selectLabels,
dim: this.dim,
dimLabel: this.dimLabel,
judge: this.judgeValue,
judgeLabel: this.judgeLabel,
judgeNum: this.judgeNum,
nolimit: false
}
}
this.$emit('getData', resObj, this.attr_name)
return 0
}
this.$emit('getData', '不限', this.attr_name)
}
- 二级下拉点击显示，点击确认之后隐藏
- select_confirm：二级下拉需要点击确认按钮才会启动校验
- data_handel_emit：拿到组合数据，进行校验和回传处理，校验失败给到具体的错误信息提示
组件应用
<aPay
attr_name="城市"
btn_name="城市"
:initData="init_pay_info"
:attrList="cityData"
@getData="pay_get"
></aPay>
import aPay from '@/components/attr-check/a-pay'
components: {
aPay
}
data () {
return {
init_pay_info: {
selList: [],
dim: 0,
judge: 0,
judgeNum: 0,
judgeRange: {
minNum: '',
maxNum: ''
}
}
}
}
- import引入——>组件注册——>使用
- 父——>子传参：attr_name属性名、btn_name按钮名、init_pay_info初始数据
事件钩子
// 拿到组合数据
pay_get (resObj, attr_name) {
var content
var obj
if (resObj === '不限' || resObj.content === 'null' || resObj.content === '') {
content = '不限'
obj = {
nolimit: true
}
} else {
content = resObj.content
obj = resObj.val
}
this.previewAttr.some((item) => {
if (item.attr_name === attr_name + ':') {
item.attr_content = content
}
})
switch (attr_name) {
case '城市':
this.groupObj.pfinfo_attr.pay_info = obj
break
}
}
- pay_get：拿到组合数据
github
完整代码：点击这里
京公网安备 11010502036488号