mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-06 10:38:31 +08:00
improvement(dialog): make dialog's width can accept number type (#1373)
This commit is contained in:
Ryan2128
GitHub
parent
e91197699b
commit
91b8e5d47b
@ -152,7 +152,7 @@ export default defineComponent({
|
||||
},
|
||||
modalClass: String,
|
||||
width: {
|
||||
type: String,
|
||||
type: [String, Number],
|
||||
default: '50%',
|
||||
validator: isValidWidthUnit,
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@ import { computed, ref, watch, nextTick, onMounted } from 'vue'
|
||||
import isServer from '@element-plus/utils/isServer'
|
||||
import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
|
||||
import PopupManager from '@element-plus/utils/popup-manager'
|
||||
import { clearTimer } from '@element-plus/utils/util'
|
||||
import { clearTimer, isNumber } from '@element-plus/utils/util'
|
||||
import { useLockScreen, useRestoreActive, useModal } from '@element-plus/hooks'
|
||||
|
||||
import type { Ref, CSSProperties } from 'vue'
|
||||
@ -26,12 +26,19 @@ export default function(props: UseDialogProps, ctx: SetupContext, targetRef: Ref
|
||||
const zIndex = ref(props.zIndex || PopupManager.nextZIndex())
|
||||
const modalRef = ref<HTMLElement>(null)
|
||||
|
||||
const normalizeWidth = () => {
|
||||
if(isNumber(props.width))
|
||||
return `${props.width}px`
|
||||
else
|
||||
return props.width
|
||||
}
|
||||
|
||||
const style = computed(() => {
|
||||
const style = {} as CSSProperties
|
||||
if (!props.fullscreen) {
|
||||
style.marginTop = props.top
|
||||
if (props.width) {
|
||||
style.width = props.width
|
||||
style.width = normalizeWidth()
|
||||
}
|
||||
}
|
||||
return style
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
export const isValidWidthUnit = (val: string) =>
|
||||
['px', 'rem', 'em', 'vw', '%', 'vmin', 'vmax'].some(unit =>
|
||||
val.endsWith(unit),
|
||||
)
|
||||
import { isNumber } from '@element-plus/utils/util'
|
||||
|
||||
export const isValidWidthUnit = (val: string | number): boolean =>{
|
||||
if(isNumber(val)){
|
||||
return true
|
||||
} else {
|
||||
return ['px', 'rem', 'em', 'vw', '%', 'vmin', 'vmax'].some(unit =>
|
||||
(val as string).endsWith(unit),
|
||||
)
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
|
||||
export const isValidComponentSize = (val: string) =>
|
||||
['', 'large', 'medium', 'small', 'mini'].includes(val)
|
||||
|
||||
@ -257,7 +257,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | visibility of Dialog | boolean | — | — |
|
||||
| title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
|
||||
| width | width of Dialog | string | — | 50% |
|
||||
| width | width of Dialog | string / number | — | 50% |
|
||||
| fullscreen | whether the Dialog takes up full screen | boolean | — | false |
|
||||
| top | value for `margin-top` of Dialog CSS | string | — | 15vh |
|
||||
| modal | whether a mask is displayed | boolean | — | true |
|
||||
|
||||
@ -259,7 +259,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
|
||||
| --------------------- | ---------------------------------------- | ---------------------------------------- | ----------------- | ----------- |
|
||||
| model-value / v-model | visibilidad del Diálogo | boolean | — | — |
|
||||
| title | título de Diálogo. También se puede pasar con un slot con nombre (ver la tabla siguiente) | string | — | — |
|
||||
| width | anchura de Diálogo | string | — | 50% |
|
||||
| width | anchura de Diálogo | string / number | — | 50% |
|
||||
| fullscreen | si el diálogo ocupa pantalla completa | boolean | — | false |
|
||||
| top | valor de `margin-top` del Diálogo CSS | string | — | 15vh |
|
||||
| modal | si se muestra una máscara | boolean | — | true |
|
||||
|
||||
@ -258,7 +258,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | Visibilité du Dialog | boolean | — | — |
|
||||
| title | Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante). | string | — | — |
|
||||
| width | Largeur du Dialog. | string | — | 50% |
|
||||
| width | Largeur du Dialog. | string / number | — | 50% |
|
||||
| fullscreen | Si le Dialog doit être en plein écran. | boolean | — | false |
|
||||
| top | Valeur du `margin-top` du CSS du Dialog. | string | — | 15vh |
|
||||
| modal | Si un masque est affiché. | boolean | — | true |
|
||||
|
||||
@ -253,7 +253,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | dialogの可視性 | boolean | — | — |
|
||||
| title | dialogのタイトルを指定します。名前付きスロットで渡すこともできます (次のテーブルを参照してください)。 | string | — | — |
|
||||
| width | dialogの幅 | string | — | 50% |
|
||||
| width | dialogの幅 | string / number | — | 50% |
|
||||
| fullscreen | dialogが全画面を占めるかどうか | boolean | — | false |
|
||||
| top | dialogCSSの `margin-top` の値 | string | — | 15vh |
|
||||
| modal | マスクが表示されているかどうか | boolean | — | true |
|
||||
|
||||
@ -255,7 +255,7 @@ Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| model-value / v-model | 是否显示 Dialog | boolean | — | — |
|
||||
| title | Dialog 的标题，也可通过具名 slot （见下表）传入 | string | — | — |
|
||||
| width | Dialog 的宽度 | string | — | 50% |
|
||||
| width | Dialog 的宽度 | string / number | — | 50% |
|
||||
| fullscreen | 是否为全屏 Dialog | boolean | — | false |
|
||||
| top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
|
||||
| modal | 是否需要遮罩层 | boolean | — | true |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user