07- Vue3 UI Framework - Switch 组件

为了更好的提升用户体验，我们这里再做一个很常用的开关组件 switch

返回阅读列表点击

需求分析

开始之前我们先做一个简单的需求分析

1. switch 组件应分为选中/未被选中，两种状态
2. 可以通过点击变更选中状态
3. 不同的选中状态有不同的颜色，且有滑块处于不同的端
4. 可以指定不同的尺寸
5. 可以自定义颜色
6. 可以设置为禁用

那么可以整理出以下参数表格

骨架

这里我们可以参考 button 组件，因为 switch 组件具有和 button 组件一样的”点击”之功能，所以这里可以直接使用 button 标签来实现，然后再用一个 div 来充当滑块，很容易得到如下骨架：

功能

首先，我们再在 Typescript 中声明一些需求分析中的属性：

declare const props: {
  value: boolean;
  size?: "middle" | "small" | "large";
  color: string;
  disabled: boolean;
};
declare const context: SetupContext;

然后，再在 export default 中写入声明的参数：

export default {
  install: function (Vue) {
    Vue.component(this.name, this);
  },
  name: "JeremySwitch",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "middle",
    },
    color: {
      type: String,
      default: "#8c6fef",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};

最后，再补全 setup 方法：

  setup(props, context) {
    const toggle = () => {
      context.emit("update:value", !props.value);
    };
    return { toggle };
  },

样式表

补全层叠样式表：

测试

创建一个测试页，导入 JeremySwitch 组件，看一下效果：

项目地址 ??

GitHub: https://github.com/JeremyWu917/jeremy-ui

官网地址 ??

JeremyUI: https://ui.jeremywu.top

感谢阅读 ?