20 changed files with 1202 additions and 632 deletions
@ -1,197 +1,233 @@ |
|||||||
import { BLUE, WHITE } from '../common/color'; |
import { |
||||||
import { VantComponent } from '../common/component'; |
BLUE, |
||||||
import { getSystemInfoSync } from '../common/utils'; |
WHITE |
||||||
import { isObj } from '../common/validator'; |
} from '../common/color'; |
||||||
import { canIUseCanvas2d } from '../common/version'; |
import { |
||||||
import { adaptor } from './canvas'; |
VantComponent |
||||||
|
} from '../common/component'; |
||||||
|
import { |
||||||
|
getSystemInfoSync |
||||||
|
} from '../common/utils'; |
||||||
|
import { |
||||||
|
isObj |
||||||
|
} from '../common/validator'; |
||||||
|
import { |
||||||
|
canIUseCanvas2d |
||||||
|
} from '../common/version'; |
||||||
|
import { |
||||||
|
adaptor |
||||||
|
} from './canvas'; |
||||||
|
|
||||||
function format(rate) { |
function format(rate) { |
||||||
return Math.min(Math.max(rate, 0), 100); |
return Math.min(Math.max(rate, 0), 100); |
||||||
} |
} |
||||||
const PERIMETER = 2 * Math.PI; |
const PERIMETER = 2 * Math.PI; |
||||||
const BEGIN_ANGLE = -Math.PI / 2; |
const BEGIN_ANGLE = -Math.PI / 2; |
||||||
const STEP = 1; |
const STEP = 1; |
||||||
VantComponent({ |
VantComponent({ |
||||||
props: { |
props: { |
||||||
text: String, |
text: String, |
||||||
lineCap: { |
lineCap: { |
||||||
type: String, |
type: String, |
||||||
value: 'round', |
value: 'round', |
||||||
}, |
}, |
||||||
value: { |
value: { |
||||||
type: Number, |
type: Number, |
||||||
value: 0, |
value: 0, |
||||||
observer: 'reRender', |
observer: 'reRender', |
||||||
}, |
}, |
||||||
speed: { |
speed: { |
||||||
type: Number, |
type: Number, |
||||||
value: 50, |
value: 50, |
||||||
}, |
}, |
||||||
size: { |
size: { |
||||||
type: Number, |
type: Number, |
||||||
value: 100, |
value: 100, |
||||||
observer() { |
observer() { |
||||||
this.drawCircle(this.currentValue); |
this.drawCircle(this.currentValue); |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
fill: String, |
fill: String, |
||||||
layerColor: { |
layerColor: { |
||||||
type: String, |
type: String, |
||||||
value: WHITE, |
value: WHITE, |
||||||
}, |
}, |
||||||
color: { |
color: { |
||||||
type: null, |
type: null, |
||||||
value: BLUE, |
value: BLUE, |
||||||
observer() { |
observer() { |
||||||
this.setHoverColor().then(() => { |
this.setHoverColor().then(() => { |
||||||
this.drawCircle(this.currentValue); |
this.drawCircle(this.currentValue); |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
type: { |
type: { |
||||||
type: String, |
type: String, |
||||||
value: '', |
value: '', |
||||||
}, |
}, |
||||||
strokeWidth: { |
strokeWidth: { |
||||||
type: Number, |
type: Number, |
||||||
value: 4, |
value: 4, |
||||||
}, |
}, |
||||||
clockwise: { |
clockwise: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: true, |
value: true, |
||||||
}, |
}, |
||||||
}, |
canvasId: { |
||||||
data: { |
type: String, |
||||||
hoverColor: BLUE, |
value: '' |
||||||
}, |
} |
||||||
methods: { |
}, |
||||||
getContext() { |
data: { |
||||||
const { type, size } = this.data; |
hoverColor: BLUE, |
||||||
if (type === '' || !canIUseCanvas2d()) { |
}, |
||||||
const ctx = wx.createCanvasContext('van-circle', this); |
methods: { |
||||||
return Promise.resolve(ctx); |
getContext() { |
||||||
} |
const { |
||||||
const dpr = getSystemInfoSync().pixelRatio; |
type, |
||||||
return new Promise((resolve) => { |
size |
||||||
wx.createSelectorQuery() |
} = this.data; |
||||||
.in(this) |
if (type === '' || !canIUseCanvas2d()) { |
||||||
.select('#van-circle') |
const ctx = wx.createCanvasContext('van-circle', this); |
||||||
.node() |
return Promise.resolve(ctx); |
||||||
.exec((res) => { |
} |
||||||
const canvas = res[0].node; |
const dpr = getSystemInfoSync().pixelRatio; |
||||||
const ctx = canvas.getContext(type); |
return new Promise((resolve) => { |
||||||
if (!this.inited) { |
wx.createSelectorQuery() |
||||||
this.inited = true; |
.in(this) |
||||||
canvas.width = size * dpr; |
.select('#van-circle') |
||||||
canvas.height = size * dpr; |
.node() |
||||||
ctx.scale(dpr, dpr); |
.exec((res) => { |
||||||
} |
const canvas = res[0].node; |
||||||
resolve(adaptor(ctx)); |
const ctx = canvas.getContext(type); |
||||||
}); |
if (!this.inited) { |
||||||
}); |
this.inited = true; |
||||||
}, |
canvas.width = size * dpr; |
||||||
setHoverColor() { |
canvas.height = size * dpr; |
||||||
const { color, size } = this.data; |
ctx.scale(dpr, dpr); |
||||||
if (isObj(color)) { |
} |
||||||
return this.getContext().then((context) => { |
resolve(adaptor(ctx)); |
||||||
if (!context) |
}); |
||||||
return; |
}); |
||||||
const LinearColor = context.createLinearGradient(size, 0, 0, 0); |
}, |
||||||
Object.keys(color) |
setHoverColor() { |
||||||
.sort((a, b) => parseFloat(a) - parseFloat(b)) |
const { |
||||||
.map((key) => LinearColor.addColorStop(parseFloat(key) / 100, color[key])); |
color, |
||||||
this.hoverColor = LinearColor; |
size |
||||||
}); |
} = this.data; |
||||||
} |
if (isObj(color)) { |
||||||
this.hoverColor = color; |
return this.getContext().then((context) => { |
||||||
return Promise.resolve(); |
if (!context) |
||||||
}, |
return; |
||||||
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) { |
const LinearColor = context.createLinearGradient(size, 0, 0, 0); |
||||||
const { strokeWidth, lineCap, clockwise, size } = this.data; |
Object.keys(color) |
||||||
const position = size / 2; |
.sort((a, b) => parseFloat(a) - parseFloat(b)) |
||||||
const radius = position - strokeWidth / 2; |
.map((key) => LinearColor.addColorStop(parseFloat(key) / 100, color[key])); |
||||||
context.setStrokeStyle(strokeStyle); |
this.hoverColor = LinearColor; |
||||||
context.setLineWidth(strokeWidth); |
}); |
||||||
context.setLineCap(lineCap); |
} |
||||||
context.beginPath(); |
this.hoverColor = color; |
||||||
context.arc(position, position, radius, beginAngle, endAngle, !clockwise); |
return Promise.resolve(); |
||||||
context.stroke(); |
}, |
||||||
if (fill) { |
presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) { |
||||||
context.setFillStyle(fill); |
const { |
||||||
context.fill(); |
strokeWidth, |
||||||
} |
lineCap, |
||||||
}, |
clockwise, |
||||||
renderLayerCircle(context) { |
size |
||||||
const { layerColor, fill } = this.data; |
} = this.data; |
||||||
this.presetCanvas(context, layerColor, 0, PERIMETER, fill); |
const position = size / 2; |
||||||
}, |
const radius = position - strokeWidth / 2; |
||||||
renderHoverCircle(context, formatValue) { |
context.setStrokeStyle(strokeStyle); |
||||||
const { clockwise } = this.data; |
context.setLineWidth(strokeWidth); |
||||||
// 结束角度
|
context.setLineCap(lineCap); |
||||||
const progress = PERIMETER * (formatValue / 100); |
context.beginPath(); |
||||||
const endAngle = clockwise |
context.arc(position, position, radius, beginAngle, endAngle, !clockwise); |
||||||
? BEGIN_ANGLE + progress |
context.stroke(); |
||||||
: 3 * Math.PI - (BEGIN_ANGLE + progress); |
if (fill) { |
||||||
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle); |
context.setFillStyle(fill); |
||||||
}, |
context.fill(); |
||||||
drawCircle(currentValue) { |
} |
||||||
const { size } = this.data; |
}, |
||||||
this.getContext().then((context) => { |
renderLayerCircle(context) { |
||||||
if (!context) |
const { |
||||||
return; |
layerColor, |
||||||
context.clearRect(0, 0, size, size); |
fill |
||||||
this.renderLayerCircle(context); |
} = this.data; |
||||||
const formatValue = format(currentValue); |
this.presetCanvas(context, layerColor, 0, PERIMETER, fill); |
||||||
if (formatValue !== 0) { |
}, |
||||||
this.renderHoverCircle(context, formatValue); |
renderHoverCircle(context, formatValue) { |
||||||
} |
const { |
||||||
context.draw(); |
clockwise |
||||||
}); |
} = this.data; |
||||||
}, |
// 结束角度
|
||||||
reRender() { |
const progress = PERIMETER * (formatValue / 100); |
||||||
// tofector 动画暂时没有想到好的解决方案
|
const endAngle = clockwise ? |
||||||
const { value, speed } = this.data; |
BEGIN_ANGLE + progress : |
||||||
if (speed <= 0 || speed > 1000) { |
3 * Math.PI - (BEGIN_ANGLE + progress); |
||||||
this.drawCircle(value); |
this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle); |
||||||
return; |
}, |
||||||
} |
drawCircle(currentValue) { |
||||||
this.clearMockInterval(); |
const { |
||||||
this.currentValue = this.currentValue || 0; |
size |
||||||
const run = () => { |
} = this.data; |
||||||
this.interval = setTimeout(() => { |
this.getContext().then((context) => { |
||||||
if (this.currentValue !== value) { |
if (!context) |
||||||
if (Math.abs(this.currentValue - value) < STEP) { |
return; |
||||||
this.currentValue = value; |
context.clearRect(0, 0, size, size); |
||||||
} |
this.renderLayerCircle(context); |
||||||
else if (this.currentValue < value) { |
const formatValue = format(currentValue); |
||||||
this.currentValue += STEP; |
if (formatValue !== 0) { |
||||||
} |
this.renderHoverCircle(context, formatValue); |
||||||
else { |
} |
||||||
this.currentValue -= STEP; |
context.draw(); |
||||||
} |
}); |
||||||
this.drawCircle(this.currentValue); |
}, |
||||||
run(); |
reRender() { |
||||||
} |
// tofector 动画暂时没有想到好的解决方案
|
||||||
else { |
const { |
||||||
this.clearMockInterval(); |
value, |
||||||
} |
speed |
||||||
}, 1000 / speed); |
} = this.data; |
||||||
}; |
if (speed <= 0 || speed > 1000) { |
||||||
run(); |
this.drawCircle(value); |
||||||
}, |
return; |
||||||
clearMockInterval() { |
} |
||||||
if (this.interval) { |
this.clearMockInterval(); |
||||||
clearTimeout(this.interval); |
this.currentValue = this.currentValue || 0; |
||||||
this.interval = null; |
const run = () => { |
||||||
} |
this.interval = setTimeout(() => { |
||||||
}, |
if (this.currentValue !== value) { |
||||||
}, |
if (Math.abs(this.currentValue - value) < STEP) { |
||||||
mounted() { |
this.currentValue = value; |
||||||
this.currentValue = this.data.value; |
} else if (this.currentValue < value) { |
||||||
this.setHoverColor().then(() => { |
this.currentValue += STEP; |
||||||
this.drawCircle(this.currentValue); |
} else { |
||||||
}); |
this.currentValue -= STEP; |
||||||
}, |
} |
||||||
destroyed() { |
this.drawCircle(this.currentValue); |
||||||
this.clearMockInterval(); |
run(); |
||||||
}, |
} else { |
||||||
}); |
this.clearMockInterval(); |
||||||
|
} |
||||||
|
}, 1000 / speed); |
||||||
|
}; |
||||||
|
run(); |
||||||
|
}, |
||||||
|
clearMockInterval() { |
||||||
|
if (this.interval) { |
||||||
|
clearTimeout(this.interval); |
||||||
|
this.interval = null; |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.currentValue = this.data.value; |
||||||
|
this.setHoverColor().then(() => { |
||||||
|
this.drawCircle(this.currentValue); |
||||||
|
}); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
this.clearMockInterval(); |
||||||
|
}, |
||||||
|
}); |
||||||
@ -1 +1,16 @@ |
|||||||
@import '../common/index.wxss';.van-circle{display:inline-block;position:relative;text-align:center}.van-circle__text{color:var(--circle-text-color,#323233);left:0;position:absolute;top:50%;transform:translateY(-50%);width:100%} |
@import '../common/index.wxss'; |
||||||
|
|
||||||
|
.van-circle { |
||||||
|
display: inline-block; |
||||||
|
position: relative; |
||||||
|
text-align: center |
||||||
|
} |
||||||
|
|
||||||
|
.van-circle__text { |
||||||
|
color: var(--circle-text-color, #323233); |
||||||
|
left: 0; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
transform: translateY(-50%); |
||||||
|
width: 100% |
||||||
|
} |
||||||
@ -1,130 +1,157 @@ |
|||||||
import { useParent } from '../common/relation'; |
import { |
||||||
import { VantComponent } from '../common/component'; |
useParent |
||||||
|
} from '../common/relation'; |
||||||
|
import { |
||||||
|
VantComponent |
||||||
|
} from '../common/component'; |
||||||
VantComponent({ |
VantComponent({ |
||||||
classes: ['item-title-class'], |
classes: ['item-title-class'], |
||||||
field: true, |
field: true, |
||||||
relation: useParent('dropdown-menu', function () { |
relation: useParent('dropdown-menu', function() { |
||||||
this.updateDataFromParent(); |
this.updateDataFromParent(); |
||||||
}), |
}), |
||||||
props: { |
props: { |
||||||
value: { |
value: { |
||||||
type: null, |
type: null, |
||||||
observer: 'rerender', |
observer: 'rerender', |
||||||
}, |
}, |
||||||
title: { |
title: { |
||||||
type: String, |
type: String, |
||||||
observer: 'rerender', |
observer: 'rerender', |
||||||
}, |
}, |
||||||
disabled: Boolean, |
disabled: Boolean, |
||||||
titleClass: { |
titleClass: { |
||||||
type: String, |
type: String, |
||||||
observer: 'rerender', |
observer: 'rerender', |
||||||
}, |
}, |
||||||
options: { |
options: { |
||||||
type: Array, |
type: Array, |
||||||
value: [], |
value: [], |
||||||
observer: 'rerender', |
observer: 'rerender', |
||||||
}, |
}, |
||||||
popupStyle: String, |
popupStyle: String, |
||||||
useBeforeToggle: { |
useBeforeToggle: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: false, |
value: false, |
||||||
}, |
}, |
||||||
rootPortal: { |
rootPortal: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: false, |
value: false, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
data: { |
data: { |
||||||
transition: true, |
transition: true, |
||||||
showPopup: false, |
showPopup: false, |
||||||
showWrapper: false, |
showWrapper: false, |
||||||
displayTitle: '', |
displayTitle: '', |
||||||
safeAreaTabBar: false, |
safeAreaTabBar: false, |
||||||
}, |
}, |
||||||
methods: { |
methods: { |
||||||
rerender() { |
rerender() { |
||||||
wx.nextTick(() => { |
wx.nextTick(() => { |
||||||
var _a; |
var _a; |
||||||
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData(); |
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData(); |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
updateDataFromParent() { |
updateDataFromParent() { |
||||||
if (this.parent) { |
if (this.parent) { |
||||||
const { overlay, duration, activeColor, closeOnClickOverlay, direction, safeAreaTabBar, } = this.parent.data; |
const { |
||||||
this.setData({ |
overlay, |
||||||
overlay, |
duration, |
||||||
duration, |
activeColor, |
||||||
activeColor, |
closeOnClickOverlay, |
||||||
closeOnClickOverlay, |
direction, |
||||||
direction, |
safeAreaTabBar, |
||||||
safeAreaTabBar, |
} = this.parent.data; |
||||||
}); |
this.setData({ |
||||||
} |
overlay, |
||||||
}, |
duration, |
||||||
onOpen() { |
activeColor, |
||||||
this.$emit('open'); |
closeOnClickOverlay, |
||||||
}, |
direction, |
||||||
onOpened() { |
safeAreaTabBar, |
||||||
this.$emit('opened'); |
}); |
||||||
}, |
} |
||||||
onClose() { |
}, |
||||||
this.$emit('close'); |
onOpen() { |
||||||
}, |
this.$emit('open'); |
||||||
onClosed() { |
}, |
||||||
this.$emit('closed'); |
onOpened() { |
||||||
this.setData({ showWrapper: false }); |
this.$emit('opened'); |
||||||
}, |
}, |
||||||
onOptionTap(event) { |
onClose() { |
||||||
const { option } = event.currentTarget.dataset; |
this.$emit('close'); |
||||||
const { value } = option; |
}, |
||||||
const shouldEmitChange = this.data.value !== value; |
onClosed() { |
||||||
this.setData({ showPopup: false, value }); |
this.$emit('closed'); |
||||||
this.$emit('close'); |
this.setData({ |
||||||
this.rerender(); |
showWrapper: false |
||||||
if (shouldEmitChange) { |
}); |
||||||
this.$emit('change', value); |
}, |
||||||
} |
onOptionTap(event) { |
||||||
}, |
const { |
||||||
toggle(show, options = {}) { |
option |
||||||
const { showPopup } = this.data; |
} = event.currentTarget.dataset; |
||||||
if (typeof show !== 'boolean') { |
const { |
||||||
show = !showPopup; |
value |
||||||
} |
} = option; |
||||||
if (show === showPopup) { |
const shouldEmitChange = this.data.value !== value; |
||||||
return; |
this.setData({ |
||||||
} |
showPopup: false, |
||||||
this.onBeforeToggle(show).then((status) => { |
value |
||||||
var _a; |
}); |
||||||
if (!status) { |
this.$emit('close'); |
||||||
return; |
this.rerender(); |
||||||
} |
if (shouldEmitChange) { |
||||||
this.setData({ |
this.$emit('change', value); |
||||||
transition: !options.immediate, |
} |
||||||
showPopup: show, |
}, |
||||||
}); |
toggle(show, options = {}) { |
||||||
if (show) { |
const { |
||||||
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then((wrapperStyle) => { |
showPopup |
||||||
this.setData({ wrapperStyle, showWrapper: true }); |
} = this.data; |
||||||
this.rerender(); |
if (typeof show !== 'boolean') { |
||||||
}); |
show = !showPopup; |
||||||
} |
} |
||||||
else { |
if (show === showPopup) { |
||||||
this.rerender(); |
return; |
||||||
} |
} |
||||||
}); |
this.onBeforeToggle(show).then((status) => { |
||||||
}, |
var _a; |
||||||
onBeforeToggle(status) { |
if (!status) { |
||||||
const { useBeforeToggle } = this.data; |
return; |
||||||
if (!useBeforeToggle) { |
} |
||||||
return Promise.resolve(true); |
this.setData({ |
||||||
} |
transition: !options.immediate, |
||||||
return new Promise((resolve) => { |
showPopup: show, |
||||||
this.$emit('before-toggle', { |
}); |
||||||
status, |
if (show) { |
||||||
callback: (value) => resolve(value), |
(_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then(( |
||||||
}); |
wrapperStyle) => { |
||||||
}); |
this.setData({ |
||||||
}, |
wrapperStyle, |
||||||
}, |
showWrapper: true |
||||||
}); |
}); |
||||||
|
this.rerender(); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.rerender(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
onBeforeToggle(status) { |
||||||
|
const { |
||||||
|
useBeforeToggle |
||||||
|
} = this.data; |
||||||
|
if (!useBeforeToggle) { |
||||||
|
return Promise.resolve(true); |
||||||
|
} |
||||||
|
return new Promise((resolve) => { |
||||||
|
this.$emit('before-toggle', { |
||||||
|
status, |
||||||
|
callback: (value) => resolve(value), |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
@ -1,117 +1,139 @@ |
|||||||
import { VantComponent } from '../common/component'; |
import { |
||||||
import { useChildren } from '../common/relation'; |
VantComponent |
||||||
import { addUnit, getRect, getSystemInfoSync } from '../common/utils'; |
} from '../common/component'; |
||||||
|
import { |
||||||
|
useChildren |
||||||
|
} from '../common/relation'; |
||||||
|
import { |
||||||
|
addUnit, |
||||||
|
getRect, |
||||||
|
getSystemInfoSync |
||||||
|
} from '../common/utils'; |
||||||
let ARRAY = []; |
let ARRAY = []; |
||||||
VantComponent({ |
VantComponent({ |
||||||
field: true, |
field: true, |
||||||
classes: ['title-class'], |
classes: ['title-class'], |
||||||
relation: useChildren('dropdown-item', function () { |
relation: useChildren('dropdown-item', function() { |
||||||
this.updateItemListData(); |
this.updateItemListData(); |
||||||
}), |
}), |
||||||
props: { |
props: { |
||||||
activeColor: { |
activeColor: { |
||||||
type: String, |
type: String, |
||||||
observer: 'updateChildrenData', |
observer: 'updateChildrenData', |
||||||
}, |
}, |
||||||
overlay: { |
overlay: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: true, |
value: true, |
||||||
observer: 'updateChildrenData', |
observer: 'updateChildrenData', |
||||||
}, |
}, |
||||||
zIndex: { |
zIndex: { |
||||||
type: Number, |
type: Number, |
||||||
value: 10, |
value: 10, |
||||||
}, |
}, |
||||||
duration: { |
duration: { |
||||||
type: Number, |
type: Number, |
||||||
value: 200, |
value: 200, |
||||||
observer: 'updateChildrenData', |
observer: 'updateChildrenData', |
||||||
}, |
}, |
||||||
direction: { |
direction: { |
||||||
type: String, |
type: String, |
||||||
value: 'down', |
value: 'down', |
||||||
observer: 'updateChildrenData', |
observer: 'updateChildrenData', |
||||||
}, |
}, |
||||||
safeAreaTabBar: { |
safeAreaTabBar: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: false, |
value: false, |
||||||
}, |
}, |
||||||
closeOnClickOverlay: { |
closeOnClickOverlay: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: true, |
value: true, |
||||||
observer: 'updateChildrenData', |
observer: 'updateChildrenData', |
||||||
}, |
}, |
||||||
closeOnClickOutside: { |
closeOnClickOutside: { |
||||||
type: Boolean, |
type: Boolean, |
||||||
value: true, |
value: true, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
data: { |
data: { |
||||||
itemListData: [], |
itemListData: [], |
||||||
}, |
currentValue: '' |
||||||
beforeCreate() { |
}, |
||||||
const { windowHeight } = getSystemInfoSync(); |
beforeCreate() { |
||||||
this.windowHeight = windowHeight; |
const { |
||||||
ARRAY.push(this); |
windowHeight |
||||||
}, |
} = getSystemInfoSync(); |
||||||
destroyed() { |
this.windowHeight = windowHeight; |
||||||
ARRAY = ARRAY.filter((item) => item !== this); |
ARRAY.push(this); |
||||||
}, |
}, |
||||||
methods: { |
destroyed() { |
||||||
updateItemListData() { |
ARRAY = ARRAY.filter((item) => item !== this); |
||||||
this.setData({ |
}, |
||||||
itemListData: this.children.map((child) => child.data), |
methods: { |
||||||
}); |
updateItemListData() { |
||||||
}, |
this.setData({ |
||||||
updateChildrenData() { |
itemListData: this.children.map((child) => child.data), |
||||||
this.children.forEach((child) => { |
}); |
||||||
child.updateDataFromParent(); |
}, |
||||||
}); |
updateChildrenData() { |
||||||
}, |
this.children.forEach((child) => { |
||||||
toggleItem(active) { |
child.updateDataFromParent(); |
||||||
this.children.forEach((item, index) => { |
}); |
||||||
const { showPopup } = item.data; |
}, |
||||||
if (index === active) { |
toggleItem(active) { |
||||||
item.toggle(); |
this.children.forEach((item, index) => { |
||||||
} |
const { |
||||||
else if (showPopup) { |
showPopup |
||||||
item.toggle(false, { immediate: true }); |
} = item.data; |
||||||
} |
if (index === active) { |
||||||
}); |
item.toggle(); |
||||||
}, |
} else if (showPopup) { |
||||||
close() { |
item.toggle(false, { |
||||||
this.children.forEach((child) => { |
immediate: true |
||||||
child.toggle(false, { immediate: true }); |
}); |
||||||
}); |
} |
||||||
}, |
}); |
||||||
getChildWrapperStyle() { |
}, |
||||||
const { zIndex, direction } = this.data; |
close() { |
||||||
return getRect(this, '.van-dropdown-menu').then((rect) => { |
this.children.forEach((child) => { |
||||||
const { top = 0, bottom = 0 } = rect; |
child.toggle(false, { |
||||||
const offset = direction === 'down' ? bottom : this.windowHeight - top; |
immediate: true |
||||||
let wrapperStyle = `z-index: ${zIndex};`; |
}); |
||||||
if (direction === 'down') { |
}); |
||||||
wrapperStyle += `top: ${addUnit(offset)};`; |
}, |
||||||
} |
getChildWrapperStyle() { |
||||||
else { |
const { |
||||||
wrapperStyle += `bottom: ${addUnit(offset)};`; |
zIndex, |
||||||
} |
direction |
||||||
return wrapperStyle; |
} = this.data; |
||||||
}); |
return getRect(this, '.van-dropdown-menu').then((rect) => { |
||||||
}, |
const { |
||||||
onTitleTap(event) { |
top = 0, bottom = 0 |
||||||
const { index } = event.currentTarget.dataset; |
} = rect; |
||||||
const child = this.children[index]; |
const offset = direction === 'down' ? bottom : this.windowHeight - top; |
||||||
if (!child.data.disabled) { |
let wrapperStyle = `z-index: ${zIndex};`; |
||||||
ARRAY.forEach((menuItem) => { |
if (direction === 'down') { |
||||||
if (menuItem && |
wrapperStyle += `top: ${addUnit(offset)};`; |
||||||
menuItem.data.closeOnClickOutside && |
} else { |
||||||
menuItem !== this) { |
wrapperStyle += `bottom: ${addUnit(offset)};`; |
||||||
menuItem.close(); |
} |
||||||
} |
return wrapperStyle; |
||||||
}); |
}); |
||||||
this.toggleItem(index); |
}, |
||||||
} |
onTitleTap(event) { |
||||||
}, |
const { |
||||||
}, |
index |
||||||
}); |
} = event.currentTarget.dataset; |
||||||
|
const child = this.children[index]; |
||||||
|
if (!child.data.disabled) { |
||||||
|
ARRAY.forEach((menuItem) => { |
||||||
|
if (menuItem && |
||||||
|
menuItem.data.closeOnClickOutside && |
||||||
|
menuItem !== this) { |
||||||
|
menuItem.close(); |
||||||
|
} |
||||||
|
}); |
||||||
|
this.toggleItem(index); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
@ -1,16 +1,21 @@ |
|||||||
/* eslint-disable */ |
/* eslint-disable */ |
||||||
function displayTitle(item) { |
function displayTitle(item) { |
||||||
if (item.title) { |
if (item.title) { |
||||||
return item.title; |
return item.title; |
||||||
} |
} |
||||||
|
|
||||||
var match = item.options.filter(function(option) { |
var match = item.options.filter(function(option) { |
||||||
return option.value === item.value; |
return option.value === item.value; |
||||||
}); |
}); |
||||||
var displayTitle = match.length ? match[0].text : ''; |
var displayTitle = match.length ? match[0].text : ''; |
||||||
return displayTitle; |
return displayTitle; |
||||||
|
} |
||||||
|
|
||||||
|
function setTitleColor(item) { |
||||||
|
return item.value != '' ? '#17c653' : '' |
||||||
} |
} |
||||||
|
|
||||||
module.exports = { |
module.exports = { |
||||||
displayTitle: displayTitle |
displayTitle: displayTitle, |
||||||
}; |
setTitleColor: setTitleColor |
||||||
|
}; |
||||||
Loading…
Reference in new issue