| | |
|---|
| | | <div class="switch-bar">
|
|---|
| | | <div class="name">{{ barName }}</div>
|
|---|
| | | <el-switch
|
|---|
| | | v-model="value"
|
|---|
| | | v-model="barValue"
|
|---|
| | | active-color="var(--colorCard)"
|
|---|
| | | :width="30"
|
|---|
| | | @change="switchChange"
|
|---|
| | |
|---|
| | |
|
|---|
| | | <script>
|
|---|
| | | export default {
|
|---|
| | | name: "switchBar",
|
|---|
| | | props: ["barName", "value"],
|
|---|
| | | methods: {
|
|---|
| | | switchChange(val) {
|
|---|
| | | this.$emit("switchChange", val);
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | barValue: {
|
|---|
| | | get() {
|
|---|
| | | return this.value;
|
|---|
| | | },
|
|---|
| | | set(newValue) {
|
|---|
| | | return newValue;
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | },
|
|---|
| | | };
|
|---|
| | |
|---|
| | | height: 50px;
|
|---|
| | | padding: 0 25px;
|
|---|
| | | justify-content: space-between;
|
|---|
| | | border-radius: 8px;
|
|---|
| | | border-radius: 8px;
|
|---|
| | |
|
|---|
| | | margin-bottom: 4px;
|
|---|
| | | .el-switch.is-checked .el-switch__core::after {
|
|---|
