封装 el-date-picker 不可以使用 :modelValue="modelValue"做双向绑定吗

2023-12-16 09:35:35 +08:00
 tlerbao

问题，二次封装 el-date-picker ，具体使用和封装代码如下，下面这么写选择数据后不会触发 @change ，是这个组件不能用:modelValue="modelValue"吗？

下面同样的用法二次封装的 el-select\radio\checkbox 都可以

前端菜鸡特来情况。

// 调用
<DataRange v-model="date_range" />

// 二次封装的 DateRange 组件
<template>
  <el-date-picker
    :model-value="modelValue"
    @change="handleChange"
  />
</template>
<script setup lang="ts">
interface Props {
  modelValue?: any;

}

const props = withDefaults(defineProps<Props>(), {
  modelValue: "",
});

const emit = defineEmits<{
  "update:modelValue": [value: any];
}>();

const handleChange = (value: any) => {
  emit("update:modelValue", value);
};
</script>
1664 次点击
所在节点    程序员
3 条回复
zcf0508
2023-12-16 10:29:15 +08:00
可以看下这两个链接


https://github.com/element-plus/element-plus/issues/10576

https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHdhdGNoIH0gZnJvbSAndnVlJ1xuaW1wb3J0IERhdGFSYW5nZSBmcm9tICcuL0NvbXAudnVlJ1xuXG5jb25zdCBkYXRlX3JhbmdlID0gcmVmKCcnKVxuXG53YXRjaChkYXRlX3JhbmdlLCAodmFsKSA9PiB7XG4gIGNvbnNvbGUubG9nKHZhbClcbn0pXG5cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxEYXRhUmFuZ2Ugdi1tb2RlbD1cImRhdGVfcmFuZ2VcIiAvPlxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsInNyYy9Db21wLnZ1ZSI6Ijx0ZW1wbGF0ZT5cclxuICA8ZWwtZGF0ZS1waWNrZXJcclxuICAgIHYtbW9kZWw9XCJ2YWx1ZVwiXHJcbiAgICB0eXBlPVwiZGF0ZXRpbWVcIlxyXG4gIC8+XHJcbjwvdGVtcGxhdGU+XHJcblxyXG48c2NyaXB0IHNldHVwIGxhbmc9XCJ0c1wiPlxyXG5pbXBvcnQgeyByZWYsIHdhdGNoIH0gZnJvbSAndnVlJ1xyXG5cclxuaW50ZXJmYWNlIFByb3BzIHtcclxuICBtb2RlbFZhbHVlPzogYW55O1xyXG59XHJcblxyXG5jb25zdCBwcm9wcyA9IHdpdGhEZWZhdWx0cyhkZWZpbmVQcm9wczxQcm9wcz4oKSwge1xyXG4gIG1vZGVsVmFsdWU6IFwiXCIsXHJcbn0pO1xyXG5cclxuY29uc3QgdmFsdWUgPSByZWYocHJvcHMubW9kZWxWYWx1ZSlcclxuXHJcbmNvbnN0IGVtaXQgPSBkZWZpbmVFbWl0czx7XHJcbiAgXCJ1cGRhdGU6bW9kZWxWYWx1ZVwiOiBbdmFsdWU6IGFueV07XHJcbn0+KCk7XHJcblxyXG53YXRjaCh2YWx1ZSwgKHZhbHVlKSA9PiB7XHJcbiAgZW1pdChcInVwZGF0ZTptb2RlbFZhbHVlXCIsIHZhbHVlKTtcclxufSlcclxuXHJcbjwvc2NyaXB0PiIsIl9vIjp7fX0=


如果都写 any 的话建议不要用 ts 。
jy02534655
2023-12-16 13:27:39 +08:00
如果二次封装的时候不使用 modelValue ，可以不写，比如我对 el-input 做封装就这样
<template>
<el-input>
<template v-for="(item, i) in useSlotData" :key="i" #[i]>
{{ item }}
</template>
</el-input>
</template>
<script setup>
import { computed } from 'vue';
import { clearObject } from '@/utils';
const props = defineProps({
slotData: {
type: Object,
default: () => {}
}
});
const useSlotData = computed(() => {
return clearObject(props.slotData);
});
</script>
或者用 @vueuse/core 的 useVModel 直接做双向绑定
Brain777
2023-12-16 18:10:45 +08:00
// 调用
<DataRange v-model="date_range" />

// 二次封装的 DateRange 组件
<template>
<el-date-picker
v-model="date"/>
</template>
<script setup lang="ts">

interface Props {
modelValue: string | Date;
}

const props = withDefaults(defineProps<Props>(), {
modelValue: "",
});

const emit = defineEmits(["update:modelValue"]);

const date = ref<string | Date>("")

watch(date,(value) => emit("update:modelValue", value))
</script>

可以这样写

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1000861

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX