1、组件页面
<template>
<!-- 时间点选择组件 -->
<div class="m-select-wrap">
<input
:class="['u-select-input f16', color === 'blue' ? '' : 'white-color']"
type="text"
readonly
@click="openSelect"
@blur="onBlur"
v-model="selectName" />
<div :class="['triangle-down', { 'rotate': rotate }]"></div>
<div :class="['m-options-panel f16', showOptions ? 'show': 'hidden']">
<div class="flexBox">
<p @mousedown="getValue(item.name, item.value, index)" v-for="(item, index) in selectData" :key="index">
<!-- status
1蓝色:已上报并上报成功
2红色:已上报但上报失败
3绿色:有数据但未上报
4灰色:无数据(时间未到)
-->
<span v-if="item.status==2" class="u-option u-bgRed">{{ item.name }}</span>
<span v-else-if="item.status==1" class="u-option u-bgBlue">{{ item.name }}</span>
<span v-else-if="item.status==3" class="u-option u-bgGreen">{{ item.name }}</span>
<span v-else class="u-option u-bgHui">{{ item.name }}</span>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'selectmodel',
props: {
selectData: {
type: Array,
default: () => {
return []
}
},
selName: {
type: String,
default: ''
},
// eslint-disable-next-line vue/require-prop-types
selValue: {
default: undefined
},
color: {
type: String,
default: () => {
return 'blue'
}
}
},
computed: {
selectName: {
get () {
return this.selN
},
set (newVal) {
this.selN = newVal
}
},
selectValue: {
get () {
return this.selV
},
set (newVal) {
this.selV = newVal
}
}
},
data () {
return {
selN: this.selName,
selV: this.selValue,
rotate: false,
showOptions: false
}
},
methods: {
openSelect () {
this.showOptions = !this.showOptions
this.rotate = !this.rotate
},
getValue (name, value, index) {
this.selectName = name
this.selectValue = value
this.$emit('getValue', name, value, index)
},
onBlur () {
this.showOptions = false
this.rotate = false
}
}
}
</script>
<style lang="less" scoped>
.m-select-wrap {
display: inline-block;
width: 1.3rem;
height: 30px;
line-height: 30px;
position: relative;
.u-select-input {
width:1.25rem;
position: relative;
background: #3A79EE;
color: #000;
height: 30px;
line-height: 30px;
padding: 0 15px;
cursor: pointer;
border-radius: 4px;
border: 1px solid #d9d9d9;
outline: none;
}
.white-color {
background: #FFFFFF;
color: #000;
}
.triangle-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #eaeaea;
position: absolute;
top: 11px;
right: 15px;
transition: transform 0.3s ease-in-out;
}
.rotate {
transform: rotate(180deg);
}
.m-options-panel {
padding: 10px 8px 10px 14px;
z-index: 99;
position: absolute;
background: #FFFFFF;
border-radius: 4px;
width: 468px;
height: 360px;
overflow-y: scroll;
border: 1px solid #E3E3E3;
top: 36px;
left: 0;
color: #706F94;
.u-option {
display: inline-block;
padding: 0 12px;
cursor: pointer;
background-color: #999999;
border: none;
border-radius: 5px;
color: #fff;
margin-right: 5px;
}
.u-option:hover {
color: #FFFFFF;
background: #83EBD8!important;
}
}
.show {
display: block;
}
.hidden {
display: none;
}
.u-bgBlue{
background: #0099ff!important;
}
.u-bgHui{
background: #999999!important;
}
.u-bgRed{
background: #ff6666!important;
}
.u-bgGreen{
background: #28d8b4!important;
}
.flexBox{
display: flex;
flex-flow: wrap;
justify-content: start;
}
}
</style>
2、使用页面
2.1 引入js
import Select from "./components/selectmodel"
2.2 在components注册
components: {
Select
},
2.3使用
<Select
:selectData="selectData"
:selValue="selValue"
color="white"
:selName="selName"
v-model="queryParam.ptime"
@getValue="getValue" />
2.4 写方法
getValue (name, value, index) {
this.queryParam.ptime = value;
},
3、效果图