Tui基础组件文档库

# Switch 开关 组件

# 基本用法

绑定v-model到一个Boolean类型的变量。
可以使用active-color属性与inactive-color属性来设置开关的背景色。

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      value: true
    }
  }
}
</script>
显示代码

# 文字描述

按月付费
按月付费

使用active-text属性与inactive-text属性来设置开关的文字描述。

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-switch v-model="value" active-text="按月付费" inactive-text="按年付费" />
    </t-layout-page-item>
    <t-layout-page-item>
      <t-switch
        v-model="value1"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="按月付费"
        inactive-text="按年付费"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      value: true,
      value1: true
    }
  }
}
</script>
显示代码

# 内部文字描述

按月付费
按月付费

设置inlinePrompt使active-text属性与inactive-text属性来设置开关的文字描述并其文字在开关内部。

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-switch v-model="value" :width="120" inlinePrompt active-text="按月付费" inactive-text="按年付费" />
    </t-layout-page-item>
    <t-layout-page-item>
      <t-switch
        v-model="value1"
        inlinePrompt
        :width="120"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="按月付费"
        inactive-text="按年付费"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      value: true,
      value1: true
    }
  }
}
</script>
显示代码

# 扩展的 value 类型

设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

<template>
  <t-layout-page>
    <t-layout-page-item>
      <el-tooltip :content="'Switch value: ' + value" placement="top">
        <t-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="100"
          inactive-value="0"
        ></t-switch>
      </el-tooltip>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      value: '100'
    }
  }
}
</script>
显示代码

# 禁用状态

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-switch v-model="value" disabled />
    </t-layout-page-item>
    <t-layout-page-item>
      <t-switch v-model="value1" disabled />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      value: true,
      value1: false
    }
  }
}
</script>
显示代码

# t-switch 开关组件

<t-switch
  v-model="selectVlaue"
/>

# 配置参数继承 el-switch Attributes/event

参数 说明 类型 默认值
inlinePrompt 文字描述组件内部显示 Boolean false

← 单选 →