aike/emis-sapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加 单选、多选组件

Browse Source
This commit is contained in:
aihe 2023-12-08 23:18:37 +08:00
parent 0b7d4aed61
commit ce666e27cd
2 changed files with 121 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
components/tpx-checkitems/tpx-checkitems.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<view v-for="(item, index) in list" :style="itemStyle"
@click="handleCheckBoxClick(item, index)"
>
<slot :item="item" :index="index" :checked="checkedVal.indexOf(item.val)>-1" :handleCheckFun="()=> { handleCheckBoxClick(item, index) }"
></slot>
</view>
</template>
<script>
const typeEnum = {
single: 'single',
multiple: 'multiple'
}
export default {
computed: {
checkedVal() {
let val = this.value
let res = []
if (typeof val == "object") {
res = val
}
if (typeof val == 'string' && val !== '') {
res = val.split(",")
}
if (typeof val == 'number') {
res = [val]
}
return res
},
},
props: {
list: {
default () {
return []
}
},
value: {
default () {
return []
}
},
type: {
default () {
return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
}
},
itemStyle: {
default () {
return ''
}
}
},
data() {
return {
}
},
created() {
},
onHide() {
},
destroyed() {},
methods: {
handleCheckBoxClick(curItem, index) {
let checkedVal = [].concat(this.checkedVal)
if (this.type) {
const curVal = curItem.val
const hasChked = checkedVal.indexOf(curVal) > -1
if (hasChked) {
checkedVal = checkedVal.filter(val => val != curVal)
} else {
if (this.type == typeEnum.multiple) {
checkedVal.push(curVal)
} else {
checkedVal = [curVal]
}
}
this.changeTabCheck(checkedVal)
}
this.$emit('onItemClick', { curItem, index, checked: checkedVal.indexOf(curItem.val)>-1 })
},
changeTabCheck(checkedVal) {
let oldVal = checkedVal
let val = oldVal
if (this.type == typeEnum.single) {
val = checkedVal[0]
}
this.$emit('onChange', val)
this.$emit('update:value', val)
}
}
}
</script>
<style scoped lang="scss">
</style>

83
components/tpx-tags/tpx-tags.vue
View File

@ -1,55 +1,31 @@
<template>
<view>
<view class="smp-tag" v-for="(item, dIndex) in list">
<u-tag :text="`${item.title}`" :plain="!checkedVal.indexOf(item.val) > -1" :type="mode"
border-color="transparent" shape="circle" :bg-color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?activeColor:color}`"
:color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?'#fff':'#666'}`"
@click="handleCheckBoxClick(item)" @close="handleDeleteItem(item)" :closable="closable">
</u-tag>
</view>
<tpx-checkitems :list="list" :type="type" :value="value" v-slot="current" item-style="display:inline-block;"
@onItemClick="handleoItemClick" @onChange="handleChange"
>
<view slot class="smp-tag">
<u-tag :text="`${current.item.title}`" :plain="!current.checked" :type="mode"
border-color="transparent" shape="circle" :bg-color="`${(current.checked || (mode == 'primary'))?activeColor:color}`"
:color="`${(current.checked || (mode == 'primary'))?'#fff':'#666'}`"
@close="handleDeleteItem(current.item)" :closable="closable"
@click="current.handleCheckFun"
>
</u-tag>
</view>
</tpx-checkitems>
</view>
</template>
<script>
const typeEnum = {
single: 'single',
multiple: 'multiple'
}
export default {
computed: {
checkedVal() {
let val = this.value
let res = []
if(typeof val == "object") {
res = val
}
if(typeof val == 'string' && val !== '') {
res = val.split(",")
}
if(typeof val == 'number') {
res = [val]
}
return res
},
},
props: {
list: {
default () {
return []
}
},
value: {
default () {
return []
}
},
type: {
default () {
return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
}
},
// ======================== 分割线， 上方是 tpx-checkitems属性 ======================
closable: {
default () {
return false
@ -86,36 +62,15 @@
destroyed() {},
methods: {
handleCheckBoxClick(curItem) {
if(this.type) {
const curVal = curItem.val
let checkedVal = [].concat(this.checkedVal)
const hasChked = checkedVal.indexOf(curVal) > -1
if(hasChked) {
checkedVal = checkedVal.filter(val=> val != curVal)
} else {
if(this.type == typeEnum.multiple) {
checkedVal.push(curVal)
} else {
checkedVal = [curVal]
}
}
this.changeTabCheck(checkedVal)
}
this.$emit('onItemClick', curItem)
},
handleDeleteItem(curItem) {
const newList = this.list.filter(t=> t.val != curItem.val)
this.$emit('onChange', newList)
this.$emit('onDelate', newList)
this.$emit('update:list', newList)
},
changeTabCheck(checkedVal) {
let oldVal = checkedVal
let val = oldVal
if(this.type == typeEnum.single) {
val = checkedVal[0]
}
handleoItemClick({ curItem }) {
this.$emit('onItemClick', curItem)
},
handleChange(val) {
this.$emit('onChange', val)
this.$emit('update:value', val)
}