<template>
|
<el-form :model="form" label-width="80px" class="terrain-settings">
|
<el-form-item label="大小">
|
<el-slider
|
:step="0.01"
|
v-model="form.snowSize"
|
:min="0.01"
|
:max="0.1"
|
></el-slider>
|
</el-form-item>
|
<el-form-item label="速度">
|
<el-slider v-model="reversedSnowSpeed" :min="50" :max="200"></el-slider>
|
</el-form-item>
|
<el-form-item label="颜色">
|
<el-color-picker v-model="form.snowColor" />
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<script setup>
|
import { reactive, watch ,computed} from "vue";
|
|
// 定义表单数据
|
const form = reactive({
|
snowSize: 0.02, // 默认雪的大小
|
snowSpeed: 100, // 默认雪的速度
|
snowColor: "#FFFFFF", // 默认雪的颜色
|
});
|
|
// 定义 props 和 emit
|
const props = defineProps({
|
modelValue: {
|
type: Object,
|
default: () => ({}),
|
},
|
});
|
const emit = defineEmits(["update-snow"]);
|
// 计算属性来反转滑块的值
|
const reversedSnowSpeed = computed({
|
get() {
|
return 250 - form.snowSpeed; // 假设最大值为200，最小值为50
|
},
|
set(value) {
|
form.snowSpeed = 250 - value;
|
}
|
});
|
// 监听 form 的变化，并将最新值传递给父组件
|
watch(
|
() => ({ ...form }), // 深拷贝以确保响应式触发
|
(newVal) => {
|
emit("update-snow", newVal);
|
},
|
{ deep: true } // 深度监听
|
);
|
</script>
|
|
|
<style lang="less" scoped>
|
.terrain-settings {
|
padding: 20px;
|
width: 290px;
|
background: url("@/assets/img/tools/plotting_new.png") no-repeat;
|
filter: opacity(83%);
|
background-size: 100% 100%;
|
box-sizing: border-box;
|
}
|
</style>
|
