样式修改
This commit is contained in:
@@ -9,6 +9,7 @@
|
|||||||
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限
|
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
<div style="padding-top:10px;">
|
<div style="padding-top:10px;">
|
||||||
<el-checkbox-group v-model="checkList.list">
|
<el-checkbox-group v-model="checkList.list">
|
||||||
<el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
|
<el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
|
||||||
@@ -24,7 +25,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive ,ref,watchEffect,watch,defineExpose} from 'vue';
|
import { reactive, ref, watchEffect, watch, defineExpose } from 'vue';
|
||||||
//props
|
//props
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
list: {
|
list: {
|
||||||
@@ -45,48 +46,48 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
watchData: {
|
watchData: {
|
||||||
type: Function,
|
type: Function,
|
||||||
default:()=>{
|
default: () => {
|
||||||
return ()=>{}
|
return () => { }
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
clearList:{
|
clearList: {
|
||||||
type:Boolean,
|
type: Boolean,
|
||||||
default:true
|
default: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
let list =reactive([])
|
let list = reactive([])
|
||||||
let show =null
|
let show = null
|
||||||
let closeSeach = props.closeSeach
|
let closeSeach = props.closeSeach
|
||||||
let selectSeach = props.selectSeach
|
let selectSeach = props.selectSeach
|
||||||
let watchData= props.watchData
|
let watchData = props.watchData
|
||||||
|
|
||||||
//所选选项
|
//所选选项
|
||||||
let checkList = reactive({list:[]})
|
let checkList = reactive({ list: [] })
|
||||||
|
|
||||||
//监听刷新
|
//监听刷新
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
show = props.show
|
show = props.show
|
||||||
list.splice(0,list.length)
|
list.splice(0, list.length)
|
||||||
list.push(...props.list)
|
list.push(...props.list)
|
||||||
// console.log(show)
|
// console.log(show)
|
||||||
if(show&&props.clearList){
|
if (show && props.clearList) {
|
||||||
checkList.list=[]
|
checkList.list = []
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(()=>checkList.list,(nval,avl)=>{
|
watch(() => checkList.list, (nval, avl) => {
|
||||||
watchData(nval)
|
watchData(nval)
|
||||||
})
|
})
|
||||||
|
|
||||||
//取消
|
//取消
|
||||||
let closeBtn=()=>{
|
let closeBtn = () => {
|
||||||
// checkList.list.splice(0,checkList.list.length)
|
// checkList.list.splice(0,checkList.list.length)
|
||||||
closeSeach()
|
closeSeach()
|
||||||
}
|
}
|
||||||
|
|
||||||
//设置参数
|
//设置参数
|
||||||
let setCheckData=(data)=>{
|
let setCheckData = (data) => {
|
||||||
checkList.list=data
|
checkList.list = data
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
@@ -168,11 +169,19 @@ defineExpose({
|
|||||||
.top-box {
|
.top-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px dashed #ebebeb;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
|
||||||
|
background-size: 2px 1px;
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
margin-top:20px;
|
||||||
|
margin-bottom:5px;
|
||||||
|
}
|
||||||
|
|
||||||
.none-btn {
|
.none-btn {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
@@ -207,16 +216,18 @@ defineExpose({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
||||||
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
|
|
||||||
background:#50e3c2;
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
border-color:#50e3c2;
|
background: #50e3c2;
|
||||||
|
border-color: #50e3c2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -378,6 +378,7 @@ defineExpose({
|
|||||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
padding: 20px 25px;
|
padding: 20px 25px;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
|
|||||||
@@ -30,8 +30,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
|
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
|
||||||
v-show="selectTabCheck.id !== item.id" class="img" alt="">
|
v-show="selectTabCheck.id !== item.id&&item.id" class="img" alt="">
|
||||||
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
|
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id&&item.id"
|
||||||
class="img" alt="">
|
class="img" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="hid-box">
|
<div class="hid-box">
|
||||||
@@ -385,6 +385,7 @@ let setSelectPosition = (type) => {
|
|||||||
//点击区域/学校选项
|
//点击区域/学校选项
|
||||||
let clearSelectTabCheck = ref(true)
|
let clearSelectTabCheck = ref(true)
|
||||||
let setSelectData = (id, data = [], title) => {
|
let setSelectData = (id, data = [], title) => {
|
||||||
|
console.log(data)
|
||||||
showSelect.value = true
|
showSelect.value = true
|
||||||
if (id === selectTabCheck.id) {
|
if (id === selectTabCheck.id) {
|
||||||
clearSelectTabCheck.value = false
|
clearSelectTabCheck.value = false
|
||||||
@@ -399,6 +400,7 @@ let setSelectData = (id, data = [], title) => {
|
|||||||
schoolSelectObj.title = ''
|
schoolSelectObj.title = ''
|
||||||
setLocation('location',[selectTabCheck.id + ''])
|
setLocation('location',[selectTabCheck.id + ''])
|
||||||
if (id === '') {
|
if (id === '') {
|
||||||
|
selectData.data=[]
|
||||||
setSeachCondition('location', [])
|
setSeachCondition('location', [])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2861,6 +2861,7 @@ img {
|
|||||||
height: 16px;
|
height: 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user