vue-slider-component
Version:
A highly customized slider component
80 lines • 2.63 kB
JSX
import { __decorate } from "tslib";
import { Component, Prop, Vue } from 'vue-property-decorator';
import './styles/mark.scss';
let VueSlideMark = /** @class */ (() => {
let VueSlideMark = class VueSlideMark extends Vue {
get marksClasses() {
return [
'vue-slider-mark',
{
'vue-slider-mark-active': this.mark.active,
},
];
}
get stepClasses() {
return [
'vue-slider-mark-step',
{
'vue-slider-mark-step-active': this.mark.active,
},
];
}
get labelClasses() {
return [
'vue-slider-mark-label',
{
'vue-slider-mark-label-active': this.mark.active,
},
];
}
labelClickHandle(e) {
e.stopPropagation();
this.$emit('pressLabel', this.mark.pos);
}
render() {
const mark = this.mark;
return (<div class={this.marksClasses}>
{this.$slots.step || (<div class={this.stepClasses} style={[
this.stepStyle || {},
mark.style || {},
mark.active ? this.stepActiveStyle || {} : {},
mark.active ? mark.activeStyle || {} : {},
]}/>)}
{!this.hideLabel
? this.$slots.label || (<div class={this.labelClasses} style={[
this.labelStyle || {},
mark.labelStyle || {},
mark.active ? this.labelActiveStyle || {} : {},
mark.active ? mark.labelActiveStyle || {} : {},
]} onClick={this.labelClickHandle}>
{mark.label}
</div>)
: null}
</div>);
}
};
__decorate([
Prop({ required: true })
], VueSlideMark.prototype, "mark", void 0);
__decorate([
Prop(Boolean)
], VueSlideMark.prototype, "hideLabel", void 0);
__decorate([
Prop()
], VueSlideMark.prototype, "stepStyle", void 0);
__decorate([
Prop()
], VueSlideMark.prototype, "stepActiveStyle", void 0);
__decorate([
Prop()
], VueSlideMark.prototype, "labelStyle", void 0);
__decorate([
Prop()
], VueSlideMark.prototype, "labelActiveStyle", void 0);
VueSlideMark = __decorate([
Component({ name: 'VueSlideMark' })
], VueSlideMark);
return VueSlideMark;
})();
export default VueSlideMark;
//# sourceMappingURL=vue-slider-mark.jsx.map