# 🎉 移动端组件

# vue组件开发规范和思路

💯 组件库就是为了统一不同/相同产品线之间的风格，给用户更好的体验，减少单次开发中写UI组件时浪费的时间和人力，提高开发效率。封装组件可以从中提炼自己的技术点和更深层次的对vue的理解，构建自己的网站和Blog（使用vuepress）,加强文档的编写能力

# 1. 封装组件库收获

• 深入对vue的理解
• 学习组件封装技能，掌握组件设计思路
• 劣实js/css基础
• 加强文档编写能力

# 2. 组件设计的思路和标准

• 可扩展性强
• 适用程度高
• 文档清楚详细
• 版本隔离，小版本优化加功能，大改需要大版本更新
• 和UI协调统一，要求UI交互参与进来

# 3. 组件设计和开发

💯 开发用到的vue api

• $parent： 获取当前组件父组件。继承父组件的props
• $props: 获取继承父组件的props
• $slots：获取当前插槽。
• $refs： 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
• $el: Vue实例使用的根 DOM 元素。
• $emit： 组件触发自定义事件。
• .sync：语法糖，单向数据流中，父组件监听到子组件props并修改，用了.sync不需要显式在父组件监听组件内部触发的自定义事件去修改值, 父组件只要写:x.sync="value", 注意此时子组件触发的事件必须是"update:x"此语法糖才生效。

# 4. 组件库

# 4.1. Toast组件

# 基本用法

Toast('提示文案');
Toast({
  type: 'loading',
  message: '加载中...'
});
Toast.success('成功文案');
Toast.fail('失败文案');

# 方法

# Options

# 4.2. Step组件

# 基本用法

<pl-step :active="active" active-text-color="#313131">
    <pl-steps>预约成功</pl-steps>
    <pl-steps>预约专家</pl-steps>
    <pl-steps>正在服务</pl-steps>
    <pl-steps>完成服务</pl-steps>
</pl-step>

# API

# 4.3. collapse组件

# 基本用法

<pl-collapse :value="value" />
<pl-collapse :value="value" type="character" align="left" />
<pl-collapse :value="value" align="right" type="character" unfold-text="详细" fold-text="挂起" />

# API

# 4.4. Switch开关

  <pl-switch />
  <pl-switch is-checked />
  <pl-switch oblate />

# API

未完待续