小鱼儿心语： 你可以哭但不能输，你可以难过但不可以落魄，你不努力怎么会知道自己可以赢得多少掌声?如果你能每天呐喊遍“我用不着为这一点小事而烦恼”，你会发现，你心里有一种不可思议的力量，试试看，很管用的。
当我们使用 ElementUI 构建表单页面的时候，经常需要使用到复合型输入框，可前置或后置元素，一般为标签或按钮，作为该输入框的说明性文字。
例如以下场景：
复合型输入框、日期选择框.png
复合型下拉框、日期区间选择.png
一、复合型输入框
Input 组件提供了 prefix 、suffix、 prepend、 append 四种 Slot，这里我们可通过 slot 来指定在 input 中前置文字内容。
<el-input placeholder="" v-model="formData.deviceInfo">
<template slot="prepend">设备名称</template>
</el-input>
注：以下内容会涉及到 ts 父子间传值的写法：
二、复合型下拉框由于select没有提供相应的属性，我们手动添加button达到想要的效果，这里我封装了一个复合型下拉框的组件，大家根据代码实际情况进行修改，用到的是vue3.0+ts写法。
- 1、复合型select封装子组件
<template>
<div>
<div class="timepick-width-prepend">
<el-button type="default" class="prepend-text">{{labeltext}}</el-button>
<el-select
v-model="selectContent.content"
filterablesize="small"
placeholder="请选择"
@change="changeselect"
clearable>
<el-option
v-for="(item,index) in selectList"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
</template>
<script setup name="date" lang="ts">
import { reactive } from "vue"
type Props = {
labeltext:string, //字符串类型的数据
selectList: number[], //数组类型
}
const Props = withDefaults(defineProps<Props>(),{ //withDefaults可以指定默认值
labeltext:"", //可以直接指定
selectList:()=>[], //这个不可以直接指定需要通过这个方式指定
})
const selectContent = reactive({
content:''
})
//向父组件返回model值
const emit = defineEmits(['changeselect'])
const changeselect = () => {
emit('changeselect', selectContent.content) // emit('touch-click', list,...) 后面可以接多个值
}
const handle = () => {
if(Props.selectList.length==0){
selectContent.content = ''
}
}
defineExpose({
selectContent, //这里导出这个变量，是为了父组件中可以直接调用
});
handle()
</script>
<style lang="scss" scoped>
.timepick-width-prepend {
display: flex;
align-items: center;
.prepend-text {
background: #F5F7FA;
color: #909399;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
cursor: default;
:focus, :hover {
border-color: #DCDFE6!important;
}
}
.prepend-text:focus, .prepend-text:hover {
border-color: #DCDFE6!important;
}
.el-input__inner {
border-top-left-radius: 0!important;
border-bottom-left-radius: 0!important;
}
::v-deep .el-input__wrapper {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
</style>
- 2、复合型select在父组件中的使用
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="108px" style="margin-left: 20px;">
<el-form-item label="" prop="taskType">
<Compositeselect labeltext="辨识活动类型" :selectList="task_type" ref="taskTypes" @changeselect="getselect"></Compositeselect>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<script setup name="Task">
const {proxy} = getCurrentInstance();
const { task_type } = proxy.useDict('task_type'); // 字典中的列表数据
const taskTypes = ref();//定义子组件的ref
// 获取下拉框传入值
function getselect(e) {
data.queryParams.taskType = e
getList()
}
// 重置按钮
function resetQuery() {
// 通过ref获取该select子组件中的值
taskTypes.value.selectContent.content = ''
proxy.resetForm("queryRef");
}
</script>
三、复合型日期选择器由于element中没有提供相应的属性，我们手动添加button达到想要的效果，这里我封装了一个复合型日期选择器的组件，大家根据代码实际情况进行修改，用到的是vue3.0+ts写法。
- 1、复合型日期选择器封装子组件
<template>
<div>
<div class="timepick-width-prepend">
<el-button type="default" class="prepend-text">{{ labeltext }}</el-button>
<!-- <el-date-picker
v-model="Content.date"
type="date"
:placeholder="'选择'+labeltext"
@change="change">
</el-date-picker> -->
<el-date-picker
style="width: 100%"
v-model="Content.date"
type="datetimerange"
:disabledDate="disabledDateFun"
range-separator="到"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="change"
/>
</div>
</div>
</template>
<script setup name="date" lang="ts">
import { reactive } from 'vue'
type Props = {
labeltext: string //字符串类型的数据
text: ''
}
const Props = withDefaults(defineProps<Props>(), {
//withDefaults可以指定默认值
labeltext: '', //可以直接指定
text: '',
})
const Content = reactive({
date: '',
})
// 时间区间的选择范围
const disabledDateFun = (time) => {
//return time.getTime() < Date.now()-1 * 24 * 3600 * 1000+20*60*1000
}
const emit = defineEmits(['changedate'])
const change = (e) => {
emit('changedate', Content.date) // emit('touch-click', list,...) 后面可以接多个值
}
defineExpose({
Content,
})
</script>
<style lang="scss" scoped>
.timepick-width-prepend {
display: flex;
align-items: center;
.prepend-text {
background: #f5f7fa;
color: #909399;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
cursor: default;
:focus,
:hover {
border-color: #dcdfe6 !important;
}
}
.prepend-text:focus,
.prepend-text:hover {
border-color: #dcdfe6 !important;
}
.el-input__inner {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
::v-deep .el-input__wrapper {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
</style>
- 2、复合型日期选择器在父组件中的使用
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="108px" style="margin-left: 20px;">
<el-form-item prop="beginDate">
<Dateselect labeltext="辨识时间" @changedate="getdates" ref="dates"></Dateselect>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<script setup name="Task">
const {proxy} = getCurrentInstance();
const { task_type } = proxy.useDict('task_type'); // 字典中的列表数据
const dates = ref();//定义子组件的ref
// 获取日期
function getdates(e){
if(e){
data.queryParams.beginDate = getTime(e[0])
data.queryParams.endDate = getTime(e[1])
}else {
data.queryParams.beginDate = ''
data.queryParams.endDate = ''
}
getList()
}
function getTime(time) {
const data = new Date(time)
const year = data.getFullYear()
const month = data.getMonth() + 1 < 10 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1
const date = data.getDate() < 10 ? '0' + data.getDate() : data.getDate()
const hh = data.getHours() < 10 ? '0' + data.getHours() : data.getHours()
const mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes()
const ss = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds()
return year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' +ss
}
// 重置按钮
function resetQuery() {
// 通过ref获取该日期子组件中的值
dates.value.Content.date = ''
proxy.resetForm("queryRef");
}
</script>
如果文章可以帮助到你的话，可以关注我哦，持续更新中......o(￣▽￣)ブ
网友评论