From 6144539234f33fbccf4cbfa414c89c0783a189a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= <n551wv1@163.com>
Date: Mon, 29 Mar 2021 00:33:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20=E6=96=B0=E5=A2=9E=E6=B5=AE?=
 =?UTF-8?q?=E5=8A=A8=E6=8C=89=E9=92=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/c-fabutton/c-fabutton.vue      | 141 ++++++++++++++++++
 ldcake-ui/components/c-spin/c-spin.vue        |   5 +
 pages.json                                    |  15 +-
 pages/components/fabutton/fabutton.vue        |  43 ++++++
 pages/index/index.vue                         |   4 +
 5 files changed, 205 insertions(+), 3 deletions(-)
 create mode 100644 ldcake-ui/components/c-fabutton/c-fabutton.vue
 create mode 100644 pages/components/fabutton/fabutton.vue

diff --git a/ldcake-ui/components/c-fabutton/c-fabutton.vue b/ldcake-ui/components/c-fabutton/c-fabutton.vue
new file mode 100644
index 0000000..a98bcb9
--- /dev/null
+++ b/ldcake-ui/components/c-fabutton/c-fabutton.vue
@@ -0,0 +1,141 @@
+<template>
+	<view>
+		<view id="fabutton" class="fabutton"
+			:style="`left:${left}px;top:${top}px;background:${background}`"
+		  @touchstart="touchstart"
+			@touchmove.stop.prevent="touchmove" @touchend="touchend" @click.stop.prevent="click"
+			:class="{transition: isDock && !isMove }">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "c-fabutton",
+		props: {
+			// 是否停靠
+			isDock: {
+				type: Boolean,
+				default: true
+			},
+			// 是否存在tabbar
+			isExistTabBar: {
+				type: Boolean,
+				default: false
+			},
+			// 背景透明度
+			background: {
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				top: 0,
+				left: 0,
+				width: 0,
+				height: 0,
+				offsetWidth: 0,
+				offsetHeight: 0,
+				windowWidth: 0,
+				windowHeight: 0,
+				isMove: true,
+				edge: 10,
+			}
+		},
+		mounted() {
+			const sys = uni.getSystemInfoSync();
+
+			this.windowWidth = sys.windowWidth;
+			this.windowHeight = sys.windowHeight;
+
+			// #ifdef APP-PLUS
+			this.existTabBar && (this.windowHeight -= 50);
+			// #endif
+			if (sys.windowTop) {
+				this.windowHeight += sys.windowTop;
+			}
+			const query = uni.createSelectorQuery().in(this);
+			query.select('#fabutton').boundingClientRect(data => {
+				this.width = data.width;
+				this.height = data.height;
+				this.offsetWidth = data.width / 2;
+				this.offsetHeight = data.height / 2;
+				this.left = this.windowWidth - this.width - this.edge;
+				this.top = this.windowHeight - this.height - this.edge;
+			}).exec();
+		},
+		computed: {
+			handleStyle() {
+				const defaultColor = this.$c.color.primary;
+				return [ 
+					`background-color: ${this.background||defaultColor}`, 
+					`left: ${this.left}px`, 
+					`top: ${this.top}px`,
+				].join(',')
+			}
+		},
+		methods: {
+			click() {
+				this.$emit('click');
+			},
+			touchstart(e) {
+				this.$emit('touchstart');
+			},
+			touchmove(e) {
+				// 单指触摸
+				if (e.touches.length !== 1) {
+					return false;
+				}
+
+				this.isMove = true;
+				this.left = e.touches[0].clientX - this.offsetWidth;
+				let clientY = e.touches[0].clientY - this.offsetHeight;
+				// #ifdef H5
+				clientY += this.height;
+				// #endif
+				let edgeBottom = this.windowHeight - this.height - this.edge;
+
+				// 上下触及边界
+				if (clientY < this.edge) {
+					this.top = this.edge;
+				} else if (clientY > edgeBottom) {
+					this.top = edgeBottom;
+				} else {
+					this.top = clientY
+				}
+			},
+			touchend(e) {
+				if (this.isDock) {
+					let edgeRigth = this.windowWidth - this.width - this.edge;
+					if (this.left < this.windowWidth / 2 - this.offsetWidth) {
+						this.left = this.edge;
+					} else {
+						this.left = edgeRigth;
+					}
+				}
+				this.isMove = false;
+				this.$emit('touchend');
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.fabutton {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 80upx;
+		height: 80upx;
+		border-radius: 50%;
+		position: fixed;
+		background-color: $c-type-primary;
+		z-index: 999999;
+
+		&.transition {
+			transition: left .3s ease, top .3s ease;
+		}
+	}
+</style>
diff --git a/ldcake-ui/components/c-spin/c-spin.vue b/ldcake-ui/components/c-spin/c-spin.vue
index 2a37d3a..d7bdd60 100644
--- a/ldcake-ui/components/c-spin/c-spin.vue
+++ b/ldcake-ui/components/c-spin/c-spin.vue
@@ -13,22 +13,27 @@
 	export default {
 		name: "c-spin",
 		props: {
+			// 大小，可选值为 large、small、default
 			size: {
 				type: String,
 				default: 'default'
 			},
+			// 是否固定，需要父级有 relative 或 absolute
 			isFix: {
 				type: Boolean,
 				default: false
 			},
+			// 是否全屏
 			isFullscreen: {
 				type: Boolean,
 				default: false
 			},
+			// 是否自定义
 			isCustom: {
 				type: Boolean,
 				default: false
 			},
+			// 背景透明度
 			opacity: {
 				type: Number,
 				default: 0.9
diff --git a/pages.json b/pages.json
index be2883f..44b022d 100644
--- a/pages.json
+++ b/pages.json
@@ -6,14 +6,14 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "ldcake-uniapp"
+				"navigationBarTitleText": "绿豆糕组件库"
 			}
 		}
 	    ,{
             "path" : "pages/components/date-picker/date-picker",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "",
+                "navigationBarTitleText": "日期选择器（date-picker）",
                 "enablePullDownRefresh": false
             }
             
@@ -27,10 +27,19 @@
             }
             
         }
+        ,{
+            "path" : "pages/components/fabutton/fabutton",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "悬浮按钮（fabutton）",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarTitleText": "绿豆糕组件库",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	}
diff --git a/pages/components/fabutton/fabutton.vue b/pages/components/fabutton/fabutton.vue
new file mode 100644
index 0000000..4ecde23
--- /dev/null
+++ b/pages/components/fabutton/fabutton.vue
@@ -0,0 +1,43 @@
+<template>
+	<view class="c-demo">
+		<view class="c-demo-wrap">
+			<view class="c-demo-title">演示效果</view>
+			<view class="c-demo-area">
+				<view class="c-demo-result-line">fabutton是否停靠：{{ isDock }}</view>
+			</view>
+		</view>
+		<view class="c-item-title mt-20">是否停靠</view>
+		<subsection :list="list" v-model="current" @change="handleChange"></subsection>
+		<c-fabutton :is-dock="isDock">
+			<view class="flex align-center text-xxl mb-5 text-white">+</view>
+		</c-fabutton>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [
+					{
+						name: '是'
+					},
+					{
+						name: '否'
+					}
+				],
+				current: 0,
+				isDock: false
+			}
+		},
+		methods:{
+			handleChange(val) {
+				this.isDock = !val
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 0966122..d8d763b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -33,6 +33,10 @@
 						name: '加载中（spin）',
 						url: '/pages/components/spin/spin'
 					},
+					{
+						name: '悬浮按钮（fabutton）',
+						url: '/pages/components/fabutton/fabutton'
+					},
 				]
 			}
 		}
-- 
Gitee


From febe5e4887a3b8c84604c88d1e82602cfe92e6dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=B0=8F=E6=9C=AF?= <n551wv1@163.com>
Date: Mon, 29 Mar 2021 00:35:25 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=AA=90=20=E6=9B=B4=E6=96=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=89=88=E6=9C=AC=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ldcake-ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ldcake-ui/package.json b/ldcake-ui/package.json
index 3854ebb..1c66baf 100644
--- a/ldcake-ui/package.json
+++ b/ldcake-ui/package.json
@@ -1,6 +1,6 @@
 {
 		"name": "ldcake-ui",
-		"version": "1.0.5",
+		"version": "1.0.6",
 		"description": "基于uni-app的UI组件库",
 		"main": "index.js",
 		"scripts": {
-- 
Gitee