forked from ccsens_fe/tall-mui-3
17 changed files with 456 additions and 50 deletions
Binary file not shown.
Binary file not shown.
@ -0,0 +1,101 @@ |
|||
<template> |
|||
<view class="input-group flex-1"> |
|||
<input :placeholder="placeholder" @input="search" @blur="hideList" v-model="backName" /> |
|||
<view class="ul"> |
|||
<view class="li" v-for="(item, index) in dataSource" :key="index" @tap="select(item)">{{ item.name }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
placeholder: String, //默认提示 |
|||
searchKey: String, //模糊搜索的key值 |
|||
dataSource: { |
|||
type: Array, |
|||
default: function () { |
|||
//数据源 |
|||
return []; |
|||
}, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
list: [], |
|||
name: '', |
|||
backName: '', |
|||
}; |
|||
}, |
|||
destroyed() { |
|||
clearTimeout(this.t); |
|||
}, |
|||
methods: { |
|||
search(e) { |
|||
let val = e.detail.value; |
|||
console.log('val: ', val); |
|||
this.$emit('searchPrevTask', val); |
|||
|
|||
// let arr = []; |
|||
// for (let i = 0; i < dataSource.length; i++) { |
|||
// if (dataSource[i].name.indexOf(val) !== -1) { |
|||
// arr.push(dataSource[i]); |
|||
// } |
|||
// } |
|||
// if (!val) { |
|||
// this.list = []; |
|||
// } else { |
|||
// this.list = arr; |
|||
// } |
|||
}, |
|||
|
|||
select(item) { |
|||
console.log('item: ', item); |
|||
this.backName = item.name; |
|||
this.$emit('select', item); |
|||
}, |
|||
|
|||
hideList() { |
|||
setTimeout(() => { |
|||
this.$emit('clearAllTasks'); |
|||
}, 200); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.input-group { |
|||
position: relative; |
|||
|
|||
input { |
|||
border-bottom: 1upx solid #dcdfe6; |
|||
height: 90upx; |
|||
padding-left: 10upx; |
|||
font-size: 30upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.uni-input-placeholder { |
|||
color: rgb(192, 196, 204); |
|||
font-size: 28upx; |
|||
} |
|||
|
|||
.ul { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 100%; |
|||
width: 100%; |
|||
z-index: 999; |
|||
background: #fff; |
|||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|||
max-height: 100px; |
|||
overflow-y: auto; |
|||
|
|||
.li { |
|||
border-bottom: 1upx solid #f1f1f1; |
|||
padding: 16upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,11 +1,185 @@ |
|||
<template> |
|||
<view class="flex justify-between" style="min-width: 90px"> |
|||
<u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon> |
|||
<u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon> |
|||
<u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon> |
|||
<view> |
|||
<view class="flex justify-between" style="min-width: 90px; position: relative"> |
|||
<u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon> |
|||
<u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon> |
|||
<!-- <u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon> --> |
|||
<u-icon name="xuanxiang" custom-prefix="custom-icon" size="21px" @click="operation"></u-icon> |
|||
|
|||
<!-- 右上角 ... 弹窗 --> |
|||
<view class="popup border shadow-md" v-if="show"> |
|||
<view class="flex justify-center pb-3 border-b-1"> |
|||
<span @click="createTask">新建任务</span> |
|||
</view> |
|||
<view class="flex pt-3 justify-center"> |
|||
<span>克隆任务</span> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 遮罩 --> |
|||
<view class="mask" v-if="maskShow" @click="closeMask"></view> |
|||
<!-- 新建任务弹窗 --> |
|||
<CreateTask |
|||
:startTime="startTime" |
|||
:endTime="endTime" |
|||
:task="task" |
|||
@showTime="showTime" |
|||
@closeMask="closeMask" |
|||
class="thirdPopup flex transition-transform" |
|||
v-if="createTaskShow" |
|||
/> |
|||
|
|||
<u-picker title="开始时间" mode="time" v-model="showStart" :params="params" @confirm="confirmStartTime"></u-picker> |
|||
<u-picker title="结束时间" mode="time" v-model="showEnd" :params="params" @confirm="confirmEndTime"></u-picker> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default {}; |
|||
import CreateTask from '../../Title/components/CreateTask.vue'; |
|||
|
|||
export default { |
|||
components: { CreateTask }, |
|||
|
|||
props: { |
|||
task: { |
|||
type: Object, |
|||
default: () => {}, |
|||
}, |
|||
}, |
|||
|
|||
data() { |
|||
return { |
|||
show: false, //右上角 ... 显示 |
|||
createTaskShow: false, //新建项目显示 |
|||
secondShow: false, //分享项目显示 |
|||
maskShow: false, //遮罩显示 |
|||
showStart: false, |
|||
showEnd: false, |
|||
startTime: '', // 新建任务的开始时间 |
|||
endTime: '', // 新建任务的截止时间 |
|||
params: { |
|||
year: true, |
|||
month: true, |
|||
day: true, |
|||
hour: true, |
|||
minute: true, |
|||
second: true, |
|||
}, |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
//操作 |
|||
operation() { |
|||
// this.$t.ui.showToast('操作'); |
|||
this.show = !this.show; |
|||
}, |
|||
|
|||
// 新建项目 |
|||
createTask() { |
|||
// 关闭 ... 弹窗 |
|||
this.show = false; |
|||
// 打开遮罩 |
|||
this.maskShow = true; |
|||
// 打开新建项目弹窗 |
|||
this.createTaskShow = true; |
|||
}, |
|||
|
|||
//点击遮罩，关闭弹窗 |
|||
closeMask() { |
|||
// 关闭遮罩 |
|||
this.maskShow = false; |
|||
// 关闭分享项目弹窗 |
|||
this.secondShow = false; |
|||
// 关闭新建项目弹窗 |
|||
this.createTaskShow = false; |
|||
}, |
|||
|
|||
showTime() { |
|||
this.showStart = !this.showStart; |
|||
}, |
|||
|
|||
// 选择开始时间 |
|||
confirmStartTime(e) { |
|||
this.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`; |
|||
this.showEnd = true; |
|||
}, |
|||
|
|||
// 选择结束时间 |
|||
confirmEndTime(e) { |
|||
this.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.mask { |
|||
width: 100%; |
|||
height: 100vh; |
|||
z-index: 21; |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.thirdPopup { |
|||
background: #ffffff; |
|||
position: fixed; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%, -50%); |
|||
z-index: 33; |
|||
border-radius: 5px; |
|||
width: 90%; |
|||
} |
|||
|
|||
.popup { |
|||
width: 110px; |
|||
background: #fff; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 35px; |
|||
z-index: 99; |
|||
padding: 15px 0; |
|||
color: black; |
|||
animation: opacity 1s ease-in; |
|||
} |
|||
|
|||
@keyframes opacity { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.8; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
::v-deep .u-slot-content { |
|||
min-width: 0; |
|||
} |
|||
::v-deep .u-dropdown__content { |
|||
min-height: 120px !important; |
|||
height: auto !important; |
|||
overflow-y: auto; |
|||
background: #fff !important; |
|||
transition: none !important; |
|||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
::v-deep .u-dropdown__menu__item .u-flex { |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
height: 100%; |
|||
flex-wrap: nowrap; |
|||
border: 1px solid #afbed1; |
|||
padding: 0 8px; |
|||
} |
|||
::v-deep .u-dropdown__content__mask { |
|||
display: none; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue