开关

基础开关

<template>
  <div class="demo-switch-row">
    <t-switch size="large"></t-switch>
  </div>
</template>

<script>

export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    onChange(val) {
      console.log(val);
    },
  },
};
</script>

显示代码 复制代码 复制代码

带描述开关

开

开

开

关

<template>
  <div class="demo-switch-column">
    <div class="demo-switch-row" v-if="false">
      <t-switch size="large" v-model="slotChecked">
        <template v-slot:label="slotProps">{{slotProps.value?'开':'关'}}</template>
      </t-switch>
      <t-switch size="large">
        <template v-slot:label="slotProps">
          <template v-if="slotProps.value">
            <check-icon />
          </template>
          <template v-else>
            <close-icon />
          </template>
        </template>
      </t-switch>
    </div>

    <div class="demo-switch-row">
        <t-switch size="small" v-model="checked" :label="['开', '关']"></t-switch>
        <t-switch v-model="checked" :label="['开', '关']"></t-switch>
        <t-switch size="large" v-model="checked" :label="['开', '关']"></t-switch>
        <t-switch size="large" :label="['开', '关']"></t-switch>
    </div>

    <!-- <div class="tdesign-demo-block-row">
      <t-switch size="large" v-model="renderChecked" :label="[renderActiveContent, renderInactiveContent]"></t-switch>
      <t-switch size="large" :label="[renderActiveContent, renderInactiveContent]"></t-switch>
    </div> -->

    <!-- <div class="tdesign-demo-block-row">
      <t-switch size="large" v-model="renderChecked2" :label="renderContent"></t-switch>
      <t-switch size="large" :label="renderContent"></t-switch>
    </div> -->
  </div>
</template>
<script>

// import { CloseIcon, CheckIcon } from 'tdesign-icons-vue';

export default {
//   components: { CloseIcon, CheckIcon },
  data() {
    return {
      checked: true,
      renderChecked: true,
      renderChecked2: true,
      slotChecked: true,
    };
  },
  methods: {
    onChange(val) {
      console.log(val);
    },
    // renderActiveContent() {
    //   return (`<i class="care-icon-more"></i>`);
    // },
    // renderInactiveContent() {
    //   return (<CloseIcon />);
    // },
    // renderContent(h, data) {
    //   return data.value ? (<CheckIcon />) : (<CloseIcon />);
    // },
  },
};
</script>

显示代码 复制代码 复制代码

不同状态的开关

<template>
  <div class="demo-switch-row">
    <t-switch size="large" v-model="checked1"></t-switch>
    <t-switch size="small" loading v-model="checked2"></t-switch>
    <t-switch loading v-model="checked2"></t-switch>
    <t-switch size="large" loading v-model="checked3"></t-switch>
    <t-switch size="large" disabled></t-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked1: true,
      checked2: false,
      checked3: true
    };
  },
};
</script>

显示代码 复制代码 复制代码

不同大小开关

<template>
  <div class="demo-switch-row">
    <t-switch size="small"></t-switch>
    <t-switch></t-switch>
    <t-switch size="large"></t-switch>
  </div>
</template>

<script>

export default {
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    onChange(val) {
      console.log(val);
    },
  },
};
</script>

显示代码 复制代码 复制代码