UNPKG

2.63 kBJSXView Raw
1import { __decorate } from "tslib";
2import { Component, Prop, Vue } from 'vue-property-decorator';
3import './styles/mark.scss';
4let VueSlideMark = /** @class */ (() => {
5 let VueSlideMark = class VueSlideMark extends Vue {
6 get marksClasses() {
7 return [
8 'vue-slider-mark',
9 {
10 'vue-slider-mark-active': this.mark.active,
11 },
12 ];
13 }
14 get stepClasses() {
15 return [
16 'vue-slider-mark-step',
17 {
18 'vue-slider-mark-step-active': this.mark.active,
19 },
20 ];
21 }
22 get labelClasses() {
23 return [
24 'vue-slider-mark-label',
25 {
26 'vue-slider-mark-label-active': this.mark.active,
27 },
28 ];
29 }
30 labelClickHandle(e) {
31 e.stopPropagation();
32 this.$emit('pressLabel', this.mark.pos);
33 }
34 render() {
35 const mark = this.mark;
36 return (<div class={this.marksClasses}>
37 {this.$slots.step || (<div class={this.stepClasses} style={[
38 this.stepStyle || {},
39 mark.style || {},
40 mark.active ? this.stepActiveStyle || {} : {},
41 mark.active ? mark.activeStyle || {} : {},
42 ]}/>)}
43 {!this.hideLabel
44 ? this.$slots.label || (<div class={this.labelClasses} style={[
45 this.labelStyle || {},
46 mark.labelStyle || {},
47 mark.active ? this.labelActiveStyle || {} : {},
48 mark.active ? mark.labelActiveStyle || {} : {},
49 ]} onClick={this.labelClickHandle}>
50 {mark.label}
51 </div>)
52 : null}
53 </div>);
54 }
55 };
56 __decorate([
57 Prop({ required: true })
58 ], VueSlideMark.prototype, "mark", void 0);
59 __decorate([
60 Prop(Boolean)
61 ], VueSlideMark.prototype, "hideLabel", void 0);
62 __decorate([
63 Prop()
64 ], VueSlideMark.prototype, "stepStyle", void 0);
65 __decorate([
66 Prop()
67 ], VueSlideMark.prototype, "stepActiveStyle", void 0);
68 __decorate([
69 Prop()
70 ], VueSlideMark.prototype, "labelStyle", void 0);
71 __decorate([
72 Prop()
73 ], VueSlideMark.prototype, "labelActiveStyle", void 0);
74 VueSlideMark = __decorate([
75 Component({ name: 'VueSlideMark' })
76 ], VueSlideMark);
77 return VueSlideMark;
78})();
79export default VueSlideMark;
80//# sourceMappingURL=vue-slider-mark.jsx.map
\No newline at end of file