白色主题

This commit is contained in:
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions

View File

@@ -3,7 +3,7 @@ const props = {
type: Array,
value: [],
},
customStyle: {
style: {
type: String,
value: '',
},

View File

@@ -33,6 +33,7 @@ export default class Slider extends SuperComponent {
marks(val: any): void;
};
lifetimes: {
created(): void;
attached(): void;
};
triggerValue(value?: SliderValue): void;

View File

@@ -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({

View File

@@ -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

View File

@@ -3,7 +3,7 @@ export interface TdSliderProps {
type: ArrayConstructor;
value?: Array<string>;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};