创建和控制

1、react18.3 创建和控制

2-1、安装
shell
```
   npm install antd --save
```

2-2、页面使用

拷贝代码

tsx

  import React, { useState } from 'react'
  import type { DatePickerProps, CheckboxProps, RadioChangeEvent } from 'antd'
import {
Button,
DatePicker,
Form,
Input,
Select,
Checkbox, Radio
} from 'antd'
const CheckboxGroup = Checkbox.Group
const { Option } = Select
const plainOptions = ['篮球', '乒乓球', '足球']
const Home: React.FC = () => {
const [form] = Form.useForm()
const [checkedList, setCheckedList] = useState<string[]>([])
const onFinish = (values: any) => {
console.log('Received values of form: ', values)
}
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
console.log(date, dateString)
}
const onChangeCheck = (list: string[]) => {
setCheckedList(list)
}
const [value, setValue] = useState(1)
const onChangeRadio = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value)
setValue(e.target.value)
}
return (
<Form
form={form}
name='register'
onFinish={onFinish}
style={{ maxWidth: 600 }}
scrollToFirstError
>

      <Form.Item
        name='nickname'
        label='文本框'
        tooltip='What do you want others to call you?'
        rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name='date'
        label='日期框'
        rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}
      >
        <DatePicker onChange={onChange} />
      </Form.Item>

      <Form.Item
        name='radio'
        label='单选'
        rules={[{ required: true, message: 'Please select gender!' }]}
      >
        <Radio.Group onChange={onChangeRadio} value={value}>
          <Radio value={1}>A</Radio>
          <Radio value={2}>B</Radio>
          <Radio value={3}>C</Radio>
          <Radio value={4}>D</Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        name='gender'
        label='多选'
        rules={[{ required: true, message: 'Please select gender!' }]}
      >
        <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChangeCheck} />
      </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit'>提交</Button>
      </Form.Item>
    </Form>
)
}

export default Home

2、小程序创建和控制

3-1、安装

shell

  npm i @vant/weapp
  执行：构建npm

json

  {
  "usingComponents": {
  "custom-checkbox":"./components/custom-checkbox/custom-checkbox",
  "custSon":"./components/cutomeSon/cutomeSon",
  "van-button":"@vant/weapp/button/index",
  "Son":"./components/Son/Son",
  "Father":"./components/Father/Father",
  
          "van-field": "@vant/weapp/field/index",
      
          "van-cell": "@vant/weapp/cell/index",
          "van-calendar": "@vant/weapp/calendar/index",
          "van-radio": "@vant/weapp/radio/index",
          "van-radio-group": "@vant/weapp/radio-group/index",
          "van-checkbox": "@vant/weapp/checkbox/index",
          "van-checkbox-group": "@vant/weapp/checkbox-group/index"
      }
  }

3-1、页面中使用

html

<view>
    <view>文本框：</view>
    <van-field
    value="{{ value }}"
    placeholder="请输入用户名"
    bind:change="onChangeField"
  />
  <view style="margin-top: 100rpx;">单选框：</view>
  <van-radio-group value="{{ radio }}" bind:change="onChangeRadio">
    <van-radio name="1">男</van-radio>
    <van-radio name="2">女</van-radio>
  </van-radio-group> 
  <view style="margin-top: 100rpx;">日期框：</view>
<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
<view style="margin-top: 100rpx;">多选框：</view>
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />
    <van-checkbox-group value="{{ result }}" bind:change="onChange">
  <van-checkbox name="a">篮球</van-checkbox>
  <van-checkbox name="b">乒乓球</van-checkbox>
  <van-checkbox name="c">足球</van-checkbox>
</van-checkbox-group>
</view>


  Page({
data: {
  value: '',
  radio: '1',
  result: ['a', 'b'],
  date: '',
  show: false,
},
onDisplay() {
  this.setData({ show: true });
},
onClose() {
  this.setData({ show: false });
},
formatDate(date) {
  date = new Date(date);
  return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(event) {
  this.setData({
    show: false,
    date: this.formatDate(event.detail),
  });
},
onChange(event) {
  this.setData({
    result: event.detail,
  });
},
onChangeField(event) {
  console.log(event.detail);
},
onChangeRadio(event) {
  this.setData({
    radio: event.detail,
  });
},
})

3、vue3.5 创建和控制

2-1、安装和配置

shell

  npm install element-plus --save

main.ts

   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import App from './App.vue'
   
   const app = createApp(App)
   
   app.use(ElementPlus)
   app.mount('#app')

3-1、页面使用

vue

  <template>
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
  >
      <el-form-item label="文本框" prop="name">
        <el-input v-model="ruleForm.name" placeholder="(0,5]，最多1位小数'" />
      </el-form-item>
      <el-form-item label="日期框" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker
                v-model="ruleForm.date1"
                type="date"
                aria-label="Pick a date"
                placeholder="选择日期"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-time-picker
                v-model="ruleForm.date2"
                aria-label="Pick a time"
                placeholder="选择时间"
                style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="多选框" prop="type">
        <el-checkbox-group v-model="ruleForm.type">
          <el-checkbox value="Online activities" name="type">
            篮球
          </el-checkbox>
          <el-checkbox value="Promotion activities" name="type">
            足球
          </el-checkbox>
          <el-checkbox value="Offline activities" name="type">
            乒乓球
          </el-checkbox>
          <el-checkbox value="Simple brand exposure" name="type">
            排球
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="单选框" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio value="Sponsorship">男</el-radio>
          <el-radio value="Venue">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

interface RuleForm {
  name: string,
  type: string[]
  resource: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '',
  type: [],
  resource: ''
})
const RulerName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else {
    if (/^-?\d+(\.\d{1})?$/.test(value) &&
        Number(value) > 0 &&
        Number(value) <= 5 ||
        value === '' || value === null) {
      callback()
    } else {
      return callback(new Error('(0,5]，最多1位小数'))
    }
    callback()
  }
}

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { validator: RulerName, trigger: 'blur' }
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change'
    }
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change'
    }
  ]
})

const submitForm = async(formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

创建和控制 ​

1、react18.3 创建和控制 ​

2、小程序 创建和控制 ​

3、vue3.5 创建和控制 ​

创建和控制

1、react18.3 创建和控制

2、小程序创建和控制

3、vue3.5 创建和控制