白色主题
This commit is contained in:
@@ -3,7 +3,7 @@ const props = {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
customStyle: {
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
@@ -33,6 +33,7 @@ export default class Slider extends SuperComponent {
|
||||
marks(val: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
created(): void;
|
||||
attached(): void;
|
||||
};
|
||||
triggerValue(value?: SliderValue): void;
|
||||
|
||||
@@ -18,12 +18,14 @@ import config from '../common/config';
|
||||
import { trimSingleValue, trimValue } from './tool';
|
||||
import props from './props';
|
||||
import { getRect } from '../common/utils';
|
||||
import Bus from '../common/bus';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-slider`;
|
||||
let Slider = class Slider extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
'class',
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-bar`,
|
||||
`${prefix}-class-bar-active`,
|
||||
@@ -72,10 +74,18 @@ let Slider = class Slider extends SuperComponent {
|
||||
}
|
||||
},
|
||||
marks(val) {
|
||||
this.handleMask(val);
|
||||
if (this.data.initialLeft != null) {
|
||||
this.handleMask(val);
|
||||
}
|
||||
else {
|
||||
this.bus.on('initial', () => this.handleMask(val));
|
||||
}
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
created() {
|
||||
this.bus = new Bus();
|
||||
},
|
||||
attached() {
|
||||
const { value } = this.properties;
|
||||
if (!value)
|
||||
@@ -103,10 +113,19 @@ let Slider = class Slider extends SuperComponent {
|
||||
setValueAndTrigger();
|
||||
}
|
||||
handleMask(marks) {
|
||||
const calcPos = (arr) => {
|
||||
const { theme } = this.properties;
|
||||
const { blockSize, maxRange } = this.data;
|
||||
const margin = theme === 'capsule' ? blockSize / 2 : 0;
|
||||
return arr.map((item) => ({
|
||||
val: item,
|
||||
left: Math.round((item / 100) * maxRange) + margin,
|
||||
}));
|
||||
};
|
||||
if ((marks === null || marks === void 0 ? void 0 : marks.length) && Array.isArray(marks)) {
|
||||
this.setData({
|
||||
isScale: true,
|
||||
scaleArray: marks,
|
||||
scaleArray: calcPos(marks),
|
||||
scaleTextArray: [],
|
||||
});
|
||||
}
|
||||
@@ -115,16 +134,17 @@ let Slider = class Slider extends SuperComponent {
|
||||
const scaleTextArray = scaleArray.map((item) => marks[item]);
|
||||
this.setData({
|
||||
isScale: scaleArray.length > 0,
|
||||
scaleArray,
|
||||
scaleArray: calcPos(scaleArray),
|
||||
scaleTextArray,
|
||||
});
|
||||
}
|
||||
}
|
||||
setSingleBarWidth(value) {
|
||||
const { max, min } = this.properties;
|
||||
const { max, min, theme } = this.properties;
|
||||
const { maxRange, blockSize } = this.data;
|
||||
const halfBlock = theme === 'capsule' ? Number(blockSize) / 2 : 0;
|
||||
const percentage = (Number(value) - Number(min)) / (Number(max) - Number(min));
|
||||
const width = percentage * maxRange + blockSize / 2;
|
||||
const width = percentage * maxRange + halfBlock;
|
||||
this.setData({
|
||||
lineBarWidth: `${width}px`,
|
||||
});
|
||||
@@ -135,12 +155,20 @@ let Slider = class Slider extends SuperComponent {
|
||||
const { blockSize } = this.data;
|
||||
const { theme } = this.properties;
|
||||
const halfBlock = Number(blockSize) / 2;
|
||||
const margin = theme === 'capsule' ? 6 : 0;
|
||||
let maxRange = line.right - line.left;
|
||||
let initialLeft = line.left;
|
||||
let initialRight = line.right;
|
||||
if (theme === 'capsule') {
|
||||
maxRange = maxRange - Number(blockSize) - 6;
|
||||
initialLeft -= halfBlock;
|
||||
initialRight -= halfBlock;
|
||||
}
|
||||
this.setData({
|
||||
maxRange: line.right - line.left - Number(blockSize) - margin,
|
||||
initialLeft: line.left + halfBlock,
|
||||
initialRight: line.right - halfBlock,
|
||||
maxRange,
|
||||
initialLeft,
|
||||
initialRight,
|
||||
});
|
||||
this.bus.emit('initial');
|
||||
});
|
||||
}
|
||||
stepValue(value) {
|
||||
@@ -183,13 +211,13 @@ let Slider = class Slider extends SuperComponent {
|
||||
: Number(max) - (posValue / maxRange) * (Number(max) - Number(min));
|
||||
}
|
||||
onLineTap(e) {
|
||||
const { disabled } = this.properties;
|
||||
const { disabled, theme } = this.properties;
|
||||
const { initialLeft, initialRight, maxRange, blockSize } = this.data;
|
||||
if (disabled)
|
||||
return;
|
||||
const [touch] = e.changedTouches;
|
||||
const { pageX } = touch;
|
||||
const halfBlock = Number(blockSize) / 2;
|
||||
const halfBlock = theme === 'capsule' ? Number(blockSize) / 2 : 0;
|
||||
const currentLeft = pageX - initialLeft;
|
||||
if (currentLeft < 0 || currentLeft > maxRange + Number(blockSize))
|
||||
return;
|
||||
@@ -236,8 +264,9 @@ let Slider = class Slider extends SuperComponent {
|
||||
this.triggerValue(newData);
|
||||
}
|
||||
setLineStyle(left, right) {
|
||||
const { theme } = this.properties;
|
||||
const { blockSize, maxRange } = this.data;
|
||||
const halfBlock = Number(blockSize) / 2;
|
||||
const halfBlock = theme === 'capsule' ? Number(blockSize) / 2 : 0;
|
||||
const [a, b] = this.data._value;
|
||||
const cut = (v) => parseInt(v, 10);
|
||||
this.setData({
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
style="{{ customStyle }}"
|
||||
class="{{_.cls(classPrefix, [['top', label || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} {{prefix}}-class"
|
||||
style="{{ style }}"
|
||||
class="{{_.cls(classPrefix, [['top', label || scaleTextArray.length], ['disabled', disabled], ['range', range]])}} class {{prefix}}-class"
|
||||
>
|
||||
<block wx:if="{{!range}}">
|
||||
<text wx:if="{{showExtremeValue}}" class="{{classPrefix}}__value {{classPrefix}}__value--min">
|
||||
@@ -17,10 +17,10 @@
|
||||
>
|
||||
<block wx:if="{{isScale}}">
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__scale-item', [['active', _value >= item], ['disabled', disabled], theme, ['hidden', index == 0 || index == scaleArray.length - 1 || value == item]])}}"
|
||||
class="{{_.cls(classPrefix + '__scale-item', [['active', _value >= item.val], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}"
|
||||
wx:for="{{scaleArray}}"
|
||||
wx:key="index"
|
||||
style="left:{{item}}%; transform: translateX({{- item}}%); {{t.getColor(disabled, _value >= item, disabledColor, colors)}}"
|
||||
style="left:{{item.left}}px; transform: translateX(-50%); {{t.getColor(disabled, _value >= item.val, disabledColor, colors)}}"
|
||||
>
|
||||
<view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}}}">
|
||||
{{scaleTextArray[index]}}
|
||||
@@ -76,11 +76,11 @@
|
||||
>
|
||||
<block wx:if="{{isScale}}">
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__scale-item', [['active', dotTopValue[1] >= item && item >= dotTopValue[0]], ['disabled', disabled], theme, ['hidden', index == 0 || index == scaleArray.length - 1 || value == item]])}}"
|
||||
class="{{_.cls(classPrefix + '__scale-item', [['active', dotTopValue[1] >= item.val && item.val >= dotTopValue[0]], ['disabled', disabled], theme, ['hidden', (index == 0 || index == scaleArray.length - 1) && theme == 'capsule' || value == item.val]])}}"
|
||||
wx:for="{{scaleArray}}"
|
||||
wx:for-index="index"
|
||||
wx:key="index"
|
||||
style="left: {{item}}%;transform: translateX({{- item}}%); {{t.getColor(disabled, (dotTopValue[1] >= item && item >= dotTopValue[0]), disabledColor, colors)}}"
|
||||
style="left: {{item.left}}px; transform: translateX(-50%); {{t.getColor(disabled, (dotTopValue[1] >= item.val && item.val >= dotTopValue[0]), disabledColor, colors)}}"
|
||||
>
|
||||
<view wx:if="{{scaleTextArray.length}}" class="{{_.cls(classPrefix + '__scale-desc', [theme])}}"
|
||||
>{{scaleTextArray[index]}}</view
|
||||
|
||||
@@ -3,7 +3,7 @@ export interface TdSliderProps {
|
||||
type: ArrayConstructor;
|
||||
value?: Array<string>;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user