vue3+element-puls项目问题

187 阅读2分钟
element-puls 文本域实现默认文字及换行 禁止下拉功能
//引入
const deleteName = ref('环境(车间/厂区/上班路上): \n岗位/情况(从事什么工作/做什么的过程中):\n原因(因为什么原因导致受伤):\n受伤部位(如右手食指、左脚踝等):\n初步诊断(医生诊断结果):')

//页面内容
<el-input
    resize="none"//resize="none"禁止下拉
    v-model="deleteName"
    type="textarea"
    placeholder="Please input"
/>

image.png

日期选择器下拉框消失 弹出弹窗 弹窗关闭后 日期下拉框继续显示问题
//引入
import { ref ,nextTick} from 'vue'
const closeDate=ref()//日期下拉框
//页面内容
<el-date-picker
    v-model="parmesanForm.date"
    type="date"
    placeholder="请选择日期"
    @change="clearTimeout()"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
    :disabled-date="disabledDate"
    ref="closeDate"
    />
<el-dialog v-model="isDate"  width="500" :close-on-click-modal="false">
    <div style="width: 100%; height: 100%; margin-top: 20px;">案件</div>
    <div style="display: flex; justify-content: center; margin-top: 30px;">
        <el-button  @click="agree()">已阅读并同意 </el-button>
    </div>
</el-dialog>

//逻辑
const clearTimeout=()=>{//日期选择器变化打开弹窗
    isDate.value=true
}
const agree=()=>{//点击确定让日期时间选择器失焦避免重复出现
    isDate.value=false
    nextTick(() => {
        closeDate.value.handleClose();//让日期选择器失焦
    });
}
根据日期选择器判断是否是当前日期, 是的话时间选择器禁用未发生的时间
//引入
import { ref ,reactive,nextTick} from 'vue'
const parmesanForm=ref({})as any
//页面内容
<el-date-picker
    v-model="parmesanForm.date"
    type="date"
    placeholder="请选择日期"
    />
<el-time-picker 
    type="datetime"
    :disabled-hours="disabledHours"
    :disabled-minutes="disabledMinutes"
    v-model="parmesanForm.time" 
    placeholder="请选择时间" />
//逻辑
const isToday=(dateString:any)=> {//判断日期选择器选择的日期是否是当前日期
  const givenDate = new Date(dateString);// 将日期字符串转换为 Date 对象
  const today = new Date();// 获取当前日期
  today.setHours(0, 0, 0, 0);// 重置今天的时间部分,以便只比较日期
  givenDate.setHours(0, 0, 0, 0);// 重置给定日期的时间部分,以便只比较日期
  return today.getTime() === givenDate.getTime();// 比较两个日期是否相等
}
const disabledHours = () => {//判断日期选择器是当前日期禁用小时
    if(isToday(parmesanForm.value.date)){//判断选择的日期是否是今天
        const now = new Date();//获取当前时间
        const currentHour = now.getHours()*1+1;//获取当前时间的小时并 +1
        return makeRange(currentHour, 23)
    }
}
const disabledMinutes = () => {////判断日期选择器是当前日期禁用分钟
    if(isToday(parmesanForm.value.date)){//判断选择的日期是否是今天
        const now = new Date();//获取当前时间
        const currentMinutes = now.getMinutes()*1+1;//获取当前时间分钟并 +1
        return makeRange(currentMinutes,59)
    }
}