QinUi

# Switch 开关

统一封装

# 基础用法

<template>
  <div>
    <qinui-text :content="`当前选中: ${value1}`" />
    <qinui-space>
      <qinui-switch v-model="value1" @change="onChange"></qinui-switch>
      <qinui-switch v-model="value2"></qinui-switch>
    </qinui-space>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value1: 2,
        value2: 1,
      };
    },
    methods: {
      onChange(e) {
        console.log('change', e);
      },
    },
  };
</script>

# 加载中

设置 :loading="true"

<template>
  <qinui-switch v-model="value3" :loading="true"></qinui-switch>
</template>

# 禁用状态

设置 :disabled="true"

<template>
  <qinui-switch v-model="value3" :disabled="true"></qinui-switch>
</template>

# 异步控制

设置 :before="onBefore"

<template>
  <qinui-switch v-model="value" :before="onBefore"></qinui-switch>
</template>

<script>
  export default {
    data() {
      return {
        value: 1,
      };
    },
    methods: {
      onBefore(e) {
        return new Promise((resolve) => {
          qin.showModal({
            content: e ? '确定要打开吗' : '确定要关闭吗',
            success: (res) => {
              resolve(res.confirm);
            },
          });
        });
      },
    },
  };
</script>

# API

# Props

参数 说明 类型 默认值 可选值
modelValue (v-model) 选中的值 String | NUmber 2 -
loading 是否加载中 Boolean false -
disabled 是否禁用 Boolean false -
yesValue 打开提交给接口的值 Boolean | Number | String 1 -
noValue 关闭提交给接口的值 Boolean | Number | String 2 -
before 改变状态之前触发的方法 Function - -
diyStyle 自定义外部样式，如：设置边框等样式 String - -

# Events

事件名 说明 回调参数
@change 改变状态触发 -

← Tabbar 底部导航栏 →