Button 组件

[yym-yumeng123]

在开发一个组件之前, 就使用vue-cli 脚手架, 创建一个目录, 搭建我们写组件所需要的环境

从空目录开始一个新的项目, 在 github 上创建项目

1. 创建仓库
   • 是否需要和别人合作, 创建一个 git 仓库
   • 创建一个 README.md, 说明项目用来干什么
   • git init 初始化当前仓库
2. 创建一个 LICENSE
   • 根据你需要的, 选择适合你的LICENSE, 我选择的是MIT
3. 使用什么第三方的工具: npm yarn
   • npm init (-y)
4. 使用什么底层代码: Vue, React, JS
   • Vue

使用脚手架

npm install -g @vue/cli

vue create hello-world

上面我们就使用 Vue 创建一个脚手架, 可以写我们的组件开源库代码, 使用的技术栈

• Vue
• Scss

Button用例图

---

1. 根据用例图, 完成我们的Button 组件基本样式

• 设置一下 css 初始化

*{margin: 0;padding: 0;}
*, *::after, *::before{box-sizing: border-box;}

• 设置一个全局的 scss 变量

// style/var.scss

$font-size: 14px;
$button-height: 32px;
$border-bg: #fff;
$button-active-bg: #eee;
$border-radius: 4px;
$border-color: #999;
$border-color-light: lighten($border-color, 30%);
$border-color-hover: #666;

• 在 src 下创建 Button 文件夹, 我们在里面创建 button.vue

// src/button/button.vue
<template>
  <button class="y-button">
    你好
  </button>
</template>

<script>
  export default {
    name: 'ElementButton'
  }
</script>

• 使用组件的 App.vue

<template>
  <div id="app">
    <y-button />
  </div>
</template>

<script>
import YButton from './button/button.vue'
export default {
  name: "App",
  components: {
    YButton
  }
};
</script>

在线查看Button组件基本样式

---

2. 带有 icon 的 Button 组件

• 添加 icon, 使用阿里的 iconfont 选择自己需要使用的 icon, symbol引用, 把生成的代码放到本地的 svg.js

传递一个 props 给到子组件 icon

<template>
  <button class="y-button">
    // icon 属性是否存在
    <svg class="y-icon" v-if="icon">
      <use :xlink:href="`#i-${icon}`"></use>
    </svg>
    <slot></slot>
  </button>
</template>

<script>
import "../svg/svg";
export default {
  name: "ElementButton",
  props: {
    icon: String
  }
};
</script>

<template>
  <div id="app">
    // 使用
    <y-button icon="download">点击按钮</y-button>
    <y-button>点击按钮</y-button>
  </div>
</template>

在线查看传 icon props的 Button

---

未完待续...