feat: 更新增加任务按钮
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name" : "",
|
||||
"appid" : "",
|
||||
"appid" : "wx3938d1aaf05e6bc7",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
|
||||
@@ -54,6 +54,10 @@ import { loadTasks } from "@/utils/task";
|
||||
import type { ITask } from "@/utils/task";
|
||||
import { getStreak, isChecked, toggleCheck } from '@/utils/check'
|
||||
import { calcEndTime } from "@/utils";
|
||||
import { share } from '@/utils/share'
|
||||
|
||||
const { onShareAppMessage } = share()
|
||||
onShareAppMessage()
|
||||
|
||||
defineOptions({ name: 'Home' })
|
||||
|
||||
|
||||
@@ -37,9 +37,9 @@
|
||||
</view>
|
||||
</wd-card>
|
||||
|
||||
<view class="px-3">
|
||||
<wd-button block @click="openAdd">新增任务</wd-button>
|
||||
</view>
|
||||
<liu-drag-button v-if="fabVisible" @clickBtn="openAdd">
|
||||
<wd-icon name="plus" size="24px"></wd-icon>
|
||||
</liu-drag-button>
|
||||
|
||||
<wd-popup
|
||||
v-model="popupVisible"
|
||||
@@ -47,6 +47,7 @@
|
||||
:safe-area-inset-bottom="true"
|
||||
:close-on-click-modal="true"
|
||||
custom-style="border-radius: 32rpx 32rpx 0 0; padding: 40rpx 32rpx"
|
||||
@close="handeClosePopup"
|
||||
>
|
||||
<view class="flex flex-col max-h-[70vh] overflow-y-auto">
|
||||
<!-- 标题 -->
|
||||
@@ -131,6 +132,7 @@ import { calcEndTime } from "@/utils";
|
||||
|
||||
const taskList = ref<ITask[]>([])
|
||||
const popupVisible = ref(false)
|
||||
const fabVisible = ref(true)
|
||||
const popupMode = ref<'add' | 'edit'>('add')
|
||||
const showTimePicker = ref(false)
|
||||
|
||||
@@ -166,6 +168,7 @@ function loadData() {
|
||||
}
|
||||
|
||||
function openAdd() {
|
||||
fabVisible.value = false
|
||||
popupMode.value = 'add'
|
||||
data.form = {
|
||||
id: Date.now(),
|
||||
@@ -178,6 +181,7 @@ function openAdd() {
|
||||
}
|
||||
|
||||
function openEdit(task: ITask) {
|
||||
fabVisible.value = false
|
||||
data.form = {
|
||||
id: task.id,
|
||||
title: task.title,
|
||||
@@ -202,8 +206,16 @@ function onDelete(id: number) {
|
||||
})
|
||||
}
|
||||
|
||||
function handeClosePopup() {
|
||||
setTimeout(() => {
|
||||
fabVisible.value = true
|
||||
}, 300)
|
||||
}
|
||||
|
||||
|
||||
function cancelClick() {
|
||||
popupVisible.value = false
|
||||
handeClosePopup()
|
||||
}
|
||||
|
||||
function saveClick() {
|
||||
|
||||
12
src/uni_modules/liu-drag-button_1.0.5/changelog.md
Normal file
12
src/uni_modules/liu-drag-button_1.0.5/changelog.md
Normal file
@@ -0,0 +1,12 @@
|
||||
## 1.0.5（2023-07-13）
|
||||
优化
|
||||
## 1.0.4（2023-06-08）
|
||||
增加预览二维码
|
||||
## 1.0.3（2023-05-31）
|
||||
增加license
|
||||
## 1.0.2（2023-04-28）
|
||||
优化
|
||||
## 1.0.1（2023-04-26）
|
||||
增加示例
|
||||
## 1.0.0（2023-04-26）
|
||||
初始化发布
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view>
|
||||
<movable-area class="movable-area" :scale-area="false">
|
||||
<movable-view class="movable-view" :class="!isRemove?'animation-info':''" style="pointer-events: auto;"
|
||||
:style="{ background: background }"
|
||||
@click="clickBtn" @touchstart="touchstart" @touchend="touchend" @change="onChange" direction="all"
|
||||
inertia="true" :x="x" :y="y" :disabled="disabled" :out-of-bounds="true" :damping="200" :friction="100">
|
||||
<slot></slot>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
background: {
|
||||
type: String,
|
||||
default: "#8b5cf6"
|
||||
},
|
||||
//是否禁用拖动
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否自动停靠
|
||||
canDocking: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//按钮默认位置离底部距离（px）
|
||||
bottomPx: {
|
||||
type: Number,
|
||||
default: 30
|
||||
},
|
||||
//按钮默认位置离右边距离（px）
|
||||
rightPx: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
left: 0,
|
||||
top: 0,
|
||||
isRemove: true,
|
||||
windowWidth: 0,
|
||||
windowHeight: 0,
|
||||
btnWidth: 0,
|
||||
btnHeight: 0,
|
||||
x: 10000,
|
||||
y: 10000,
|
||||
old: {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getSysInfo()
|
||||
},
|
||||
methods: {
|
||||
getSysInfo() {
|
||||
let sysInfo = uni.getSystemInfoSync()
|
||||
this.windowWidth = sysInfo.windowWidth
|
||||
this.windowHeight = sysInfo.windowHeight
|
||||
let view = uni.createSelectorQuery().in(this).select(".movable-view")
|
||||
view.boundingClientRect(rect => {
|
||||
this.btnWidth = rect.width
|
||||
this.btnHeight = rect.height
|
||||
this.x = this.old.x
|
||||
this.y = this.old.y
|
||||
this.$nextTick(res => {
|
||||
this.x = this.windowWidth - this.btnWidth - this.rightPx
|
||||
this.y = this.windowHeight - this.btnHeight - this.bottomPx
|
||||
})
|
||||
}).exec()
|
||||
},
|
||||
//移动按钮
|
||||
onChange(e) {
|
||||
this.old.x = e.detail.x
|
||||
this.old.y = e.detail.y
|
||||
},
|
||||
//开始移动
|
||||
touchstart(e) {
|
||||
this.isRemove = true
|
||||
},
|
||||
//结束移动
|
||||
touchend(e) {
|
||||
if (this.canDocking && this.old.x) {
|
||||
this.x = this.old.x
|
||||
this.y = this.old.y
|
||||
let bWidth = (this.windowWidth - this.btnWidth) / 2
|
||||
if (this.x < 0 || (this.x > 0 && this.x <= bWidth)) {
|
||||
this.$nextTick(res => {
|
||||
this.x = 0
|
||||
})
|
||||
} else {
|
||||
this.$nextTick(res => {
|
||||
this.x = this.windowWidth - this.btnWidth
|
||||
})
|
||||
}
|
||||
this.isRemove = false
|
||||
}
|
||||
},
|
||||
//点击按钮
|
||||
clickBtn() {
|
||||
this.$emit('clickBtn')
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.movable-view {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
box-shadow: 0px 4rpx 12rpx 0px rgba(15, 23, 42, 0.08);
|
||||
border-radius: 50rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 26rpx;
|
||||
touch-action: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.animation-info {
|
||||
transition: left .25s ease;
|
||||
}
|
||||
|
||||
.movable-area {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 999999 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
6
src/uni_modules/liu-drag-button_1.0.5/license.md
Normal file
6
src/uni_modules/liu-drag-button_1.0.5/license.md
Normal file
@@ -0,0 +1,6 @@
|
||||
### 1、本插件可免费下载使用；
|
||||
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
|
||||
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
|
||||
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
|
||||
|
||||
|
||||
85
src/uni_modules/liu-drag-button_1.0.5/package.json
Normal file
85
src/uni_modules/liu-drag-button_1.0.5/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "liu-drag-button",
|
||||
"displayName": "可拖动悬浮按钮",
|
||||
"version": "1.0.5",
|
||||
"description": "可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，使用相当简单，源码简单易修改。",
|
||||
"keywords": [
|
||||
"悬浮按钮",
|
||||
"拖拽按钮",
|
||||
"拖动",
|
||||
"按钮",
|
||||
"拖拽"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/uni_modules/liu-drag-button_1.0.5/readme.md
Normal file
36
src/uni_modules/liu-drag-button_1.0.5/readme.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# liu-drag-button适用于uni-app项目的可拖动悬浮按钮组件
|
||||
### 本组件目前兼容微信小程序、H5
|
||||
### 本组件是可拖动的悬浮按钮，兼容小程序、H5，支持自动停靠，支持自定义样式，源码简单易修改
|
||||
# --- 扫码预览、关注我们 ---
|
||||
|
||||
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
||||
|
||||
|
||||
|
||||
### 使用方式
|
||||
``` html
|
||||
<liu-drag-button @clickBtn="clickBtn">按钮</liu-drag-button>
|
||||
```
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//点击按钮
|
||||
clickBtn(){
|
||||
console.log('按钮被点击了')
|
||||
},
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|--------------- | ------------------ | ---------------|
|
||||
| disabled | Boolean | false | 是否禁用拖动
|
||||
| canDocking | Boolean | true | 是否自动停靠
|
||||
| bottomPx | Number | 30 | 按钮默认位置离底部距离（px）
|
||||
| rightPx | Number | 0 | 按钮默认位置离右边距离（px）
|
||||
12
src/utils/share.ts
Normal file
12
src/utils/share.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
export function share(title = '一起来记录打卡') {
|
||||
return {
|
||||
onShareAppMessage() {
|
||||
const pages = getCurrentPages()
|
||||
return {
|
||||
title,
|
||||
path: `/${pages[pages.length - 1].route}`,
|
||||
imageUrl: '/static/logo.png'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user