Press Next

# MatchFillApplicationPopup

Application form popup component for collecting owner information and internet cafe application materials. Supports form input, address selection, file upload and other functions.

# Features

  • 📝 Form Collection - Complete application form including name, phone, address and other fields
  • 📍 Address Selection - Support province and city address selection and detailed address input
  • 📎 File Upload - Support uploading business license and other files
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 🔧 Slot Support - Support custom upload button, submit button and selection icon
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • Internet cafe application registration
  • Merchant entry application
  • Business qualification application
  • Information collection form

# Import

import PressMatchFillApplicationPopup from 'press-next/press-match-fill-application-popup/press-match-fill-application-popup';

# Code Demo

# Basic Usage

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    @close="onClose"
    @submit="onSubmit"
    @select-address="handleSelectAddress"
    @upload-license="handleUploadLicense"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchFillApplicationPopup from 'press-next/press-match-fill-application-popup/press-match-fill-application-popup';

const showPopup = ref(false);

const onClose = () => {
  showPopup.value = false;
};

const onSubmit = (data: any) => {
  console.log('Submit data:', data);
  // Handle submit logic
};

const handleSelectAddress = () => {
  console.log('Select address');
  // Open address selector
};

const handleUploadLicense = () => {
  console.log('Upload license');
  // Open file selector
};
</script>

# With Initial Data

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    :initial-data="initialData"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchFillApplicationPopup from 'press-next/press-match-fill-application-popup/press-match-fill-application-popup';

const showPopup = ref(false);

const initialData = {
  ownerName: 'Zhang San',
  phone: '13800138000',
  cafeName: 'Game Life Cafe',
  address: 'Shenzhen, Guangdong',
  detailAddress: 'Science Park, Nanshan District',
};

const onClose = () => {
  showPopup.value = false;
};

const onSubmit = (data: any) => {
  console.log('Submit data:', data);
};
</script>

# Custom Placeholders

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    :placeholders="customPlaceholders"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const customPlaceholders = {
  ownerName: 'Please enter your name',
  phone: 'Please enter phone number',
  cafeName: 'Please enter cafe name',
  address: 'Please select province and city',
  detailAddress: 'Please enter detailed address',
};

const showPopup = ref(false);

const onClose = () => {
  showPopup.value = false;
};

const onSubmit = (data: any) => {
  console.log('Submit data:', data);
};
</script>

# Custom Theme

<template>
  <PressMatchFillApplicationPopup
    :show="showPopup"
    custom-class="my-custom-theme"
    @close="onClose"
    @submit="onSubmit"
  />
</template>

<style>
.my-custom-theme {
  /* Form styles */
  --fap-form-label-color: #333333;
  --fap-form-input-field-color: #9fabb6;
  
  /* Button styles */
  --fap-submit-btn-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --fap-submit-btn-border-radius: .4rem;
  
  /* Upload button styles */
  --fap-form-upload-btn-background: #f5f5f5;
}
</style>

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
show Whether to show popup boolean false
z-index PopupPlus z-index number 100
title PopupPlus title string '填写申请'
submit-text Submit button text string '提交'
placeholders Input placeholder config Placeholders See below
initial-data Initial form data Partial<FormData> {}

# Placeholders Default Value

{
  ownerName: '请输入业务姓名',
  phone: '请输入联系电话',
  cafeName: '请输入网吧名称',
  address: '选择省市',
  detailAddress: '请输入详细地址'
}

# FormData Data Structure

interface FormData {
  ownerName: string; // Owner name
  phone: string; // Contact phone
  cafeName: string; // Cafe name
  address: string; // Cafe address (province and city)
  detailAddress: string; // Detailed address
  licenseFile?: File | string; // Business license file
}

# Placeholders Data Structure

interface Placeholders {
  ownerName: string; // Owner name placeholder
  phone: string; // Contact phone placeholder
  cafeName: string; // Cafe name placeholder
  address: string; // Cafe address placeholder
  detailAddress: string; // Detailed address placeholder
}

# Slots

