You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.7 KiB
72 lines
1.7 KiB
7 months ago
|
<!-- @format -->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="switchAlign">
|
||
|
|
<a-switch
|
||
|
|
v-model:checked="checked"
|
||
|
|
:checkedValue="1"
|
||
|
|
:unCheckedValue="0"
|
||
|
|
@click="changeBool()" />
|
||
|
|
<span v-if="configValue.expectedValue == 1 ? true : false">开</span>
|
||
|
|
<span v-else>关</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, ref, createVNode } from 'vue';
|
||
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||
|
|
import { Modal } from 'ant-design-vue';
|
||
|
|
export default defineComponent({
|
||
|
|
components: {
|
||
|
|
ExclamationCircleOutlined,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
configValue: {
|
||
|
|
type: Object,
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
},
|
||
|
|
listKey: {
|
||
|
|
type: String,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
emits: ['changeSwitch', 'blur'],
|
||
|
|
setup(props, ctx) {
|
||
|
|
let checked = ref<Boolean>(props.configValue.expectedValue);
|
||
|
|
//改变开关状态
|
||
|
|
const changeBool = () => {
|
||
|
|
// console.log('changeBool');
|
||
|
|
Modal.confirm({
|
||
|
|
title: '警告',
|
||
|
|
icon: createVNode(ExclamationCircleOutlined),
|
||
|
|
content: '确定要将进行此项操作?',
|
||
|
|
onOk() {
|
||
|
|
let value = {
|
||
|
|
configValue: checked.value,
|
||
|
|
index: props.index,
|
||
|
|
key: props.listKey,
|
||
|
|
};
|
||
|
|
ctx.emit('changeSwitch', value);
|
||
|
|
},
|
||
|
|
onCancel() {
|
||
|
|
checked.value = props.configValue.expectedValue;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return {
|
||
|
|
changeBool,
|
||
|
|
checked,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.switchAlign {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
span {
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|