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