feat(components):[lay-layer]基于 layer type:1 和动画的抽屉实现 · Pull Request !4 · Layui Vue/layer-vue

### 这个变动的性质是
新特性提交

### 需求背景
提供 drawer 抽屉支持 [#I4O4IA](https://gitee.com/layui-vue/layer-vue/issues/I4O4IA)

### 实现方案和 API
1.  **基本的解决思路** 
- 通过判断 offset 属性值"l","r","t","b",设置相应的进入/离开动画；
- 通过 area 属性设置抽屉大小,
- 在type = "drawer" 时,使 offset string[] 类型和 move 属性无效,达到禁用移动，始终贴边的效果；
2.  **API** 
drawer 基于 type 1 实现，API 几乎一致，以下仅列出不同的部分。
- move 属性无效；
- offset string[] 无效

| 属性     | 类型     | 默认值      | 可选值     | 说明                   |
|--------|--------|----------|---------|----------------------|
| type   | string | “drawer” | --      | 类型                   |
| offset | string | "l"      | l,r,t,b | 位置l:左 r:右 t:顶部 b: 底部 |
| area   | string | "350px"  | 像素值     | 高/宽                  |

3.  **用法** 
```
// 组件抽屉
<template>
  <lay-layer v-model="visible" type="drawer">
    抽屉内容
  </lay-layer>
  <button @click="onChangeVisible">抽屉</button>
  <button type="button" @click="openFuncDrawer">函数抽屉</button>
</template>

const visible = ref(false);

const onChangeVisible = () => {
  visible.value = true;
}

// 函数抽屉
const openFuncDrawer= () => {
  layer.drawer({
    title: "抽屉",
    content: "抽屉内容",
    offset: "b",
    area: "300px",
  });
}
// 更多用法请参考 type 1
</script>
```
### 对用户的影响和可能的风险
- 暂未发现

### 其它
- [最小化测试仓库地址](https://gitee.com/wcg666/layer-vue.git) https://gitee.com/wcg666/layer-vue.git

类型	指派人员	状态
审查	就眠儀式已审查通过	已完成 (1/1人)
测试	就眠儀式已测试通过	已完成 (1/1人)

Layui Vue/layer-vue .gitee-modal { width: 500px !important; }

搜索帮助

Layui Vue/layer-vue