复合型输入框、下拉框、日期选择

作者: 小鱼儿_逆流而上 | 来源:发表于2023-09-21 16:10 被阅读0次

中后台系统控件交互知识-表单控件篇
前端常见错误问题
bootstrapValidator校验的问题，当通过js或者其
表单设计经验集锦
微信小程序组件：下拉框
Vue.js入门之第六篇（表单）
表单设计
flutter自定义输入框下拉框
select下拉框、输入框在IOS中出现阴影
取消chrome输入框默认提示内容

小鱼儿心语：你可以哭但不能输，你可以难过但不可以落魄，你不努力怎么会知道自己可以赢得多少掌声?如果你能每天呐喊遍“我用不着为这一点小事而烦恼”，你会发现，你心里有一种不可思议的力量，试试看，很管用的。

当我们使用 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(￣▽￣)ブ

中后台系统控件交互知识-表单控件篇
目录：一、文本输入框二、下拉框三、单选框四、复选框五、开关按钮六、穿梭框七、日期选择八、步进器九...
前端常见错误问题
1. 类型错误给表单的下拉框或者输入框赋值，结果赋值的类型不是下拉框或输入框希望的类型
bootstrapValidator校验的问题，当通过js或者其
使用bootstrapValidator检验一个由jeDate日期插件选择日期的输入框时候，当选择了日期后，其校验...
表单设计经验集锦
一、表单结构标签：告诉用户表单问题是什么；输入框或者下拉框：供给用户填写或选择答案信息；动作：用户提交表单，...
微信小程序组件：下拉框
需求：1.调取接口获取下拉框数据2.下拉框分页3.可以通过输入框进行数据搜索4.输入框可以清空5.可选是否展示第一...
Vue.js入门之第六篇（表单）
v-model 输入框复选框单选框 select 下拉框
表单设计
0. 组成五元素：输入框，标签，动作，帮助信息，输入反馈。 1. 输入框：单选框，文本输入框，下拉框，文本区...
flutter自定义输入框下拉框
使用命名构造方法，自定义输入框和下拉框。输入框样式一代码：样式二可以在输入框右边添加widget小组件企业...
select下拉框、输入框在IOS中出现阴影
写在前面在IOS浏览器中，select下拉框会出现如下效果：选择输入框上面会出现阴影。这种默认效果显然不是我们想要...
取消chrome输入框默认提示内容
chrome浏览器会自动记忆我们input输入框输入的内容，当输入框再次获取焦点的时候，之前输入的内容就会以下拉框...