feat: 反馈组件/Prompt

packages/prompt/index.vue

@@ -1,37 +1,102 @@
 <!--
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-06-25 15:55:08
- * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-06-25 19:14:25
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-07-11 04:02:58
  * @FilePath: \uni\packages\prompt\index.vue
  * @Description:
  *
 -->
 <template>
-  <div>xx</div>
-  <!-- <view>
-    xxx
-  </view> -->
+  <View v-show="show" h-100vh w-750rpx relative bg="#818181" overflow-hidden z-1000 @click="cancel">
+    <View rounded-t-48rpx w-750rpx absolute bottom-0 bg-white z-1001>
+      <View mt-32rpx mb-24rpx mx-48rpx fs-30 font-400>
+        {{ title }}
+      </View>
+      <View text-center mx-48rpx>
+        <textarea
+          v-model="value"
+          w-654rpx
+          :placeholder="placeholder"
+          border-1rpx
+          border-solid
+          border="#dcdcdc"
+          placeholder-class="textarea-placeholder"
+          w-full
+          rounded-8rpx
+          rows="5"
+          :maxlength="maxlength"
+        />
+        <button
+          w-654rpx
+          h-80rpx
+          color-white
+          border="none"
+          bg="#2979ff"
+          rounded-8rpx
+          @click="confirm"
+        >
+          {{ confirmText }}
+        </button>
+      </View>
+    </View>
+  </View>
 </template>
 
 <script lang="ts" setup name="Prompt">
+import { ref } from 'vue'
+
 const props = withDefaults(
   defineProps<{
   /** 标题 */
     title: string
-    /** 是否必填 */
-    required?: boolean
+    /** 是否显示 */
+    show?: boolean
+    /** 文本框绑定的值 */
+    textarea?: string | number
     /** 输入框的提示文字 */
     placeholder?: string
-    /** 输入框的默认值 */
-    defaulrValue?: string
+    /** 确认按钮的文字 */
+    confirmText?: string
+    /** 限制输入字符数 */
+    maxlength?: number | string
+    radio?: Array<{ text?: string; value?: number | string }>
   }>(),
   {
-    required: false,
+    show: false,
+    radio: () => [],
   },
 )
-console.log(uni)
 
-const mask = ref(false)
-const value = ref(props.defaulrValue)
+const emit = defineEmits<{
+  /** 确定事件 */
+  (event: 'confirm'): void
+  /** 取消事件 */
+  (event: 'cancel'): void
+  /** 更新show */
+  (event: 'update:show', show: boolean): void
+  /** 更新textarea */
+  (event: 'update:textarea', value: string): void
+  /** 更新radio */
+  (event: 'update:radio', value: string | number): void
+}>()
+
+const value = ref('')
+
+function confirm() {
+  emit('update:textarea', value.value)
+  if (props.radio.length)
+    emit('update:radio', value.value)
+
+  emit('update:show', false)
+}
+function cancel() {
+  emit('update:show', false)
+}
 </script>
+
+<style>
+.textarea-placeholder{
+  color:#909399
+}
+</style>

stories/Prompt.stories.ts

@@ -1,8 +1,8 @@
 /*
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-06-25 15:55:08
- * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-06-25 19:11:17
+ * @LastEditors: peerless_hero peerless_hero@outlook.com
+ * @LastEditTime: 2023-07-11 03:48:04
  * @FilePath: \uni\stories\Prompt.stories.ts
  * @Description:
  *
@@ -14,6 +14,17 @@ const meta = {
   title: '反馈组件/Prompt',
   component: Prompt,
   tags: ['autodocs'],
+  args: {
+    show: true,
+    title: '审核意见',
+    placeholder: '审核意见必须填写',
+    confirmText: '提交',
+    textarea: '',
+  },
+  argTypes: {
+    onConfirm: { action: 'clicked' },
+    onCancel: { action: 'clicked' },
+  },
 } satisfies Meta<typeof Prompt>
 export default meta