ButtonGroup组件

初始工作

• (1) 新建pages/chooseButtonGroup/index.vue

<template>
  <div>
    按扭组合
    <div style="width: 100%; height: 15px"></div>
    <YButtonGroup></YButtonGroup>
    <div style="width: 100%; height: 15px"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

• (2) 写入路由chooseButtonGroup

// 写一个vue-router 入口文件
import { createRouter, createWebHistory } from "vue-router";
import ChooseButtonPage from "../pages/chooseButton/index.vue";
import ChooseButtonGroupPage from "../pages/chooseButtonGroup/index.vue";
//
const routes = [
  {
    path: "/chooseButton",
    name: "chooseButton",
    component: ChooseButtonPage,
    meta: { title: "按钮" }, // 可以在 meta 中存放自定义信息，如页面标题
  },
  {
    path: "/chooseButtonGroup",
    name: "chooseButtonGroup",
    component: ChooseButtonGroupPage,
    meta: { title: "按钮组合" }, // 可以在 meta 中存放自定义信息，如页面标题
  },
];

// 创建 router 实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 使用 HTML5 模式
  routes,
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  document.title = `${to.meta.title || "默认标题"} - 我的网站`;

  // 这里可以添加登录验证逻辑
  // const isAuthenticated = checkAuth()
  // if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // else next()

  next();
});

// 全局后置钩子
router.afterEach(() => {
  // 完成导航后的逻辑，例如页面滚动到顶部
  window.scrollTo(0, 0);
});

export default router;

• (3) 新建components/chooseButtonGroup/src/index.vue

<template>
  <div :class="[ns.b()]">按扭组合555-{{ message }}</div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useButtonGroup, useNamespace } from "../../../hooks/index";

const ns = useNamespace("button-group");

const { message } = useButtonGroup();

onMounted(() => {
  console.log("useNameSpace", ns.b());
});
</script>

<style scoped lang="scss"></style>

• (4) 新建components/chooseButtonGroup/index.ts

import { type App } from "vue";
import YButtonGroup from "./src/index.vue";

// 让这个组件可以通过use的形式使用
export default {
  install(app: App) {
    app.component("YButtonGroup", YButtonGroup);
  },
};

• (5) components/index.ts

import { type App } from "vue";
import YButton from "./chooseButton";
import YButtonGroup from "./chooseButtonGroup";
const components = [YButton, YButtonGroup];

export default {
  install(app: App) {
    components.map((item) => {
      app.use(item);
    });
  },
};

• (6) 新建hooks/chooseButtonGroup/index.ts

import { ref } from "vue";

export const useButtonGroup = () => {
  const message = ref("按钮组");

  return {
    message,
  };
};

• (7) 新建styles/chooseButtonGroup/chooseButtonGroup.scss

// 先写个注释

• (8) styles/index.scss

@use "./common/common.scss";
@use "./common/iconfont.scss";
@use "./common/isLoading.scss";
@use "./chooseButton/chooseButton.scss";
@use "./chooseButtonGroup/chooseButtonGroup.scss";

组件开始

按钮组合

• src/components/chooseButtonGroup/src/index.vue

<template>
  <div :class="[ns.b(), ns.m('size', props.size)]">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { onMounted, provide, toRefs } from "vue";
import { useNamespace } from "../../../hooks/index";

const ns = useNamespace("button-group");

const props = defineProps({
  size: {
    type: String,
    default: "",
  },
});

// 传递给button 这样的话 以buttonGroup为根的button就可以拿到这个值了
provide("buttonGroupKey", { ...toRefs(props) });

onMounted(() => {
  console.log("useNameSpace", ns.b());
});
</script>

<style scoped lang="scss"></style>

css

styles/chooseButtonGroup/chooseButtonGroup.scss

.Y-button-group {
  .Y-button:first-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .Y-button:last-child {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }
  .Y-button:not(:first-child):not(:last-child) {
    border-radius: 0px;
  }
  .Y-button + .Y-button {
    margin-left: -2px;
  }
}

页面调用

<template>
  <div>
    按扭组合
    <div style="width: 100%; height: 15px"></div>
    <YButtonGroup></YButtonGroup>
    <div style="width: 100%; height: 15px"></div>
    <YButtonGroup size="small">
      <YButton type="primary">按钮1</YButton>
      <YButton type="danger">按钮2</YButton>
      <YButton type="primary" size="large">按钮1</YButton>
      <YButton type="primary">按钮1</YButton>
      <YButton type="success">按钮3</YButton>
    </YButtonGroup>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>