feat: 反馈组件/Confirm

packages/confirm/index.vue

@@ -0,0 +1,112 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-06-25 15:55:08
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-07-11 02:37:57
+ * @FilePath: \uni\packages\confirm\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <View v-show="modelValue" h-100vh w-full w-750rpx relative bg="#818181" overflow-hidden z-1000>
+    <View class="th-prompt" w-400rpx text-center rounded-16rpx absolute top="1/3" left="1/2" ml="-200rpx" right-0 bg-white z-1001>
+      <View py-32rpx>
+        <View color="#3a3a3a" fs-17 font-500>
+          {{ title }}
+        </View>
+        <View v-if="title && content" h-16rpx />
+        <View color="#6a6a6a" fs-13 font-400>
+          {{ content }}
+        </View>
+      </View>
+      <View flex fs-15 border-t-1rpx border-t-solid border-t="#DCDCDC">
+        <View
+          v-show="showConfirm"
+          class="rounded-lb-16rpx"
+          active="bg-#f2f7ff"
+          :class="{
+            'rounded-rb-16rpx': !showCancel,
+          }"
+          flex-grow
+          color="#3b82f6"
+          py-16rpx
+          cursor-pointer
+          select-none
+          @click="confirm"
+        >
+          {{ confirmText }}
+        </View>
+        <View v-show="showConfirm && showCancel" w-1rpx bg="#dcdcdc" />
+        <View
+          v-show="showCancel"
+          class="rounded-rb-16rpx"
+          active="bg-#f2f7ff"
+          color="#6a6a6a"
+          flex-grow
+          :class="{
+            'rounded-lb-16rpx': !showConfirm,
+          }"
+          py-16rpx
+          cursor-pointer
+          select-none
+          @click="cancel"
+        >
+          {{ cancelText }}
+        </View>
+      </View>
+    </View>
+  </View>
+</template>
+
+<script lang="ts" setup name="Confirm">
+withDefaults(
+  defineProps<{
+    /** 是否显示 */
+    modelValue?: boolean
+    /** 标题 */
+    title?: string
+    /** 内容 */
+    content?: string
+    /** 确认按钮的默认值 */
+    confirmText?: string
+    /** 取消按钮的默认值 */
+    cancelText?: string
+    /** 是否显示确认按钮 */
+    showConfirm?: boolean
+    /** 是否显示取消按钮 */
+    showCancel?: boolean
+  }>(),
+  {
+    modelValue: false,
+    confirmText: '确定',
+    cancelText: '取消',
+    showConfirm: true,
+    showCancel: true,
+  },
+)
+
+const emit = defineEmits<{
+  /** 更新modelValue */
+  (event: 'update:modelValue', modelValue: boolean): void
+  /** 确认事件 */
+  (event: 'confirm'): void
+  /** 取消事件 */
+  (event: 'cancel'): void
+}>()
+
+function confirm() {
+  emit('update:modelValue', false)
+  emit('confirm')
+}
+
+function cancel() {
+  emit('update:modelValue', false)
+  emit('cancel')
+}
+</script>
+
+<style lang="scss">
+.th-modal {
+  box-shadow: 0px 1px 6px 0px rgba(216, 216, 216, 0.5)
+}
+</style>

stories/Confirm.stories.ts

@@ -0,0 +1,42 @@
+/*
+ * @Author: peerless_hero peerless_hero@outlook.com
+ * @Date: 2023-07-11 01:15:23
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-07-11 03:43:39
+ * @FilePath: \uni\stories\Confirm.stories.ts
+ * @Description:
+ *
+ */
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ThConfirm from '../packages/confirm/index.vue'
+
+const meta = {
+  title: '反馈组件/Confirm',
+  component: ThConfirm,
+  tags: ['autodocs'],
+  args: {
+    modelValue: true,
+    title: '确认提示',
+    content: '是否执行此操作？',
+    confirmText: '确定',
+    cancelText: '取消',
+    showConfirm: true,
+    showCancel: true,
+  },
+  argTypes: {
+    onConfirm: { action: 'clicked' },
+    onCancel: { action: 'clicked' },
+  },
+} satisfies Meta<typeof ThConfirm>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const OnlyConfirm: Story = {
+  name: '仅提示',
+  args: {
+    content: '提示描述',
+    showCancel: false,
+  },
+}