vue-material/src/components/mdButtonToggle/mdButtonToggle.vue

52 lines
1.2 KiB
Vue
Raw Normal View History

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: {
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 = () => {
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>