demo3.vue 877 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <m-switch
  3. v-model="switchVal1"
  4. active-text="启用"
  5. inactive-text="停用">
  6. </m-switch>
  7. <m-switch
  8. v-model="switchVal2"
  9. active-text="启用"
  10. inactive-text="停用"
  11. active-color="#13ce66"
  12. inactive-color="#ff4949"
  13. style="display:block;margin-top:10px">
  14. </m-switch>
  15. <m-switch
  16. v-model="switchVal3"
  17. inline-prompt
  18. active-text="开"
  19. inactive-text="关"
  20. style="display:block;margin-top:10px">
  21. </m-switch>
  22. <m-switch
  23. v-model="switchVal4"
  24. inline-prompt
  25. active-text="开"
  26. inactive-text="关"
  27. active-color="#13ce66"
  28. inactive-color="#ff4949"
  29. style="display:block;margin-top:10px">
  30. </m-switch>
  31. </template>
  32. <script setup>
  33. import { ref } from "vue";
  34. const switchVal1 = ref(true);
  35. const switchVal2 = ref(true);
  36. const switchVal3 = ref(true);
  37. const switchVal4 = ref(true);
  38. </script>