不通过el-switch切换开启和关闭,加上disabled,改一下样式。switch外层包裹一等div,给div绑定click事件,通过click控制dialog,再进行判断。
<template>
<div class="appMain">
<div>
<div style="display: flex;width:600px;justify-content:space-between" class="edit-container">
<el-row class="edit-header" justify="space-between">
<div>
<i class="splitIcon"></i>
<span>xxxxx</span>
</div>
<div @click="handleStatus()">
<el-switch style="margin-left:15px" v-model="setLagg" disabled />
</div>
</el-row>
</div>
</div>
<div>
<el-dialog v-model="centerDialogVisible" title="确认" width="30%" align-center :close-on-click-modal="false"
:before-close="handleClose">
<span>确认</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleConfirm">
{{ 确认 }}
</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</template>
<script setup>
import { ref } from "vue"
const setLagg = ref(true)
const centerDialogVisible = ref(false)
const handleClose = () => {
centerDialogVisible.value = false
}
const handleConfirm = () => {
setLagg.value = false
centerDialogVisible.value = false
}
const handleCancel = () => {
centerDialogVisible.value = false
}
const handleStatus = () => {
if (setLagg.value == true) {
centerDialogVisible.value = true
} else {
setLagg.value = !setLagg.value
}
}
</script>
<style scoped>
:deep(.el-switch.is-disabled .el-switch__core, .el-switch.is-disabled .el-switch__label) {
cursor: default;
}
:deep(.el-switch.is-disabled) {
opacity: 1;
}
</style>