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> |
<template> |
||||
<view class="flex justify-between" style="min-width: 90px"> |
<view> |
||||
<u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon> |
<view class="flex justify-between" style="min-width: 90px; position: relative"> |
||||
<u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon> |
<u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon> |
||||
<u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></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> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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> |
</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