feat: 第一次上传代码
This commit is contained in:
98
third/ex-drawer/README.md
Normal file
98
third/ex-drawer/README.md
Normal file
@@ -0,0 +1,98 @@
|
||||
## 已实现
|
||||
1. 正常手势操作
|
||||
2. 方法开关
|
||||
3. 显示/隐藏比例自动吸附
|
||||
4. 动画
|
||||
5. 独立滑动
|
||||
6. .....编不出来了 自行测试吧
|
||||
## 使用说明
|
||||
和正常组件使用方式一样
|
||||
```js
|
||||
// 1.引入
|
||||
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
|
||||
// 2.挂载
|
||||
components:{
|
||||
exDrawer
|
||||
}
|
||||
```
|
||||
```html
|
||||
// 3.使用
|
||||
<ex-drawer ref='drawer' width="488">
|
||||
<view class="drawer" slot="drawerContent">
|
||||
<button @click="close" type="default">关闭</button>
|
||||
drawer
|
||||
</view>
|
||||
<view class="container" slot="containerContent">
|
||||
<button @click="open" type="default">打开</button>
|
||||
<view class="" v-for="(item,index) in 100" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</ex-drawer>
|
||||
```
|
||||
具体请查看demo
|
||||
## props
|
||||
1. width(string) // 抽屉宽度
|
||||
2. 没了 主容器宽高和抽屉高度都可以被自动撑开 自行设置即可
|
||||
## 插槽
|
||||
1. drawerContent // 抽屉插槽
|
||||
2. containerContent // 主容器插槽
|
||||
## 方法
|
||||
1. this.$refs.drawer.open() //打开
|
||||
2. this.$refs.drawer.colse() //关闭
|
||||
## 之后预计更新
|
||||
1. 自定义进出吸附比例
|
||||
2. 看需求....
|
||||
```html
|
||||
<template>
|
||||
<view>
|
||||
<ex-drawer ref='drawer' width="488">
|
||||
<view class="drawer" slot="drawerContent">
|
||||
<button @click="close" type="default">关闭</button>
|
||||
drawer
|
||||
</view>
|
||||
<view class="container" slot="containerContent">
|
||||
<button @click="open" type="default">打开</button>
|
||||
<view class="" v-for="(item,index) in 100" :key="index">
|
||||
{{item}}
|
||||
</view>
|
||||
</view>
|
||||
</ex-drawer>
|
||||
</view>
|
||||
</template>
|
||||
```
|
||||
```js
|
||||
<script>
|
||||
import exDrawer from '@/components/ex-drawer/ex-drawer.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components:{
|
||||
exDrawer
|
||||
},
|
||||
methods: {
|
||||
open(){
|
||||
this.$refs.drawer.open()
|
||||
},
|
||||
close(){
|
||||
this.$refs.drawer.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
```css
|
||||
<style>
|
||||
.drawer{
|
||||
background-color: #ffffff;
|
||||
height: 100vh;
|
||||
}
|
||||
.container{
|
||||
background-color: #19BE6B;
|
||||
width: 750rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
128
third/ex-drawer/ex-drawer.vue
Normal file
128
third/ex-drawer/ex-drawer.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<!-- <view class="ex-drawer" @touchstart="containerStart" @touchend="containerEnd" @touchmove="containerMove"> -->
|
||||
<!-- 移除手势 -->
|
||||
<view class="ex-drawer">
|
||||
<!-- 抽屉 -->
|
||||
<view class="ex-drawer-warp" :class="{ move: move }" :style="{ width: `${width}rpx`, left: `-${width}rpx`, transform: `translate3d(${differential}px,0,0)`,backfaceVisibility:`hidden`, }">
|
||||
<!-- 抽屉内容插槽 -->
|
||||
<slot name="drawerContent"></slot>
|
||||
</view>
|
||||
<!-- 主容器 -->
|
||||
<view class="ex-container-warp" :class="maskShow == true ? 'container prevent' : 'container'">
|
||||
<!-- 遮罩 -->
|
||||
<view v-show="maskShow" class="mask" @tap="close"></view>
|
||||
<!-- 主容器内容插槽 -->
|
||||
<slot name="containerContent"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
maskShow: false,
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
moveX: 0,
|
||||
moveY: 0,
|
||||
startExcursion: 0,
|
||||
differential: 0,
|
||||
isDirection: null,
|
||||
iswidth: null,
|
||||
move: false
|
||||
};
|
||||
},
|
||||
props: {
|
||||
width: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
containerStart(e) {
|
||||
this.isDirection = null;
|
||||
this.move = false;
|
||||
this.startX = e.changedTouches[0].clientX;
|
||||
this.startY = e.changedTouches[0].clientY;
|
||||
this.startExcursion = this.differential;
|
||||
},
|
||||
containerMove(e) {
|
||||
this.moveX = e.changedTouches[0].clientX;
|
||||
this.moveY = e.changedTouches[0].clientY;
|
||||
let X = Math.abs(this.moveX - this.startX);
|
||||
let Y = Math.abs(this.moveY - this.startY);
|
||||
let differential = this.startExcursion + this.moveX - this.startX;
|
||||
differential = Math.min(uni.upx2px(this.width), differential);
|
||||
differential = Math.max(0, differential);
|
||||
this.isDirection == null ? (this.isDirection = Y / X > Math.sqrt(3) / 3) : ``;
|
||||
if (!this.isDirection) {
|
||||
this.differential = differential;
|
||||
if(this.differential == 0 ){
|
||||
this.containerEnd()
|
||||
}else{
|
||||
this.maskShow = true
|
||||
}
|
||||
}
|
||||
},
|
||||
containerEnd() {
|
||||
if (this.isDirection != null) {
|
||||
if (!this.isDirection) {
|
||||
this.iswidth = this.differential > (uni.upx2px(this.width) * 2) / 6;
|
||||
this.differential > 0 && this.differential < uni.upx2px(this.width) ? (this.move = true) : ``;
|
||||
}
|
||||
this.differential = this.iswidth ? uni.upx2px(this.width) : 0;
|
||||
this.differential == 0 ? this.maskShow = false : ``;
|
||||
}
|
||||
},
|
||||
close(){
|
||||
if(this.maskShow){
|
||||
this.move = true
|
||||
this.differential = 0;
|
||||
if(this.differential == 0 ){
|
||||
this.maskShow = false
|
||||
this.iswidth=false
|
||||
}
|
||||
}
|
||||
},
|
||||
open(){
|
||||
if(!this.maskShow){
|
||||
this.move = true
|
||||
this.differential = uni.upx2px(this.width);
|
||||
if(this.differential == uni.upx2px(this.width) ){
|
||||
this.maskShow = true
|
||||
this.iswidth=true
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.ex-drawer {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.ex-drawer-warp {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
touch-action: none;
|
||||
}
|
||||
.mask {
|
||||
position: fixed;
|
||||
left: 0rpx;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
background-color:#000000;filter:Alpha(Opacity=60);opacity:0.3;
|
||||
}
|
||||
.prevent {
|
||||
touch-action: none;
|
||||
}
|
||||
.move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user