2018-11-25 03:38:06 +00:00
|
|
|
<template lang="html">
|
|
|
|
<span class="toggle-switch">
|
2018-11-25 03:47:57 +00:00
|
|
|
<p v-if="label">{{ label }}</p>
|
|
|
|
|
2018-11-25 03:38:06 +00:00
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
:id="id"
|
|
|
|
v-model="localValue"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<label :for="id" />
|
|
|
|
</span>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
value: Boolean,
|
|
|
|
id: String,
|
2018-11-25 03:47:57 +00:00
|
|
|
label: String,
|
2018-11-25 03:38:06 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
localValue: null,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
watch: {
|
|
|
|
value(value) {
|
|
|
|
if (value) {
|
|
|
|
this.localValue = JSON.parse(JSON.stringify(this.value));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
localValue(value) {
|
|
|
|
this.$emit('input', value);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
2019-04-05 19:16:32 +00:00
|
|
|
@import "~styles/styles.scss";
|
2018-11-25 03:38:06 +00:00
|
|
|
|
|
|
|
.toggle-switch {
|
|
|
|
display: inline-flex;
|
|
|
|
|
2018-11-25 03:47:57 +00:00
|
|
|
p {
|
|
|
|
margin: 0;
|
|
|
|
font-size: 12px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2018-11-25 03:38:06 +00:00
|
|
|
input[type=checkbox]{
|
|
|
|
height: 0;
|
|
|
|
width: 0;
|
|
|
|
visibility: hidden;
|
|
|
|
|
|
|
|
&:checked + label {
|
|
|
|
background: $color-green;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:checked + label:after {
|
|
|
|
left: calc(100% - 3px);
|
|
|
|
transform: translateX(-100%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
label {
|
|
|
|
cursor: pointer;
|
|
|
|
text-indent: -9999px;
|
|
|
|
width: 34px;
|
|
|
|
height: 20px;
|
|
|
|
background: grey;
|
|
|
|
display: block;
|
|
|
|
border-radius: 100px;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
top: 3px;
|
|
|
|
left: 3px;
|
|
|
|
width: 14px;
|
|
|
|
height: 14px;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 90px;
|
|
|
|
transition: 0.3s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|