Switch 开关

特性

1. 使用 v-model 绑定选中标签的值
2. 传入 info 即可渲染组件
3. 可以通过 v-for 批量渲染，支持 sort 序号显示
4. 支持 slot 显示备注信息
5. 基于 vue2 版本封装，强依赖于 element-ui
6. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

基本用法

绑定 v-model 记录开关的值，传入记录开关信息的 info

可以通过 change 事件监听开关值的变化

当前开关的值：2

<template>
  <div>
    <niuka-switch v-model="value" :info="info" @change="handleChange">
    </niuka-switch>
    当前开关的值：{{ value }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '2',
      info: {
        label: '开关label',
        activeValue: '1',
        inactiveValue: '2',
      },
    };
  },
  methods: {
    handleChange(value) {
      this.$message.info(`当前开关的值是：${value}`);
    },
  },
};
</script>

隐藏源代码

备注插槽

通过组件 showRemark 属性和 remark 插槽可以实现自定义的备注信息

通过组件 userEdit 属性可以在备注信息后显示编辑图片，通过 edit 事件自行处理后续逻辑

<template>
  <div>
    <niuka-switch
      v-model="value"
      :info="info"
      showRemark
      userEdit
      @edit="handleChange"
    >
      <template slot="remark"> 这是 remark 插槽中的值 </template>
    </niuka-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '2',
      info: {
        label: '开关label',
        activeValue: '1',
        inactiveValue: '2',
      },
    };
  },
  methods: {
    handleChange() {
        console.log(123);
      this.$message.info('点击了开关中的编辑按钮');
    },
  },
};
</script>

隐藏源代码

显示序号

通过组件 showSort 属性和 info 中设置序号字段，可以在左上角显示序号

<template>
  <div>
    <niuka-switch v-model="value" :info="info" showRemark userEdit showSort>
      <template slot="remark"> 这是 remark 插槽中的值 </template>
    </niuka-switch>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '2',
      info: {
        label: '开关label',
        activeValue: '1',
        inactiveValue: '2',
        sort: 1,
      },
    };
  },
};
</script>

隐藏源代码

NiukaSwitch Attributes

NiukaSwitch Events

NiukaSwitch Slots

Info Attributes