zx-ui

switch

<template>
  <div class="switch">
    <div class="box" style="margin-bottom: 10px;">
      <zx-switch v-model='values' @change="changevalue(values)" active-text="开" inactive-text="关"></zx-switch>
    </div>
    <div class="box">
      <zx-switch v-model='value' @change="changevalue(value)" active-color="#019dfa" inactive-color="#a3b5bf"></zx-switch>
    </div>
    <div class="box">
      <zx-switch v-model='value1' @change="changevalue(value1)" active-color="#009688" inactive-color="#e9eaea" active-text="hello"
        inactive-text="world"></zx-switch>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        values: true,
        value: false,
        value1: false
      };
    },
    methods: {
      changevalue(values) {
        console.log(values);
      }
    },
    created() {
    }
  };
</script>
<style scoped lang="scss">
  .switch {
    padding: 1rem;
  }
</style>

zx-switch Attributes

参数说明类型可选值默认值
value值string,number-必填
active-text打开时的文字描述string-空
inactive-text关闭时的文字描述string-空
active-color打开时的背景色string-#019dfa
inactive-color关闭时的背景色string-#ffffff

zx-switch Events

事件名称说明回调参数
changechange事件回调event

← cell →