mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
4560adfdf8
* refactor(style): adjust component size to large/default/small * refactor(components): avatar size & use flex instead of block * refactor(components): adjust check button size * refactor(components): adjust tag size * refactor(components): adjust size doc * fix(components): datetime-picker demo style width * refactor(components): color-picker size & block to flex * refactor(components): adjust slider input size * refactor(components): adjust radio input size for demo * refactor(components): adjust select size & docs * refactor(components): adjust form radio size & docs * refactor(components): add windicss for docs * refactor(components): adjust skeleton avatar size to css var * refactor(components): simplify typography size demo * refactor(components): adjust dropdown size & demo * refactor(components): adjust descriptions size * fix(components): datetime-picker showcase class pollute global button * chore(ci): upgrade docs dependencies to fix ci * fix(ci): add highlight because vitepress not export it * fix(ci): disable line for no-console * fix(ci): remove mini to fix test * fix(style): code font size * fix(style): button span flex style * fix(style): button padding horizontal default 15px * refactor(components): adjust tag padding size & demo * refactor(components): adjust form line-height for input * refactor(components): adjust dropdown menu size & button padding * fix(style): picker separator block to flex center * fix: dropdown button span items-center * style: adjust input-with-icon & size demo & fix input vitepress load * chore: upgrade dependencies * chore: upgrade dependencies * ci: fix website build * ci: regenerate pnpm-lock.yaml * ci: use dev pnpm-lock * ci: update pnpm-lock.yaml
86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<div style="margin-left: 1rem">
|
|
<el-radio-group v-model="size">
|
|
<el-radio label="small">Small</el-radio>
|
|
<el-radio label="default">Default</el-radio>
|
|
<el-radio label="large">Large</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<br />
|
|
<el-form ref="form" :model="sizeForm" label-width="120px" :size="size">
|
|
<el-form-item label="Activity name">
|
|
<el-input v-model="sizeForm.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="Activity zone">
|
|
<el-select
|
|
v-model="sizeForm.region"
|
|
placeholder="please select your zone"
|
|
>
|
|
<el-option label="Zone one" value="shanghai"></el-option>
|
|
<el-option label="Zone two" value="beijing"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="Activity time">
|
|
<el-col :span="11">
|
|
<el-date-picker
|
|
v-model="sizeForm.date1"
|
|
type="date"
|
|
placeholder="Pick a date"
|
|
style="width: 100%"
|
|
></el-date-picker>
|
|
</el-col>
|
|
<el-col class="line" :span="2" style="margin: 0 0.5rem">-</el-col>
|
|
<el-col :span="11">
|
|
<el-time-picker
|
|
v-model="sizeForm.date2"
|
|
placeholder="Pick a time"
|
|
style="width: 100%"
|
|
></el-time-picker>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="Activity type">
|
|
<el-checkbox-group v-model="sizeForm.type">
|
|
<el-checkbox-button
|
|
label="Online activities"
|
|
name="type"
|
|
></el-checkbox-button>
|
|
<el-checkbox-button
|
|
label="Promotion activities"
|
|
name="type"
|
|
></el-checkbox-button>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="Resources">
|
|
<el-radio-group v-model="sizeForm.resource">
|
|
<el-radio border label="Sponsor"></el-radio>
|
|
<el-radio border label="Venue"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item size="large">
|
|
<el-button type="primary" @click="onSubmit">Create</el-button>
|
|
<el-button>Cancel</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { reactive, ref } from 'vue'
|
|
|
|
const size = ref('small')
|
|
|
|
const sizeForm = reactive({
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
resource: '',
|
|
desc: '',
|
|
})
|
|
|
|
function onSubmit() {
|
|
console.log('submit!')
|
|
}
|
|
</script>
|