docs(components): [cascader] better presentation (#10780)

This commit is contained in:
RealityBoy 2022-11-26 13:52:20 +08:00 committed by GitHub
parent 200eca3498
commit 31b5b92edd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 60 deletions

View File

@ -1,14 +1,10 @@
<template>
<div class="example-block">
<span class="example-demonstration"
>Select any level of options (Single selection)</span
>
<div class="m-4">
<p>Select any level of options (Single selection)</p>
<el-cascader :options="options" :props="props1" clearable />
</div>
<div class="example-block">
<span class="example-demonstration"
>Select any level of options (Multiple selection)</span
>
<div class="m-4">
<p>Select any level of options (Multiple selection)</p>
<el-cascader :options="options" :props="props2" clearable />
</div>
</template>
@ -292,12 +288,3 @@ const options = [
},
]
</script>
<style scoped>
.example-block {
margin: 1rem;
}
.example-demonstration {
margin: 1rem;
}
</style>

View File

@ -1,12 +1,10 @@
<template>
<div class="example-block">
<span class="example-demonstration"
>Child options expand when clicked (default)</span
>
<div class="m-4">
<p>Child options expand when clicked (default)</p>
<el-cascader v-model="value" :options="options" @change="handleChange" />
</div>
<div class="example-block">
<span class="example-demonstration">Child options expand when hovered</span>
<div class="m-4">
<p>Child options expand when hovered</p>
<el-cascader
v-model="value"
:options="options"
@ -298,12 +296,3 @@ const options = [
},
]
</script>
<style scoped>
.example-block {
margin: 1rem;
}
.example-demonstration {
margin: 1rem;
}
</style>

View File

@ -1,14 +1,14 @@
<template>
<div class="example-block">
<span class="example-demonstration">Filterable (Single selection)</span>
<div class="m-4">
<p>Filterable (Single selection)</p>
<el-cascader
placeholder="Try searchingL Guide"
:options="options"
filterable
/>
</div>
<div class="example-block">
<span class="example-demonstration">Filterable (Multiple selection)</span>
<div class="m-4">
<p>Filterable (Multiple selection)</p>
<el-cascader
placeholder="Try searchingL Guide"
:options="options"
@ -292,12 +292,3 @@ const options = [
},
]
</script>
<style scoped>
.example-block {
margin: 1rem;
}
.example-demonstration {
margin: 1rem;
}
</style>

View File

@ -1,14 +1,14 @@
<template>
<div class="example-block">
<span class="example-demonstration">Display all tags (default)</span>
<div class="m-4">
<p>Display all tags (default)</p>
<el-cascader :options="options" :props="props" clearable />
</div>
<div class="example-block">
<span class="example-demonstration">Collapse tags</span>
<div class="m-4">
<p>Collapse tags</p>
<el-cascader :options="options" :props="props" collapse-tags clearable />
</div>
<div class="example-block">
<span class="example-demonstration">Collapse tags tooltip</span>
<div class="m-4">
<p>Collapse tags tooltip</p>
<el-cascader
:options="options"
:props="props"
@ -106,12 +106,3 @@ const options = [
},
]
</script>
<style scoped>
.example-block {
margin: 1rem;
}
.example-demonstration {
margin: 1rem;
}
</style>