# VUE3封装教程

**Repository Path**: xiaole9924/vue3-encapsulation-tutorial

## Basic Information

- **Project Name**: VUE3封装教程
- **Description**: 🍺 持续更新，vue3组件封装
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-01-17
- **Last Updated**: 2023-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: element-plus, vue3, TypeScript, vite2

## README

```
欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，本文纯手打 [小乐] 专权。
持续更新中...
```

# 开发指南 


基于 `vue3` + `vite` + `element-plus` 二次封装
#### 项目特点
- 封装伸缩菜单-抽离头部和侧边栏组件
- 封装省市区-巧用watch来达到三级联动
- 封装趋势标记-计算属性的妙用实现文字颜色
- 封装通知菜单-icon和badge组件的组合使用
- 封装导航菜单-使用tsx实现无限层级菜单
- 封装进度条-完成进度条动态加载效果
- 封装时间组件
- 封装城市选择组件
- 封装表单组件
- 封装表格组件
- 封装日历组件

## 搭建 `vite` 项目并配合路由和 `element-plus`

#### 构建 `vite` + `vue` 模板

```bash
# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

```

#### 安装  `router` + `element-plus`

```bash
cnpm i -S vue-router@next element-plus

```

#### 路由基本配置

```typescript
import { createRouter , createWebHashHistory, RouteRecordRaw } from "vue-router"

// 静态路由
export const constantRoutes: Array<RouteRecordRaw> = [
    {
        path: "/",
        component: () => import("../views/home.vue")
    }
]

// 异步路由
export const asyncRoutes: Array<RouteRecordRaw> = [];


const router = createRouter({
    history: createWebHashHistory(),
    routes: constantRoutes
})

export default router

```

#### layout 布局组件 基本布局

```vue
<template>
  <el-container>
    <el-aside width="auto">
      <nav-side :collapse="isCollapse"></nav-side>
    </el-aside>
    <el-container>
      <el-header>
        <nav-header v-model:collapse="isCollapse"></nav-header>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import NavHeader from './navHeader/index.vue'
import NavSide from './navSide/index.vue'

let isCollapse = ref(false)


</script>

<style lang='scss' scoped>
.el-header {
  padding: 0;
  border-bottom: 1px solid #eee;
}
</style>
```
#### layout视图
![输入图片说明](%E5%9F%BA%E6%9C%AC%E5%B8%83%E5%B1%80.png)

## 省市区联动组件

#### 视图
![输入图片说明](%E7%9C%81%E5%B8%82%E5%8C%BA.png)

#### 组件内容
```vue
<template>
  <div>
    <el-select clearable placeholder="请选择省份" v-model="province">
      <el-option v-for="item in areas" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
    <el-select
      clearable
      :disabled="!province"
      style="margin: 0 10px;"
      placeholder="请选择城市"
      v-model="city"
    >
      <el-option v-for="item in selectCity" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
    <el-select clearable :disabled="!province || !city" placeholder="请选择区域" v-model="area">
      <el-option v-for="item in selectArea" :key="item.code" :value="item.code" :label="item.name"></el-option>
    </el-select>
  </div>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import allAreas from '../lib/pca-code.json'

export interface AreaItem {
  name: string,
  code: string,
  children?: AreaItem[]
}

export interface Data {
  name: string,
  code: string
}

// 下拉框选择省份的值
let province = ref<string>('')
// 下拉框选择城市的值
let city = ref<string>('')
// 下拉框选择区域的值
let area = ref<string>('')
// 所有的省市区数据
let areas = ref(allAreas)

// 城市下拉框的所有的值
let selectCity = ref<AreaItem[]>([])

// 区域下拉框的所有的值
let selectArea = ref<AreaItem[]>([])

// 分发事件给父组件
let emits = defineEmits(['change'])

// 监听选择省份
watch(() => province.value, val => {
  if (val) {
    let cities = areas.value.find(item => item.code === province.value)!.children!
    selectCity.value = cities
  }
  city.value = ''
  area.value = ''
})
// 监听选择城市
watch(() => city.value, val => {
  if (val) {
    let area = selectCity.value.find(item => item.code === city.value)!.children!
    selectArea.value = area
  }
  area.value = ''
})

// 监听选择区域
watch(() => area.value, val => {
  if (val) {
    let provinceData: Data = {
      code: province.value,
      name: province.value && allAreas.find(item => item.code === province.value)!.name
    }
    let cityData: Data = {
      code: city.value,
      name: city.value && selectCity.value.find(item => item.code === city.value)!.name
    }
    let areaData: Data = {
      code: val,
      name: val && selectArea.value.find(item => item.code === val)!.name
    }
    emits('change', {
      province: provinceData,
      city: cityData,
      area: areaData
    })
  }

})

</script>


```
#### 调用方法
``` vue
<template>
  <m-choose-area @change="changeArea"></m-choose-area>
</template>

<script lang='ts' setup>
let changeArea = (val: any) => {
  console.log(val)
}
</script>
```

## 趋势组件
#### 视图
![输入图片说明](%E8%B6%8B%E5%8A%BF.png)

