2016-07-18 16:00:51 +00:00
|
|
|
<template>
|
2016-12-12 23:38:05 +00:00
|
|
|
<div class="md-button-toggle" :class="[themeClass]" >
|
2016-07-18 16:00:51 +00:00
|
|
|
<slot></slot>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" src="./mdButtonToggle.scss"></style>
|
|
|
|
|
|
|
|
|
|
<script>
|
2016-12-12 23:38:05 +00:00
|
|
|
import theme from '../../core/components/mdTheme/mixin';
|
|
|
|
|
|
2016-07-18 16:00:51 +00:00
|
|
|
let onClickButton;
|
|
|
|
|
|
|
|
|
|
export default {
|
2016-07-18 20:05:08 +00:00
|
|
|
props: {
|
2016-11-24 22:24:15 +00:00
|
|
|
mdSingle: Boolean
|
2016-07-18 20:05:08 +00:00
|
|
|
},
|
2016-12-12 23:38:05 +00:00
|
|
|
mixins: [theme],
|
2016-08-31 22:20:23 +00:00
|
|
|
mounted() {
|
2016-07-18 16:00:51 +00:00
|
|
|
this.$children.forEach((child) => {
|
|
|
|
|
let element = child.$el;
|
2016-07-22 22:40:17 +00:00
|
|
|
let toggleClass = 'md-toggle';
|
2016-07-18 16:00:51 +00:00
|
|
|
|
2016-07-18 20:05:08 +00:00
|
|
|
onClickButton = () => {
|
2016-11-23 19:12:08 +00:00
|
|
|
if (this.mdSingle) {
|
2016-07-18 20:05:08 +00:00
|
|
|
this.$children.forEach((child) => {
|
2016-07-22 22:40:17 +00:00
|
|
|
child.$el.classList.remove(toggleClass);
|
2016-07-18 20:05:08 +00:00
|
|
|
});
|
|
|
|
|
|
2016-07-22 22:40:17 +00:00
|
|
|
element.classList.add(toggleClass);
|
2016-07-18 20:05:08 +00:00
|
|
|
} else {
|
2016-07-22 22:40:17 +00:00
|
|
|
element.classList.toggle(toggleClass);
|
2016-07-18 20:05:08 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (element && element.classList.contains('md-button')) {
|
|
|
|
|
element.addEventListener('click', onClickButton);
|
2016-07-18 16:00:51 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy() {
|
|
|
|
|
this.$children.forEach((child) => {
|
|
|
|
|
let element = child.$el;
|
|
|
|
|
|
|
|
|
|
if (element && element.classList.contains('md-button')) {
|
2016-07-20 04:42:04 +00:00
|
|
|
element.removeEventListener('click', onClickButton);
|
2016-07-18 16:00:51 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|