mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
fix(components): fix deprecated warning (#16034)
This commit is contained in:
parent
f71a112722
commit
f8ca913a1d
@ -1,25 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-checkbox-group v-model="checkboxGroup1" size="large">
|
||||
<el-checkbox-button
|
||||
v-for="city in cities"
|
||||
:key="city"
|
||||
:label="city"
|
||||
:value="city"
|
||||
>
|
||||
<el-checkbox-button v-for="city in cities" :key="city" :value="city">
|
||||
{{ city }}
|
||||
</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="demo-button-style">
|
||||
<el-checkbox-group v-model="checkboxGroup2">
|
||||
<el-checkbox-button
|
||||
v-for="city in cities"
|
||||
:key="city"
|
||||
:label="city"
|
||||
:value="city"
|
||||
>{{ city }}</el-checkbox-button
|
||||
>
|
||||
<el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
|
||||
city
|
||||
}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="demo-button-style">
|
||||
@ -27,7 +18,6 @@
|
||||
<el-checkbox-button
|
||||
v-for="city in cities"
|
||||
:key="city"
|
||||
:label="city"
|
||||
:value="city"
|
||||
:disabled="city === 'Beijing'"
|
||||
>{{ city }}</el-checkbox-button
|
||||
@ -36,13 +26,9 @@
|
||||
</div>
|
||||
<div class="demo-button-style">
|
||||
<el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
|
||||
<el-checkbox-button
|
||||
v-for="city in cities"
|
||||
:key="city"
|
||||
:label="city"
|
||||
:value="city"
|
||||
>{{ city }}</el-checkbox-button
|
||||
>
|
||||
<el-checkbox-button v-for="city in cities" :key="city" :value="city">{{
|
||||
city
|
||||
}}</el-checkbox-button>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-radio-group v-model="size" label="size control">
|
||||
<el-radio-button label="large">large</el-radio-button>
|
||||
<el-radio-button label="default">default</el-radio-button>
|
||||
<el-radio-button label="small">small</el-radio-button>
|
||||
<el-radio-button value="large">large</el-radio-button>
|
||||
<el-radio-button value="default">default</el-radio-button>
|
||||
<el-radio-button value="small">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="demo-date-picker">
|
||||
<div class="block">
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-radio-group v-model="size" label="size control">
|
||||
<el-radio-button label="large">large</el-radio-button>
|
||||
<el-radio-button label="default">default</el-radio-button>
|
||||
<el-radio-button label="small">small</el-radio-button>
|
||||
<el-radio-button value="large">large</el-radio-button>
|
||||
<el-radio-button value="default">default</el-radio-button>
|
||||
<el-radio-button value="small">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="demo-date-picker">
|
||||
<div class="block">
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="large">Large</el-radio>
|
||||
<el-radio>Default</el-radio>
|
||||
<el-radio label="small">Small</el-radio>
|
||||
<el-radio value="large">Large</el-radio>
|
||||
<el-radio value="default">Default</el-radio>
|
||||
<el-radio value="small">Small</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-descriptions
|
||||
@ -104,7 +104,7 @@ import {
|
||||
User,
|
||||
} from '@element-plus/icons-vue'
|
||||
|
||||
const size = ref('')
|
||||
const size = ref('default')
|
||||
const iconStyle = computed(() => {
|
||||
const marginMap = {
|
||||
large: '8px',
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio label="large">Large</el-radio>
|
||||
<el-radio>Default</el-radio>
|
||||
<el-radio label="small">Small</el-radio>
|
||||
<el-radio value="large">Large</el-radio>
|
||||
<el-radio value="default">Default</el-radio>
|
||||
<el-radio value="small">Small</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-descriptions
|
||||
@ -45,7 +45,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const size = ref('')
|
||||
const size = ref('default')
|
||||
const blockMargin = computed(() => {
|
||||
const marginMap = {
|
||||
large: '32px',
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-radio-group v-model="direction">
|
||||
<el-radio label="ltr">left to right</el-radio>
|
||||
<el-radio label="rtl">right to left</el-radio>
|
||||
<el-radio label="ttb">top to bottom</el-radio>
|
||||
<el-radio label="btt">bottom to top</el-radio>
|
||||
<el-radio value="ltr">left to right</el-radio>
|
||||
<el-radio value="rtl">right to left</el-radio>
|
||||
<el-radio value="ttb">top to bottom</el-radio>
|
||||
<el-radio value="btt">bottom to top</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-button type="primary" style="margin-left: 16px" @click="drawer = true">
|
||||
@ -27,10 +27,10 @@
|
||||
</template>
|
||||
<template #default>
|
||||
<div>
|
||||
<el-radio v-model="radio1" label="Option 1" size="large"
|
||||
<el-radio v-model="radio1" value="Option 1" size="large"
|
||||
>Option 1</el-radio
|
||||
>
|
||||
<el-radio v-model="radio1" label="Option 2" size="large"
|
||||
<el-radio v-model="radio1" value="Option 2" size="large"
|
||||
>Option 2</el-radio
|
||||
>
|
||||
</div>
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<el-radio-group v-model="labelPosition" label="label position">
|
||||
<el-radio-button label="left">Left</el-radio-button>
|
||||
<el-radio-button label="right">Right</el-radio-button>
|
||||
<el-radio-button label="top">Top</el-radio-button>
|
||||
<el-radio-button value="left">Left</el-radio-button>
|
||||
<el-radio-button value="right">Right</el-radio-button>
|
||||
<el-radio-button value="top">Top</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div style="margin: 20px" />
|
||||
<el-form
|
||||
|
@ -34,16 +34,24 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="Online activities" name="type" />
|
||||
<el-checkbox label="Promotion activities" name="type" />
|
||||
<el-checkbox label="Offline activities" name="type" />
|
||||
<el-checkbox label="Simple brand exposure" name="type" />
|
||||
<el-checkbox value="Online activities" name="type">
|
||||
Online activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Promotion activities" name="type">
|
||||
Promotion activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Offline activities" name="type">
|
||||
Offline activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Simple brand exposure" name="type">
|
||||
Simple brand exposure
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="Sponsor" />
|
||||
<el-radio label="Venue" />
|
||||
<el-radio value="Sponsor">Sponsor</el-radio>
|
||||
<el-radio value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form">
|
||||
|
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-radio-group v-model="size" label="size control">
|
||||
<el-radio-button label="large">large</el-radio-button>
|
||||
<el-radio-button label="default">default</el-radio-button>
|
||||
<el-radio-button label="small">small</el-radio-button>
|
||||
<el-radio-button value="large">large</el-radio-button>
|
||||
<el-radio-button value="default">default</el-radio-button>
|
||||
<el-radio-button value="small">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-radio-group v-model="labelPosition" label="position control">
|
||||
<el-radio-button label="left">Left</el-radio-button>
|
||||
<el-radio-button label="right">Right</el-radio-button>
|
||||
<el-radio-button label="top">Top</el-radio-button>
|
||||
<el-radio-button value="left">Left</el-radio-button>
|
||||
<el-radio-button value="right">Right</el-radio-button>
|
||||
<el-radio-button value="top">Top</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<br />
|
||||
@ -54,14 +54,18 @@
|
||||
</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 label="Promotion activities" name="type" />
|
||||
<el-checkbox-button value="Online activities" name="type">
|
||||
Online activities
|
||||
</el-checkbox-button>
|
||||
<el-checkbox-button value="Promotion activities" name="type">
|
||||
Promotion activities
|
||||
</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 border label="Venue" />
|
||||
<el-radio border value="Sponsor">Sponsor</el-radio>
|
||||
<el-radio border value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
@ -56,16 +56,24 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity type" prop="type">
|
||||
<el-checkbox-group v-model="ruleForm.type">
|
||||
<el-checkbox label="Online activities" name="type" />
|
||||
<el-checkbox label="Promotion activities" name="type" />
|
||||
<el-checkbox label="Offline activities" name="type" />
|
||||
<el-checkbox label="Simple brand exposure" name="type" />
|
||||
<el-checkbox value="Online activities" name="type">
|
||||
Online activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Promotion activities" name="type">
|
||||
Promotion activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Offline activities" name="type">
|
||||
Offline activities
|
||||
</el-checkbox>
|
||||
<el-checkbox value="Simple brand exposure" name="type">
|
||||
Simple brand exposure
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Resources" prop="resource">
|
||||
<el-radio-group v-model="ruleForm.resource">
|
||||
<el-radio label="Sponsorship" />
|
||||
<el-radio label="Venue" />
|
||||
<el-radio value="Sponsorship">Sponsorship</el-radio>
|
||||
<el-radio value="Venue">Venue</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="Activity form" prop="desc">
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
|
||||
<el-radio-button :label="false">expand</el-radio-button>
|
||||
<el-radio-button :label="true">collapse</el-radio-button>
|
||||
<el-radio-button :value="false">expand</el-radio-button>
|
||||
<el-radio-button :value="true">collapse</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-menu
|
||||
default-active="2"
|
||||
|
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="flex items-center mb-4">
|
||||
<el-radio-group v-model="small" class="mr-4">
|
||||
<el-radio-button :label="false">default</el-radio-button>
|
||||
<el-radio-button :label="true">small</el-radio-button>
|
||||
<el-radio-button :value="false">default</el-radio-button>
|
||||
<el-radio-button :value="true">small</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div>
|
||||
background:
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-space direction="vertical" alignment="start" :size="30">
|
||||
<el-radio-group v-model="size">
|
||||
<el-radio :label="'large'">large</el-radio>
|
||||
<el-radio :label="'default'">default</el-radio>
|
||||
<el-radio :label="'small'">small</el-radio>
|
||||
<el-radio value="large">Large</el-radio>
|
||||
<el-radio value="default">Default</el-radio>
|
||||
<el-radio value="small">Small</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-space wrap :size="size">
|
||||
|
@ -2,8 +2,8 @@
|
||||
<div>
|
||||
<div style="margin-bottom: 15px">
|
||||
direction:
|
||||
<el-radio v-model="direction" label="horizontal">horizontal</el-radio>
|
||||
<el-radio v-model="direction" label="vertical">vertical</el-radio>
|
||||
<el-radio v-model="direction" value="horizontal">horizontal</el-radio>
|
||||
<el-radio v-model="direction" value="vertical">vertical</el-radio>
|
||||
</div>
|
||||
<div style="margin-bottom: 15px">
|
||||
fillRatio:<el-slider v-model="fillRatio" />
|
||||
|
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-radio-group v-model="tableLayout">
|
||||
<el-radio-button label="fixed" />
|
||||
<el-radio-button label="auto" />
|
||||
<el-radio-button value="fixed">fixed</el-radio-button>
|
||||
<el-radio-button value="auto">auto</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-table :data="tableData" :table-layout="tableLayout">
|
||||
<el-table-column prop="date" label="Date" />
|
||||
|
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
|
||||
<el-radio-button label="top">top</el-radio-button>
|
||||
<el-radio-button label="right">right</el-radio-button>
|
||||
<el-radio-button label="bottom">bottom</el-radio-button>
|
||||
<el-radio-button label="left">left</el-radio-button>
|
||||
<el-radio-button value="top">top</el-radio-button>
|
||||
<el-radio-button value="right">right</el-radio-button>
|
||||
<el-radio-button value="bottom">bottom</el-radio-button>
|
||||
<el-radio-button value="left">left</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">
|
||||
|
@ -82,8 +82,8 @@ describe('Table.vue', () => {
|
||||
<el-table-column label="someLabel">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox-group v-model="row.checkList">
|
||||
<el-checkbox label="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B"></el-checkbox>
|
||||
<el-checkbox label="复选框 A" value="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B" value="复选框 B"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
@ -23,7 +23,7 @@
|
||||
<el-checkbox
|
||||
v-for="filter in filters"
|
||||
:key="filter.value"
|
||||
:label="filter.value"
|
||||
:value="filter.value"
|
||||
>
|
||||
{{ filter.text }}
|
||||
</el-checkbox>
|
||||
|
@ -33,7 +33,7 @@
|
||||
v-for="item in filteredData"
|
||||
:key="item[propsAlias.key]"
|
||||
:class="ns.be('panel', 'item')"
|
||||
:label="item[propsAlias.key]"
|
||||
:value="item[propsAlias.key]"
|
||||
:disabled="item[propsAlias.disabled]"
|
||||
:validate-event="false"
|
||||
>
|
||||
|
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-radio v-model="radio1" label="1" size="large">Option 1</el-radio>
|
||||
<el-radio v-model="radio1" label="2" size="large">Option 2</el-radio>
|
||||
<el-radio v-model="radio1" value="1" size="large">Option 1</el-radio>
|
||||
<el-radio v-model="radio1" value="2" size="large">Option 2</el-radio>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio v-model="radio2" label="1">Option 1</el-radio>
|
||||
<el-radio v-model="radio2" label="2">Option 2</el-radio>
|
||||
<el-radio v-model="radio2" value="1">Option 1</el-radio>
|
||||
<el-radio v-model="radio2" value="2">Option 2</el-radio>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
|
||||
<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
|
||||
<el-radio v-model="radio3" value="1" size="small">Option 1</el-radio>
|
||||
<el-radio v-model="radio3" value="2" size="small">Option 2</el-radio>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio v-model="radio3" label="1" size="small" disabled
|
||||
<el-radio v-model="radio3" value="1" size="small" disabled
|
||||
>Option 1</el-radio
|
||||
>
|
||||
<el-radio v-model="radio3" label="2" size="small" disabled
|
||||
<el-radio v-model="radio3" value="2" size="small" disabled
|
||||
>Option 2</el-radio
|
||||
>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user