#### 组件内容
```vue
<template>
  <div class="trend">
    <div class="text" :style="{ color: textColor }">
      <slot v-if="slots.default"></slot>
      <div v-else>{{ text }}</div>
    </div>
    <div class="icon">
      <component
        :is="`el-icon-${toLine(upIcon)}`"
        :style="{ color: !reverseColor ? upIconColor : '#52c41a' }"
        v-if="type === 'up'"
      ></component>
      <component
        :is="`el-icon-${toLine(downIcon)}`"
        :style="{ color: !reverseColor ? downIconColor : '#f5222d' }"
        v-else
      ></component>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { useSlots, computed } from 'vue'
import { toLine } from '../../../utils'
let props = defineProps({
  // 标记当前趋势是上升(up)还是下降(down)
  type: {
    type: String,
    default: 'up'
  },
  // 上升趋势显示的图标
  upIcon: {
    type: String,
    default: 'ArrowUp'
  },
  // 下降趋势显示的图标
  downIcon: {
    type: String,
    default: 'ArrowDown'
  },
  // 趋势显示的文字
  // 1. 父组件传递过来的数据
  // 2. 插槽
  text: {
    type: String,
    default: '文字'
  },
  // 颜色翻转只在默认的颜色下生效 如果使用了自定义颜色 这个属性就不生效了
  reverseColor: {
    type: Boolean,
    default: false
  },
  // 上升趋势图标颜色
  upIconColor: {
    type: String,
    default: '#f5222d'
  },
  // 下降趋势的图标颜色
  downIconColor: {
    type: String,
    default: '#52c41a'
  },
  // 上升趋势文字颜色
  upTextColor: {
    type: String,
    default: 'rgb(0,0,0)'
  },
  // 下降趋势的文字颜色
  downTextColor: {
    type: String,
    default: 'rgb(0,0,0)'
  }
})
// 获取插槽内容
let slots = useSlots()

// 文字颜色
let textColor = computed(() => {
  return props.type === 'up' ? props.upTextColor : props.downTextColor
})

</script>

```
#### 调用方法
``` vue

# 调用方法
<template>
  <div>
    <el-divider>正常趋势</el-divider>
    <div class="flex">
      <div>
        <m-trend text="营业额"></m-trend>
      </div>
      <div>
        <m-trend text="销售额" type="down"></m-trend>
      </div>
    </div>
        <br />
    <el-divider>颜色翻转</el-divider>
    <div class="flex">
    <div><m-trend text="销售额" reverseColor></m-trend></div>
    <div><m-trend text="营业额" type="down" reverseColor></m-trend></div>
    </div>
    <br />
    <el-divider>自定义图标颜色</el-divider>
    <div class="flex">
      <div>
        <m-trend text="营业额" upIconColor="blue"></m-trend>
      </div>
      <div>
        <m-trend text="销售额" type="down" downIconColor="#123456"></m-trend>
      </div>
    </div>

    <br />
    <el-divider>自定义文字颜色</el-divider>
    <div class="flex">
    <div><m-trend text="营业额" upTextColor="blue"></m-trend></div>
    <div><m-trend text="销售额" type="down" downTextColor="yellow"></m-trend></div>
    </div>
    <br />
    <el-divider>自定义图标</el-divider>
    <div class="flex">
    <div><m-trend upIcon="CaretTop">营业额</m-trend></div>
    <div><m-trend type="down" downIcon="CaretBottom">销售额</m-trend></div>
  </div>
   </div>
</template>
```

## 通知菜单组件

#### 视图
![输入图片说明](%E9%80%9A%E7%9F%A5%E8%8F%9C%E5%8D%95.png)
#### 组件内容
```vue
<template>
  <el-popover popper-class="notification-popper-class" placement="bottom" :width="300" trigger="click">
    <template #default>
      <slot></slot>
    </template>
    <template #reference>
      <el-badge style="cursor: pointer;" :value="value" :max="max" :is-dot="isDot">
        <component :is="`el-icon-${toLine(icon)}`"></component>
      </el-badge>
    </template>
  </el-popover>
</template>

<script lang='ts' setup>
import { toLine } from '../../../utils'
let props = defineProps({
  // 显示的图标
  icon: {
    type: String,
    default: 'Bell'
  },
  // 通知数量
  value: {
    type: [String, Number],
    default: ''
  },
  // 最大值
  max: {
    type: Number
  },
  // 是否显示小圆点
  isDot: {
    type: Boolean,
    default: false
  },
})
</script>F
```

#### 调用方法
```vue
<template>
  <div>
    <m-notification :value="50">
      <template #default>
        <m-list @clickItem="clickItem" @clickAction="clickAction" :list="list" :actions="actions"></m-list>
      </template>
    </m-notification>
  </div>
</template>

<script lang='ts' setup>
import { list, actions } from './data'

let clickItem = (val: any) => {
  console.log(val)
}
let clickAction = (val: any) => {
  console.log(val)
}
</script>
```


## 表单组件

#### 视图

#### 组件内容
#### 调用方法

## 表格组件

#### 视图
![输入图片说明](%E8%A1%A8%E6%A0%BC.png)
#### 组件内容
#### 调用方法