代码提交

components/Modal/index.vue

@@ -0,0 +1,140 @@
+<!--
+    @name: index
+    @author: kahu4
+    @date: 2023-10-31 15:14
+    @description：index
+    @update: 2023-10-31 15:14
+-->
+<script setup>
+import Popup from "@/components/Popup/index.vue";
+import { ref, toRefs } from "vue";
+
+const props = defineProps({
+  // 内容
+  content: {
+    type: String,
+    default: () => ''
+  },
+  // 确认文字
+  confirmText: {
+    type: String,
+    default: () => '确认'
+  },
+  // 取消文字
+  cancelText: {
+    type: String,
+    default: () => '取消'
+  },
+  // 是否展示取消
+  showCancel: {
+    type: Boolean,
+    default: () => true
+  },
+  // 是否展示提交
+  showConfirm: {
+    type: Boolean,
+    default: () => true
+  }
+})
+
+const {content, confirmText, cancelText, showCancel, showConfirm} = toRefs(props)
+
+const emits = defineEmits(['confirm', 'cancel'])
+
+const popupRef = ref()
+
+function show() {
+  popupRef.value.show()
+}
+
+function close() {
+  // something before close todo
+  popupRef.value.close()
+}
+
+function clickBtn(type = 'confirm') {
+  emits(type)
+  close()
+}
+
+defineExpose({show, close})
+</script>
+
+<template>
+  <Popup
+      ref="popupRef"
+      :showCloseable="false"
+      mode="center"
+  >
+    <view class="modal-inner">
+      <view class="content">
+        <slot>
+          {{ content }}
+        </slot>
+      </view>
+      <view
+          class="btn-group"
+          v-if="showCancel||showConfirm"
+      >
+        <view
+            class="btn cancel"
+            v-if="showCancel"
+            @click="clickBtn('cancel')"
+        >
+          {{ cancelText }}
+        </view>
+        <view
+            class="btn"
+            v-if="showConfirm"
+            @click="clickBtn('confirm')"
+        >
+          {{ confirmText }}
+        </view>
+      </view>
+    </view>
+  </Popup>
+</template>
+
+<style
+    scoped
+    lang="scss"
+>
+.modal-inner {
+  width: 70vw;
+  padding: 50rpx 40rpx 20rpx 50rpx;
+  box-sizing: border-box;
+
+  .content {
+    width: 100%;
+    text-align: center;
+    font-size: 34rpx;
+    margin-bottom: 40rpx;
+  }
+
+  .btn-group {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    position: relative;
+    gap: 30rpx;
+
+    .btn {
+      box-sizing: border-box;
+      flex: 1 0 40%;
+      text-align: center;
+      height: 80rpx;
+      line-height: 80rpx;
+      border: 1rpx solid #ee6d46;
+      background: #ee6d46;
+      color: #fff;
+    }
+
+    .cancel {
+      background: #fff;
+      color: #ee6d46;
+    }
+  }
+}
+</style>