z***@163.com
z***@163.com
  • 发布:2025-04-10 14:41
  • 更新:2025-04-10 15:09
  • 阅读:132

时间日期选择器弹窗怎么显示在上方

分类:插件市场
        <nks-datetime-picker  
          v-model="endTime"  
          clearable  
          type="datetime"  
          :border="false"  
          placeholder="完成时间"  
          label="完成时间"  
          prop="endTime"  
          label-width="70px"  
          style="width: 300px"  
        />
<template>  
  <uni-datetime-picker  
    v-model="value"  
    :class="{ 'nks-input-wrapper': border, 'nks-focus': isFocus, 'is-disabled': isDisabled }"  
    @show="handleFocus"  
    @change="handleBlur"  
    @maskClick="handleBlur"  
    :disabled="disabled"  
  >  
    <view  
      :style="{ width: labelWidth ? labelWidth + 'px' : '65px' }"  
      :class="`nks-label ${isRequired ? 'is-required' : ''}`"  
    >  
      {{ label }}  
    </view>  

    <view style="display: flex; flex: 1; align-items: center; justify-content: space-between">  
      <view style="position: relative; flex: 1">  
        <view>{{ value }}</view>  
        <view v-if="errorMessage" class="nks-calendar__error-message">{{ errorMessage }}</view>  
      </view>  
      <wd-icon name="arrow-right" color="rgb(0 0 0 / 25%)"></wd-icon>  
    </view>  
  </uni-datetime-picker>  
</template>  

<script setup lang="ts">  
import { ref, computed } from 'vue'  
import { useParent } from 'wot-design-uni/components/composables/useParent'  
import { FORM_KEY } from 'wot-design-uni/components/wd-form/types'  

// 定义 Props 接口  
interface Props {  
  modelValue?: string | number | null  
  label?: string  
  labelWidth?: number | string  
  prop?: string  
  required?: boolean  
  rules?: any[]  
  disabled?: boolean | string  
  border?: boolean  
}  

// 使用 withDefaults 设置默认值  
const props = withDefaults(defineProps<Props>(), {  
  modelValue: null,  
  label: '',  
  labelWidth: undefined,  
  prop: '',  
  required: false,  
  rules: () => [],  
  disabled: false,  
  border: true, // 设置默认值为 true  
})  
const emit = defineEmits(['update:modelValue'])  
const value = ref(props.modelValue)  
console.log('props.options', value.value, props.modelValue)  
const isFocus = ref(false)  

const handleFocus = () => {  
  isFocus.value = true  
}  
const handleBlur = () => {  
  isFocus.value = false  
}  

watch(value, (val) => {  
  emit('update:modelValue', val)  
})  
watch(  
  () => props.modelValue,  
  (val) => {  
    value.value = val  
  },  
  { immediate: true, deep: true },  
)  

const { parent: form } = useParent(FORM_KEY)  

// 表单校验错误信息  
const errorMessage = computed(() => {  
  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {  
    return form.errorMessages[props.prop]  
  } else {  
    return ''  
  }  
})  
// 是否展示必填  
const isRequired = computed(() => {  
  let formRequired = false  
  if (form && form.props.rules) {  
    const rules = form.props.rules  
    for (const key in rules) {  
      if (  
        Object.prototype.hasOwnProperty.call(rules, key) &&  
        key === props.prop &&  
        Array.isArray(rules[key])  
      ) {  
        formRequired = rules[key].some((rule) => rule.required)  
      }  
    }  
  }  
  return props.required || props.rules?.some((rule) => rule.required) || formRequired  
})  
const isDisabled = computed(() => {  
  let result = false  
  props.disabled ? (result = true) : props.disabled === '' ? (result = true) : (result = false)  
  return result  
})  
console.info('props.disabled', props)  
</script>  

<style scoped lang="scss">  
.nks-input-wrapper {  
  box-sizing: border-box;  
  align-items: center;  
  height: 46px;  
  padding: 0 var(--nks-padding);  
  line-height: 1.5;  
  color: var(--nks-text-color);  
  background-color: var(--nks-bg);  
  border: var(--nks-border);  
  border-radius: var(--nks-border-radius);  
  transition:  
    border-color 0.15s ease-in-out,  
    box-shadow 0.15s ease-in-out;  

  &.nks-focus {  
    border-color: var(--nks-border-color-focus);  
  }  

  &.is-not-empty:not(.is-disabled)::after {  
    background: none;  
  }  

  &.is-disabled {  
    // color: var(--nks-text-color-disable);  
    background-color: var(--nks-bg-disable);  
    border-color: var(--nks-border-color-disable);  
  }  

  :deep(.wd-input__suffix) {  
    line-height: inherit;  
  }  

  :deep(.wd-input__clear) {  
    vertical-align: auto;  
  }  

  ::v-deep .wht-select-inner {  
    height: 100% !important;  
    background-color: initial !important;  
    border: none !important;  
  }  
}  

.wd-input.is-cell {  
  align-items: center;  
}  

::v-deep .uni-date-x--border {  
  border: none;  
}  

::v-deep .uni-date__x-input {  
  box-sizing: border-box;  
  height: 44px;  
  line-height: 44px;  
}  

::v-deep .uni-date-editor {  
  display: flex;  
  align-items: center;  
  height: 100%;  
}  

.nks-label {  
  position: relative;  
  margin-right: var(--wot-cell-padding, var(--wot-size-side-padding, 15px));  
  font-size: var(--nks-font-size);  
  font-weight: 600;  
}  

.nks-label.is-required {  
  padding-left: 12px;  
}  

.nks-calendar__error-message {  
  position: absolute;  
  bottom: -12px;  
  left: 0;  
  font-size: var(--wot-form-item-error-message-font-size, var(--wot-fs-secondary, 12px));  
  color: var(--wot-form-item-error-message-color, var(--wot-color-danger, #fa4350));  
}  

.nks-label.is-required::after {  
  position: absolute;  
  top: 2px;  
  left: 0;  
  font-size: var(--wot-cell-required-size, 18px);  
  line-height: 1.1;  
  color: var(--wot-cell-required-color, var(--wot-color-danger, #fa4350));  
  content: '*';  
}  
</style>  
2025-04-10 14:41 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

可以发个示例代码吗?

  • z***@163.com (作者)

    发啦发啦 您看看

    2025-04-10 15:48

  • DCloud_UNI_JBB

    回复 z***@163.com: 你能发个可以复现的项目吗?现在内容有点乱,我也不清楚你的运行环境

    2025-04-10 16:10

  • z***@163.com (作者)

    回复 DCloud_UNI_JBB: 其实就是uni-datetime-picker日期选择器 这个组件

    2025-04-10 16:36

  • DCloud_UNI_JBB

    回复 z***@163.com: 暂时不支持调整时间选择框的位置

    2025-04-10 20:12

  • z***@163.com (作者)

    回复 DCloud_UNI_JBB: 好的吧 非常感谢!

    2025-04-11 09:10

要回复问题请先登录注册