前言
vue2 整合 cube-ui 子组件(供有点点基础的看)
需求
![](https://i-blog.csdnimg.cn/blog_migrate/a6ddd80187b240bd933f019c2c4397f4.png)
实现
子组件(search_data_component.vue)
html
<template>
<div class = "device-list-main">
<div class ="header">
<div class="header_title">
<cube-select v-model="objSearch.searchType" :options="objSearch.selectOptions" ></cube-select>
</div>
<div class="header_input">
<cube-input v-model="objSearch.searchValue" placeholder="请输入搜索值" :maxlength=30 ></cube-input>
<div class="header_input_btn" @click="sesarchClick">
<img :src="searchImgUrl" />
</div>
</div>
</div>
<div class="header_date">
<cube-input v-on:focus="showMinPicker('startTime')" :readonly=true v-model="objSearch.startTime" placeholder="开始时间" :maxlength=30 ></cube-input>
<span>到</span>
<cube-input v-on:focus="showMinPicker('endTime')" :readonly=true v-model="objSearch.endTime" placeholder="结束时间" :maxlength=30 ></cube-input>
</div>
</div>
</template>
js
<script>
import searchImgUrl from '@/../static/img/search.png'
import datwTimeUtil from '@/utils/dateTimeUtil'
export default {
data () {
return {
searchImgUrl: searchImgUrl
}
},
// 接收父组件传过来的对象
props: {
objSearch: { type: Object, default: null }
},
methods: {
// 搜索事件
sesarchClick () {
const startTime = this.objSearch.startTime
const endTime = this.objSearch.endTime
const obj = {
searchType: this.objSearch.searchType,
searchValue: this.objSearch.searchValue,
startTime: startTime,
endTime: endTime
}
this.$emit('search', obj)
},
// 监听出发选择时间
showMinPicker (time) {
if (!this.minPicker) {
this.minPicker = this.$createDatePicker({
title: '选择时间',
visible: true,
min: new Date(2019, 0, 1),
max: new Date(2030, 12, 1),
value: new Date(),
format: {
year: 'YYYY',
month: 'MM',
date: 'DD'
},
columnCount: 3,
onSelect: this.selectHandler,
onCancel: this.cancelHandler
})
}
// 选择时间标识
this.timeIdentifying = time
this.minPicker.show()
},
selectHandler (selectedTime) {
let date = datwTimeUtil.getFormatDate(selectedTime)
if (this.timeIdentifying === 'startTime') {
this.objSearch.startTime = date
} else if (this.timeIdentifying === 'endTime') {
this.objSearch.endTime = date
}
},
// 取消事件
cancelHandler () {
if (this.timeIdentifying === 'startTime') {
this.objSearch.startTime = ''
} else if (this.timeIdentifying === 'endTime') {
this.objSearch.endTime = ''
}
}
}
}
</script>
css
<style scoped>
/* 头部样式 */
.header {
width: 100%;
padding: 0;
display: flex;
background: #fff;
}
.header_date >>> .cube-input-field {
text-align: center;
padding: 0.5rem;
}
.header_title {
width: 30%;
float: left;
}
.cube-select {
padding: 0;
line-height: 2rem;
margin: 0.3rem;
font-size: small;
}
/* 日期控件样式-开始 */
.header_date {
display: flex;
background: #fff;
padding: 0.1rem 0.1rem;
text-align: center;
height: 2.1rem;
}
.header_date .cube-input::after {
border-radius: 1rem;
}
.header_date .cube-input {
height: 2rem;
}
.header_date span {
padding: 0.1rem 0.4rem;
}
/* 日期控件样式-结束 */
.header .cube-input {
float: left;
padding: 0;
font-size: small;
line-height: 0rem;
margin-top: 0.3rem;
width: 82%;
height: 2rem;
}
.header .cube-input::after {
border-radius: 1rem 0 0 1rem;
}
.header_input {
float: left;
width: 70%;
}
.header_input_btn {
float: left;
background-color: #eee;
width: 15%;
border-radius: 0 0.5rem 0.5rem 0;
margin-top: 0.3rem;
height: 2rem;
}
.header_input_btn img {
margin: 0.5rem;
height: 50%;
}
</style>
父组件部分主要代码(index.vue)
html(主要代码)
Search 指components注册的标签。
:objSearch 指向子组件传的参数
@search 指子组件触发的方法
<template>
<div class = "device-list-main">
<!--使用searchDataComponent 子组件 -->
<searchDataComponent @search='search' :objSearch='objSearch'></searchDataComponent>
</div>
</template>
js(主要代码)
<script>
// 引用搜索模块子组件
import searchDataComponent from '@/components/search_data_component'
export default {
name: 'DeviceReportList',
// 注册子组件
components: {
searchDataComponent
},
data () {
return {
objSearch: {
// 下拉框数组
selectOptions: [
{text: '医院名称', value: 'hospitalName'}
],
// 下拉框默认值
searchType: 'hospitalName',
// 输入框value
searchValue: '',
// 开始时间
startTime: dateTimeUtil.getCurrentMonthFirst(),
// 结束时间
endTime: dateTimeUtil.getCurrentMonthLast()
}
}
},
methods: {
// 搜索
search (obj) {
console.log('子组件搜索返回数据:', obj)
}
}
}
</script>