switch和radio项目中应用笔记

<template>
  <a-form-item :name="['formTheme', 'titleShow']">
    <!--
    switch 默认开启做法，反之默认关闭

switch 绑定的值 form.formTheme.titleShow
checked-children 表示开启的值为：展示
un-checked-children 表示关闭的值为： 收起
checkedValue  表示 选中时的值  值为 true
unCheckedValue 表示  非选中时的值  值为 false
-->
    <a-switch
      v-model:checked="form.formTheme.titleShow"
      checked-children="展示"
      un-checked-children="收起"
      :checkedValue="true"
      :unCheckedValue="false"
      class="campaignNameCheckbox"
    />
  </a-form-item>

  <!--  radio 默认开启做法，反之默认开启
  绑定 1 表示 是； 绑定 0 表示 否；
  默认为选择是，故 在state 变量agreementValue设置初始值为 1

  当有改变时，在 handleRadioChange 方法中获取到更改后的值，那么在方法里做赋值逻辑

  -->
  <a-radio-group v-model:value="agreementValue" @change="handleRadioChange">
    <a-radio :value="1" class="agreementValue">是</a-radio>
    <a-radio :value="0" class="agreementValue">否</a-radio>
  </a-radio-group>
</template>


<script>
import { Switch, Radio } from 'ant-design-vue';
import { reactive } from 'vue';

export default {
  name: 'switch',
  components: {
    ASwitch: Switch,
    ARadioGroup: Radio.Group,
    ARadio: Radio,
  },

  setup() {
    const state = reactive({
      agreementValue: 1,
      },
    });

    //  设置 formThemeVo.titleShow = true 表示默认开启
   //  （以下这行代码写法有误，只是为了精简描述，临时写在这，实际情况请结合项目业务逻辑放置）
    titleShow || (formThemeVo.titleShow = true);

  return {
    ...toRefs(state),

    handleRadioChange(value) {
      state.agreementValue = value.target.value;
    },

  },
  },
};
</script>

<style scoped></style>