2020-12-27

头条项目第三天

学习目标
1.完成登录页
2.完成注册页
3.slot插槽
4.Vant组件库
5.实现个人中心布局

组件封装

1.创建组件
2.导入组件
3.注册组件
4.使用组件

slot 插槽

插槽官方文档：https://cn.vuejs.org/v2/guide/components-slots.html
父组件的标签对内传HTML结构

<MyButton>注册</MyButton>
<MyButton>登录</MyButton>
<MyButton></MyButton>   // 这个没有传 HTML 结构，所以使用插槽的默认值

子组件通过接收传递过来HTML结构

<button> <slot>按钮</slot></button>

传递过来的html结构会替换大slot的位置，如果没有传递则使用slot的默认值

Vue Devtools 基本使用

Vue项目常用的四个调试面板

1.查看组件父传子属性很方便
2.更加直观的感受子传父数据是否正常传递
3.props-重要
4.data-重要
。router
$attrs

父组件的属性默认会添加到子组件的跟标签上。

父组件
<MyInput
    name="password"
    type="password"
    placeholder="密码"
    err_message="请输入6到18位的密码"
    :rule="/^[0-9A-Za-z_~!@#$%^&*()_+.]{6,18}$/"
    @aa="aaHandle"
/>

<input
    :class="{ success: state==='success', error: state==='fail' }"
    v-model="inputVal"
    @input="inputHandle"
    @change="checkVal"
  >

可以通过this.$attrs.name 可直接获取属性

通过调试工具查看$attrs

Vant UI 组件库

安装依赖

npm install vant

npm install babel-plugin-import

配置自动按需引入组件

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true,
      },
      'vant',
    ],
  ],
}

重启脚手架

注意：在vue项目中但凡修改过xxxxx.config.js的配置文件，修改过的配置文件的需要重启一下

按需导入组件并全局注册组件

新建 src\vant\index.js 文件

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

在 src\main.js 导入让全局注册组件的代码运行。

import './vant'

在任意一个 Vue 页面中使用。

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

Vant 轻提示组件

引入组件：https://vant-contrib.gitee.io/vant/#/zh-CN/toast#yin-ru

全局方法：https://vant-contrib.gitee.io/vant/#/zh-CN/toast#quan-ju-fang-fa

组件API：https://vant-contrib.gitee.io/vant/#/zh-CN/toast#api

按需导入

在 src\vant\index.js 文件中按需导入。

import { Toast } from 'vant'

Vue.use(Toast)

ue 组件内调用全局方法

引入Toast组件后，会自动在Vue的prototype上挂载$toast方法，便于在组件内调用（所有Vue组件都是vue的实例）把项目中的所有alert换成轻提示this.$toast

// 无图标文本轻提示
this.$toast('无图标文本提示');

// 成功图标轻提示
this.$toast.success('成功图标提示');

// 失败图标轻提示
this.$toast.fail('失败图标轻提示');

// 加载图标轻提示
this.$toast.loading('加载图标轻提示');

// 关闭轻提示
this.$toast.clear();

非 Vue 组件内用法

import { Toast } from 'vant'

// 无图标文本轻提示
Toast('无图标文本提示');

// 成功图标轻提示
Toast.success('成功图标提示');

// 失败图标轻提示
Toast.fail('失败图标轻提示');

// 加载图标轻提示
Toast.loading('加载图标轻提示');

// 关闭轻提示
Toast.clear();