From 304826d3ed82e7ac2650bd11b697c872f96ad805 Mon Sep 17 00:00:00 2001 From: chenjiajian <770230504@qq.com> Date: Tue, 9 May 2023 09:55:34 +0800 Subject: [PATCH] =?UTF-8?q?props=E5=AE=9A=E4=B9=89=E6=94=B9=E4=B8=BA?= =?UTF-8?q?=E9=A9=BC=E5=B3=B0=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/badge/index.js | 4 ++-- src/form/textarea.js | 4 ++-- src/image-preview/index.js | 7 +++---- src/image/index.js | 12 ++--------- src/popconfirm/index.js | 31 +++++++++++++-------------- src/progress/index.js | 34 +++++++++++++++--------------- src/result/index.js | 4 ++-- src/swipe/index.js | 43 +++++++++++++++++++++++++++++++++----- 8 files changed, 81 insertions(+), 58 deletions(-) diff --git a/src/badge/index.js b/src/badge/index.js index d20c3a6..fc42760 100644 --- a/src/badge/index.js +++ b/src/badge/index.js @@ -15,7 +15,7 @@ class Badge extends Component { default: null }, hidden: false, - 'is-dot': false + isDot: false } static styles = [ @@ -85,7 +85,7 @@ class Badge extends Component { return html`
- ${!this['is-dot'] && !this.hidden + ${!this.isDot && !this.hidden ? html`
${this.max && this.value >= this.max ? this.max + '+' diff --git a/src/form/textarea.js b/src/form/textarea.js index 8899a1e..2143869 100644 --- a/src/form/textarea.js +++ b/src/form/textarea.js @@ -23,7 +23,7 @@ class TextArea extends Component { minheight: null, maxlength: null, minlength: null, - 'show-limit': false, + showLimit: false, lazy: 0 // 并发拦截时间, 单位毫秒 } @@ -228,7 +228,7 @@ class TextArea extends Component { @keydown=${this.onKeydown} @change=${this.onChange} > - ${this['show-limit'] + ${this.showLimit ? html`
${this.value.length}/${this.maxlength || '∞'}
` diff --git a/src/image-preview/index.js b/src/image-preview/index.js index 88b866e..a200abd 100644 --- a/src/image-preview/index.js +++ b/src/image-preview/index.js @@ -15,8 +15,8 @@ class ImagePreview extends Component { attribute: false }, visible: false, - 'max-zoom': 3, - 'min-zoom': 1 / 3 + maxZoom: 3, + minZoom: 1 / 3 } static styles = css` @@ -138,8 +138,7 @@ class ImagePreview extends Component { this.setZoom(this.#state.scale / 1.2) } setZoom(val) { - const maxZoom = this['max-zoom'] - const minZoom = this['min-zoom'] + const { maxZoom, minZoom } = this val = Math.max(val, minZoom) val = Math.min(val, maxZoom) val = val.toFixed(2) diff --git a/src/image/index.js b/src/image/index.js index 7630053..133287e 100644 --- a/src/image/index.js +++ b/src/image/index.js @@ -12,7 +12,7 @@ class Image extends Component { src: '', fit: 'fill', lazy: false, - 'referrer-policy': null, + referrerPolicy: null, alt: { type: String, default: null @@ -56,15 +56,7 @@ class Image extends Component { } render() { - let { - lazy, - src, - status, - fit, - alt, - 'referrer-policy': referrerPolicy - } = this - + let { lazy, src, status, fit, alt, referrerPolicy } = this let styles = styleMap({ 'object-fit': fit }) diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js index c458008..41f893d 100644 --- a/src/popconfirm/index.js +++ b/src/popconfirm/index.js @@ -14,22 +14,22 @@ class Popconfirm extends Component { default: '', attribute: false }, - 'confirm-button-text': { + confirmButtonText: { type: String, default: '确定', attribute: false }, - 'cancel-button-text': { + cancelButtonText: { type: String, default: '取消', attribute: false }, - 'confirm-button-type': { + confirmButtonType: { type: String, default: 'primary', attribute: false }, - 'cancel-button-type': { + cancelButtonType: { type: String, default: '', attribute: false @@ -39,15 +39,14 @@ class Popconfirm extends Component { default: 'info', attribute: false }, - 'icon-color': { + iconColor: { type: String, default: '#ff9900', attribute: false }, - 'hide-icon': { + hideIcon: { type: Boolean, - default: false, - attribute: false + default: false }, show: { @@ -187,34 +186,34 @@ class Popconfirm extends Component { ref="popover" >

- ${this['hide-icon'] + ${this.hideIcon ? '' : html``} ${this.title}

- ${!this['cancel-button-type'] + ${!this.cancelButtonType ? html`${this['cancel-button-text']}${this.cancelButtonText}` : html`${this['cancel-button-text']}${this[cancelButtonText]}`} ${this['confirm-button-text']}${this.confirmButtonText}
diff --git a/src/progress/index.js b/src/progress/index.js index aaecdba..e1b4573 100644 --- a/src/progress/index.js +++ b/src/progress/index.js @@ -20,12 +20,12 @@ class Progress extends Component { type: String, default: 'line' // line/circle/dashboard }, - 'stroke-width': { + strokeWidth: { type: Number, default: 6, attribute: false }, - 'text-inside': { + textInside: { type: Boolean, default: false, attribute: true @@ -52,22 +52,22 @@ class Progress extends Component { default: 126, attribute: false }, - 'show-text': { + showText: { type: Boolean, default: false, attribute: true }, - 'back-color': { + backColor: { type: String, default: '#ebeef5', attribute: false }, - 'text-color': { + textColor: { type: String, default: '#606266', attribute: false }, - 'stroke-linecap': { + strokeLinecap: { type: String, default: 'round', //butt/round/square attribute: false @@ -125,7 +125,7 @@ class Progress extends Component { #colors get relativeStrokeWidth() { - return ((this['stroke-width'] / this.width) * 100).toFixed(1) + return ((this.strokeWidth / this.width) * 100).toFixed(1) } get radius() { if (this.type === 'circle' || this.type === 'dashboard') { @@ -199,7 +199,7 @@ class Progress extends Component { get progressTextSize() { let size = this.type === 'line' - ? 12 + this['stroke-width'] * 0.4 + ? 12 + this.strokeWidth * 0.4 : this.width * 0.111111 + 2 return size + 'px' } @@ -230,7 +230,7 @@ class Progress extends Component { @@ -250,13 +250,13 @@ class Progress extends Component { } renderLine() { let $barInnerText = '' - if (this['text-inside'] && this['show-text']) { + if (this.textInside && this.showText) { $barInnerText = html`
${this.value + '%'} @@ -269,8 +269,8 @@ class Progress extends Component {
${$barInnerText}
@@ -280,12 +280,12 @@ class Progress extends Component { } render() { let $outSideText = '' - if (this['show-text'] && !this['text-inside']) { + if (this.showText && !this.textInside) { $outSideText = html`
diff --git a/src/result/index.js b/src/result/index.js index 3a5a8b0..77e3e9d 100644 --- a/src/result/index.js +++ b/src/result/index.js @@ -14,7 +14,7 @@ class Result extends Component { default: '', attribute: false }, - 'sub-title': { type: String, default: '' }, + subTitle: { type: String, default: '' }, type: { type: String, default: 'success' @@ -117,7 +117,7 @@ class Result extends Component {
- ${this['sub-title']} + ${this.subTitle}
diff --git a/src/swipe/index.js b/src/swipe/index.js index 5edb03c..5ce06db 100644 --- a/src/swipe/index.js +++ b/src/swipe/index.js @@ -7,6 +7,7 @@ import { css, html, Component, nextTick, styleMap } from '@bd/core' import '../icon/index.js' const CARD_SCALE = 0.83 + function createWatcher(object, key, effect) { let value Object.defineProperty(object, key, { @@ -19,9 +20,10 @@ function createWatcher(object, key, effect) { } }) } + class Swipe extends Component { static props = { - 'initial-index': { + initialIndex: { type: Number, default: 0 }, @@ -68,11 +70,12 @@ class Swipe extends Component { type: String, default: 'horizontal' // horizontal or vertical }, - 'pause-on-hover': { + pauseOnHover: { type: Boolean, default: true } } + static styles = css` :host { overflow: hidden; @@ -175,6 +178,7 @@ class Swipe extends Component { } } ` + items = [] activeIndex = 0 stamp = 0 @@ -222,16 +226,19 @@ class Swipe extends Component { return } this.stamp = now + if (typeof index === 'string') { const filteredItems = this.items.filter(item => item.name === index) if (filteredItems.length > 0) { index = this.items.indexOf(filteredItems[0]) } } + index = Number(index) if (isNaN(index) || index !== Math.floor(index)) { return } + const length = this.items.length const oldIndex = this.activeIndex if (index < 0) { @@ -244,6 +251,7 @@ class Swipe extends Component { if (oldIndex !== this.activeIndex) { this.resetItemPosition(oldIndex) } + this.resetTimer() nextTick(() => this.$requestUpdate()) } @@ -277,10 +285,11 @@ class Swipe extends Component { this.updateItems() this.resetItemPosition() } + mounted() { this.updateItems() nextTick(() => { - let initialIndex = this['initial-index'] + let initialIndex = this.initialIndex if (initialIndex >= 0 && initialIndex < this.items.length) { this.activeIndex = initialIndex } @@ -289,10 +298,11 @@ class Swipe extends Component { this.startTimer() }) - if (this['pause-on-hover']) { + if (this.pauseOnHover) { this.$on('mouseenter', () => this.pauseTimer()) this.$on('mouseleave', () => this.startTimer()) } + if (this.arrow === 'hover') { this.$on('mouseenter', () => this.showArrow()) this.$on('mouseleave', () => this.hideArrow()) @@ -300,15 +310,18 @@ class Swipe extends Component { this.showArrow() } } + unmounted() { this.resizeObserve.disconnect() this.resizeObserve = null this.pauseTimer() } + render() { let styles = styleMap({ opacity: this.showArrowBtn ? 0.6 : 0 }) + let toggleBtns = this.direction === 'horizontal' ? html` @@ -345,10 +358,12 @@ class Swipe extends Component { ` } } + class SwipeItem extends Component { static props = { name: { String, attributes: false } } + static styles = css` :host { position: absolute; @@ -372,42 +387,51 @@ class SwipeItem extends Component { cursor: pointer; } ` + static watch = { translate(val) { const translateType = this.$parent.direction === 'horizontal' ? 'translateX' : 'translateY' this.style.transform = `${translateType}(${val}px) scale(${this.scale})` }, + ready(val) { val ? this.setAttribute('ready', '') : this.removeAttribute('ready') }, + animating(val) { val ? this.setAttribute('animating', '') : this.removeAttribute('animating') }, + active(val) { if (this.$parent.type !== 'card') { return } - let style = { + + const style = { opacity: 1, 'z-index': 1, filter: 'brightness(0.8)' } + if (this.inStage) { style['z-index'] = 1 } else { style['z-index'] = -1 style.opacity = 0 } + if (val) { style['z-index'] = 2 style.filter = 'brightness(1)' } + Object.assign(this.style, style) } } + processIndex(index, activeIndex, length) { if (activeIndex === 0 && index === length - 1) { return -1 @@ -420,6 +444,7 @@ class SwipeItem extends Component { } return index } + calcCardTranslate(index, activeIndex) { const parentWidth = this.$parent.offsetWidth if (this.inStage) { @@ -430,6 +455,7 @@ class SwipeItem extends Component { return ((3 + CARD_SCALE) * parentWidth) / 4 } } + calcTranslate(index, activeIndex, isVertical) { const distance = this.$parent[isVertical ? 'offsetHeight' : 'offsetWidth'] return distance * (index - activeIndex) @@ -439,18 +465,22 @@ class SwipeItem extends Component { const parentType = this.$parent.type const parentDirection = this.$parent.direction const length = this.$parent.items.length + if (parentType !== 'card' && oldIndex !== undefined) { this.animating = index === activeIndex || index === oldIndex } + if (index !== activeIndex && length > 2 && this.$parent.loop) { index = this.processIndex(index, activeIndex, length) } + if (parentType === 'card') { if (parentDirection === 'vertical') { console.warn( '[Warn][Carousel]vertical direction is not supported in card mode' ) } + this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1 this.active = index === activeIndex this.scale = this.active ? 1 : CARD_SCALE @@ -462,14 +492,17 @@ class SwipeItem extends Component { this.scale = 1 this.translate = this.calcTranslate(index, activeIndex, isVertical) } + !this.ready && (this.ready = true) } + created() { const { watch } = this.constructor for (const key in watch) { createWatcher(this, key, watch[key]) } } + mounted() { this.$parent = this.parentNode if (this.$parent.type === 'card') {