From a76a0be18dab5fd317d2011704764f4fe1ad4e98 Mon Sep 17 00:00:00 2001 From: haoziqaq <357229046@qq.com> Date: Thu, 10 Dec 2020 22:47:47 +0800 Subject: [PATCH] =?UTF-8?q?fix(ui):=20snackbar=20index.ts=E9=87=8D?= =?UTF-8?q?=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit affects: @varlet/ui --- packages/varlet-ui/src/button/button.less | 8 +- packages/varlet-ui/src/dialog/index.ts | 2 +- packages/varlet-ui/src/skeleton/Skeleton.vue | 50 +----- packages/varlet-ui/src/skeleton/propsEmits.ts | 48 ++++++ packages/varlet-ui/src/snackbar/index.ts | 149 +++++++++--------- 5 files changed, 129 insertions(+), 128 deletions(-) create mode 100644 packages/varlet-ui/src/skeleton/propsEmits.ts diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less index f7f59c04403..77cb27c5272 100644 --- a/packages/varlet-ui/src/button/button.less +++ b/packages/varlet-ui/src/button/button.less @@ -21,14 +21,14 @@ line-height: 1.2; border-radius: @button-border-radius; user-select: none; - transition: box-shadow .2s; + transition: box-shadow .2s linear; will-change: box-shadow; &:active { box-shadow: - 0 3px 3px -2px @shadow-key-umbra-opacity, - 0 3px 4px 0 @shadow-key-penumbra-opacity, - 0 6px 8px 0 rgba(0, 0, 0, 0.24); + 0 6px 6px -3px @shadow-key-umbra-opacity, + 0 10px 14px 1px @shadow-key-penumbra-opacity, + 0 4px 18px 3px @shadow-key-ambient-opacity } &--plain { diff --git a/packages/varlet-ui/src/dialog/index.ts b/packages/varlet-ui/src/dialog/index.ts index afe36624e8f..9594970a8ca 100644 --- a/packages/varlet-ui/src/dialog/index.ts +++ b/packages/varlet-ui/src/dialog/index.ts @@ -27,7 +27,7 @@ type DialogResolveState = 'confirm' | 'cancel' | 'close' function Dialog(options: DialogOptions | string): Promise { return new Promise((resolve) => { - const dialogOptions: DialogOptions = (isString(options) ? { message: options } : options) + const dialogOptions: DialogOptions = isString(options) ? { message: options } : options const reactiveDialogOptions: DialogOptions = reactive(dialogOptions) const { unmountInstance } = mountInstance( diff --git a/packages/varlet-ui/src/skeleton/Skeleton.vue b/packages/varlet-ui/src/skeleton/Skeleton.vue index afcc932f698..7d552a6ff9c 100644 --- a/packages/varlet-ui/src/skeleton/Skeleton.vue +++ b/packages/varlet-ui/src/skeleton/Skeleton.vue @@ -44,57 +44,11 @@ diff --git a/packages/varlet-ui/src/skeleton/propsEmits.ts b/packages/varlet-ui/src/skeleton/propsEmits.ts new file mode 100644 index 00000000000..b626fbc83d3 --- /dev/null +++ b/packages/varlet-ui/src/skeleton/propsEmits.ts @@ -0,0 +1,48 @@ +export const props = { + // 加载状态 + loading: { + type: Boolean, + default: true, + }, + // 段落行数 + row: { + type: Number, + default: 0, + }, + rowWidth: { + type: Array, + default: () => [], + }, + // 是否全屏 + fullscreen: { + type: Boolean, + default: false, + }, + // 是否显示标题 + title: { + type: Boolean, + default: false, + }, + // 标题宽度 + titleWidth: { + type: String, + }, + // 是否显示卡片 + card: { + type: Boolean, + default: false, + }, + // 卡片高度 + cardHeight: { + type: String, + }, + // 是否显示头像 + avatar: { + type: Boolean, + default: false, + }, + // 头像大小 + avatarSize: { + type: String, + } +} diff --git a/packages/varlet-ui/src/snackbar/index.ts b/packages/varlet-ui/src/snackbar/index.ts index 183b0c944a3..0e4aa3b38bf 100644 --- a/packages/varlet-ui/src/snackbar/index.ts +++ b/packages/varlet-ui/src/snackbar/index.ts @@ -23,92 +23,91 @@ interface SnackbarOptions { onClosed?: () => void } +const TransitionGroupHost = { + setup() { + return () => { + const snackbarList = Snackbar.instances.map( + ({ id, reactiveSnackOptions, _update }: any) => { + if (reactiveSnackOptions.forbidClick) { + const transitionGroupEl = document.querySelector( + '.var-transition-group' + ) + ;(transitionGroupEl as HTMLElement).classList.add( + 'var-pointer-auto' + ) + } + return h(VarSnackbarCore, { + ...reactiveSnackOptions, + ...{ + key: id, + style: { + position: 'relative', + top: getTop(reactiveSnackOptions.position), + }, + _update, + 'onUpdate:show': (value: boolean) => { + reactiveSnackOptions.show = value + }, + }, + }) + } + ) + + return h( + TransitionGroup, + { + ...transitionGroupProps, + onAfterLeave: removeInstance, + }, + snackbarList + ) + } + }, +} + const Snackbar: any = function (options: SnackbarOptions): any { const snackOptions: SnackbarOptions = isBasicObject(options) ? options : {} const reactiveSnackOptions: SnackbarOptions = reactive( snackOptions ) - let snackbarList: any[] = reactive([]) - const Host = { - setup() { - return () => { - snackbarList = Snackbar.instances.map( - ({ id, reactiveSnackOptions, _update }: any) => { - if (reactiveSnackOptions.forbidClick) { - const transitionGroupEl = document.querySelector( - '.var-transition-group' - ) - ;(transitionGroupEl as HTMLElement).classList.add( - 'var-pointer-auto' - ) - } - return h(VarSnackbarCore, { - ...reactiveSnackOptions, - ...{ - key: id, - style: { - position: 'relative', - top: getTop(reactiveSnackOptions.position), - }, - _update, - 'onUpdate:show': (value: boolean) => { - reactiveSnackOptions.show = value - }, - }, - }) - } - ) - - return h( - TransitionGroup, - { - ...transitionGroupProps, - onAfterLeave: removeInstance, - }, - snackbarList - ) - } - }, - } + reactiveSnackOptions.show = true + + const api = { + clear() { + reactiveSnackOptions.show = false + } + } if (!Snackbar.isMount) { Snackbar.isMount = true - mountInstance(Host) + mountInstance(TransitionGroupHost) } - const id = Date.now() - reactiveSnackOptions.show = true - - if (Snackbar.isAllowMultiple) { - Snackbar.instances.push({ - id, - reactiveSnackOptions, - }) + const id = Date.now() + const { length } = Snackbar.instances + + if (length === 0) { + Snackbar.instances.push({ + id, + reactiveSnackOptions, + }) + return api + } + + if (!Snackbar.isAllowMultiple) { + Snackbar.instances[0].reactiveSnackOptions = { + ...Snackbar.instances[0].reactiveSnackOptions, + ...reactiveSnackOptions, + } + Snackbar.instances[0]._update = `update-${id}` } else { - const { length } = Snackbar.instances - if (length === 1) { - Snackbar.instances[0].reactiveSnackOptions = { - ...Snackbar.instances[0].reactiveSnackOptions, - ...reactiveSnackOptions, - } - Snackbar.instances[0]._update = `update-${id}` - } else { - Snackbar.instances.push({ - id, - reactiveSnackOptions, - _update: `update-${id}`, - }) - } - } - return { - clear: () => { - for (let i = 0; i < snackbarList.length; i++) { - if (snackbarList[i].key === id) { - snackbarList[i].component.emit('update:show', false) - } - } - }, - } + Snackbar.instances.push({ + id, + reactiveSnackOptions, + }) + } + + return api } ;['success', 'warning', 'info', 'error', 'loading'].forEach((type: any) => {