From c8244b381bf436ab57cd523d07dec39392815455 Mon Sep 17 00:00:00 2001 From: msidolphin Date: Fri, 16 Jul 2021 09:10:55 +0800 Subject: [PATCH] feat(cascader): supports popper-append-to-body feature (#2544) supports popper-append-to-body feature and improved documentation for cascader and select fix #2500 --- packages/cascader/src/index.vue | 5 +++++ website/docs/en-US/cascader.md | 1 + website/docs/en-US/select.md | 2 +- website/docs/es/cascader.md | 1 + website/docs/es/select.md | 2 +- website/docs/fr-FR/cascader.md | 1 + website/docs/fr-FR/select.md | 2 +- website/docs/jp/cascader.md | 3 ++- website/docs/jp/select.md | 2 +- website/docs/zh-CN/cascader.md | 1 + website/docs/zh-CN/select.md | 2 +- 11 files changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/cascader/src/index.vue b/packages/cascader/src/index.vue index 274f006b25..174f651a3e 100644 --- a/packages/cascader/src/index.vue +++ b/packages/cascader/src/index.vue @@ -3,6 +3,7 @@ ref="popper" v-model:visible="popperVisible" manual-mode + :append-to-body="popperAppendToBody" placement="bottom-start" :popper-class="`el-cascader__dropdown ${popperClass}`" :popper-options="popperOptions" @@ -236,6 +237,10 @@ export default defineComponent({ type: String, default: '', }, + popperAppendToBody: { + type: Boolean, + default: true, + }, }, emits: [ diff --git a/website/docs/en-US/cascader.md b/website/docs/en-US/cascader.md index 3c4f15b49b..51e9b8317d 100644 --- a/website/docs/en-US/cascader.md +++ b/website/docs/en-US/cascader.md @@ -4347,6 +4347,7 @@ export default defineComponent({ | debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 | | before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — | | popper-class | custom class name for Cascader's dropdown | string | — | — | +| popper-append-to-body| whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true | ### Cascader Events | Event Name | Description | Parameters | diff --git a/website/docs/en-US/select.md b/website/docs/en-US/select.md index ddd45ceb5e..aadd74c3db 100644 --- a/website/docs/en-US/select.md +++ b/website/docs/en-US/select.md @@ -550,7 +550,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as | popper-class | custom class name for Select's dropdown | string | — | — | | reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false | | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false | -| popper-append-to-body| whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | false | +| popper-append-to-body| whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true | | automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false | | clear-icon | Custom clear icon class | string | — | el-icon-circle-close | diff --git a/website/docs/es/cascader.md b/website/docs/es/cascader.md index e85fbdd101..32681baa67 100644 --- a/website/docs/es/cascader.md +++ b/website/docs/es/cascader.md @@ -4350,6 +4350,7 @@ export default defineComponent({ | debounce | retraso en milisegundos para el tipeo de los datos de filtro | number | — | 300 | | before-filter | hook antes de filtrar con el valor a filtrar como parámetro. Si se devuelve `false` o se devuelve una `Promise` y luego se rechaza, se abortará el filtrado. | function(value) | — | — | | popper-class | nombre de clase personalizado para el menú desplegable de Cascader | string | — | — | +| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true | ### Eventos de Cascader | Nombre del evento | Descripción | Parámetros | diff --git a/website/docs/es/select.md b/website/docs/es/select.md index d1257b90f3..53c67e11ff 100644 --- a/website/docs/es/select.md +++ b/website/docs/es/select.md @@ -557,7 +557,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va | popper-class | nombre de clase personalizado para el menú desplegable del Select | string | — | — | | reserve-keyword | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean | — | false | | default-first-option | seleccione la primera opción de coincidencia en la tecla enter. Uso con `filterable` o `remote`. | boolean | - | false | -| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | false | +| popper-append-to-body| si añadir o no el menu popup al body. Si el posicionamiento del popup es incorrecto, puede intentar poner este `prop` en `false`. | boolean | - | true | | automatic-dropdown | para non-filterable Select, este `prop` decide si el menú de opciones aparece cuando la entrada está enfocada | boolean | - | false | | clear-icon | Clase personalizada para el icono `clear` | string | — | el-icon-circle-close | diff --git a/website/docs/fr-FR/cascader.md b/website/docs/fr-FR/cascader.md index 17d5990f3d..58a11e9d19 100644 --- a/website/docs/fr-FR/cascader.md +++ b/website/docs/fr-FR/cascader.md @@ -4313,6 +4313,7 @@ export default defineComponent({ | debounce | Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes | number | — | 300 | | before-filter | Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si `false` est renvoyé ou si une `Promise` est renvoyée puis rejetée, le filtrage sera annulé | function(value) | — | — | | popper-class | Nom de classe personnalisé pour la liste déroulante de Cascader | string | — | — | +| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true | ### Cascader Events | Event Name | Description | Paramètres | diff --git a/website/docs/fr-FR/select.md b/website/docs/fr-FR/select.md index 23e4f50be1..62622bcc13 100644 --- a/website/docs/fr-FR/select.md +++ b/website/docs/fr-FR/select.md @@ -553,7 +553,7 @@ Si la valeur de Select est un objet, assurez-vous d'utiliser `value-key` comme i | popper-class | Classe du menu déroulant. | string | — | — | | reserve-keyword | Quand `multiple` et `filter` sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option. | boolean | — | false | | default-first-option | Sélectionne la première option avec Entrée. Utilisable avec `filterable` ou `remote` | boolean | - | false | -| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | false | +| popper-append-to-body| Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à `false`. | boolean | - | true | | automatic-dropdown | Pour les sélecteurs non filtrables, détermine si le menu apparaît au focus du champ. | boolean | - | false | | clear-icon | Classe de l'icône d'effacement. | string | — | el-icon-circle-close | diff --git a/website/docs/jp/cascader.md b/website/docs/jp/cascader.md index 5ca2ff9b83..f5118bbc85 100644 --- a/website/docs/jp/cascader.md +++ b/website/docs/jp/cascader.md @@ -3333,7 +3333,7 @@ cascaderノードの内容をカスタマイズすることができます。 :::demo `scoped slot`によって、cascaderの内容をカスタマイズすることができます。スコープ内の `node` と `data` にアクセスすることができます。 ```html -