first

components/JSwitch/JSwitch.vue

@@ -0,0 +1,45 @@
+<template>
+  <switch :checked="flag" :disabled="disabled" color="#238FFC" :style="{ transform: 'scale(' + scale + ')', margin: margin }" @change="change" @tap="emits('click')" />
+  <JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
+</template>
+
+<script setup>
+import { ref, watchEffect } from 'vue'
+const props = defineProps({
+  scale: { type: Number, default: 0.8 }, //控制开关大小 倍数 默认.8
+  margin: { type: String, default: '0' }, // 控制开关外边距默认0
+  tips: { type: String }, //修改提示语不传使用 默认tips弹出层提示语
+  bol: { type: Boolean }, //开关状态
+  index: { type: Number, default: 0 }, // 列表渲染索引值
+  confirmTips: { type: Boolean, default: true }, //是否需要提示弹窗默认 需要
+  disabled: { type: Boolean, default: false }, // 是否禁用 默认否
+})
+const emits = defineEmits(['confirm', 'cancel', 'click'])
+const flag = ref()
+
+watchEffect(() => {
+  flag.value = props.bol
+})
+
+const jeepayPopupConfirmRef = ref() //提示弹窗
+
+const change = (e) => {
+  flag.value = e.detail.value
+  if (!props.confirmTips) return confirm()
+  jeepayPopupConfirmRef.value
+    .open(props.tips || '确定修改状态？')
+    .then(() => {
+      confirm()
+    })
+    .catch(() => {
+      flag.value = !flag.value
+      emits('cancel', flag.value)
+    })
+}
+
+const confirm = () => {
+  emits('confirm', flag.value)
+}
+</script>
+
+<style lang="scss" scoped></style>