Name Description
icon-select Custom address selection icon
upload-btn Custom upload button area content
submit-btn Custom submit button area content

# Events

Event Description Parameters
close Triggered when closing popup -
submit Triggered when clicking submit button data: FormData
input-change Triggered when input content changes field: keyof FormData, value: string
select-address Triggered when clicking select address -
upload-license Triggered when clicking upload license -

# Notes

# Usage Recommendations

  1. Form Validation: Component does not include built-in validation logic, recommend validating data in submit event
  2. File Upload: upload-license event only triggers upload action, actual upload logic needs to be implemented by business side
  3. Address Selection: select-address event needs to be used with address selector component
  4. Data Monitoring: Can monitor form field changes in real-time through input-change event
  5. Initial Data: When using initial-data, recommend providing complete fields to avoid type issues
  6. Responsive Adaptation: On small screen devices, recommend adjusting size variables like --fap-form-item-height

# Performance Optimization

  • Component uses virtual nodes to reduce DOM hierarchy
  • Form data uses ref for reactive management
  • Deep watch optimization, only triggers events when fields change
  • Recommend adding progress indication for large file uploads
  • Styles use CSS variables for easy dynamic theme switching

# Compatibility

  • Support Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Support WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

# Style Variables

The component provides the following CSS variables for custom styling. Please refer to ConfigProvider component for usage.

# Spacing System

Name Default Description
--fap-form-item-height 1.12rem Form item height
--fap-form-item-upload-height auto Upload form item height
--fap-form-label-max-width 2rem Form label max width
--fap-form-input-field-width 100% Input field width
--fap-form-input-arrow-width .4rem Arrow icon width
--fap-form-input-arrow-height .4rem Arrow icon height
--fap-form-input-select-min-height .48rem Select box min height
--fap-form-upload-btn-width .92rem Upload button width
--fap-form-upload-btn-height .92rem Upload button height
--fap-submit-btn-width 100% Submit button width
--fap-submit-btn-height .8rem Submit button height

# Box Model System

Name Default Description
--fap-form-item-margin 0 Form item margin
--fap-form-item-upload-padding $spacing-lg 0 Upload form item padding
--fap-form-label-margin-right $spacing-md Form label right margin
--fap-form-input-margin-left auto Input field left margin
--fap-form-input-select-gap .08rem Select box internal gap
--fap-form-upload-margin-left auto Upload area left margin

# Color System

Name Default Description
--fap-form-label-color $color-text-primary Form label color
--fap-form-input-field-color #9fabb6 Input field text color
--fap-form-input-placeholder-color #9fabb6 Placeholder text color
--fap-form-input-arrow-color #3e4c5a Arrow icon color
--fap-form-upload-icon-color rgba(163, 171, 180, 1) Upload icon color
--fap-form-upload-btn-border-color #c8ced7 Upload button border color
--fap-submit-btn-text-color $color-text-invert-light Submit button text color
--fap-form-input-field-background transparent Input field background
--fap-form-upload-btn-background $color-surface-secondary Upload button background
--fap-submit-btn-background $color-surface-brand Submit button background

# Typography System

Name Default Description
--fap-form-label-font-size $font-size-lg Form label font size
--fap-form-label-font-weight $font-weight-regular Form label font weight
--fap-form-label-line-height 1.5 Form label line height
--fap-form-input-field-font-size $font-size-md Input field font size
--fap-form-input-field-text-align right Input field text align
--fap-form-input-placeholder-font-size $font-size-md Placeholder font size
--fap-form-input-placeholder-text-align right Placeholder text align
--fap-form-input-arrow-font-size .36rem Arrow icon font size
--fap-form-upload-icon-font-size .36rem Upload icon font size
--fap-submit-btn-font-size $font-size-lg Submit button font size
--fap-submit-btn-font-weight $font-weight-bold Submit button font weight

# Border Radius System

Name Default Description
--fap-form-upload-btn-border-radius $border-radius-circle Upload button border radius
--fap-submit-btn-border-radius $border-radius-999 Submit button border radius

← MatchFollowMpDialog →