You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<template>
|
|
<div class="hw-input" @click.stop="inputClick"
|
|
:style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
|
|
<tool v-if="selectUuid === options.uuid" :options="options" />
|
|
<el-form-item :label="options.name" :required="options.required">
|
|
<el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import tool from './tool.vue';
|
|
import { inject } from 'vue';
|
|
|
|
defineOptions({
|
|
name: 'hw-slider'
|
|
});
|
|
|
|
const props = defineProps({
|
|
options: Object,
|
|
formData: Object
|
|
});
|
|
const { options, formData } = toRefs(props);
|
|
const getOptions = inject('getOptions');
|
|
|
|
const selectUuid = inject('selectUuid');
|
|
const getSelectUuid = inject('getSelectUuid');
|
|
const inputClick = () => {
|
|
getOptions(options.value);
|
|
getSelectUuid(options.value.uuid);
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.hw-input {
|
|
margin: 2px;
|
|
border: 1px solid #0000;
|
|
position: relative;
|
|
padding: 12px 2px 2px;
|
|
|
|
&:hover {
|
|
background-color: #0001;
|
|
border: 1px solid #00afff;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|