73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<template>
|
|
<div class="list-group">
|
|
<label class="list-group-item" style="cursor: pointer;">
|
|
<input
|
|
class="form-check-input me-1"
|
|
:name="data.LOCVOTSEQ"
|
|
:type="multiIs === '1' ? 'checkbox' : 'radio'"
|
|
:value="data.VOTDETSEQ"
|
|
:checked="selectedValues.includes(data.VOTDETSEQ)"
|
|
@change="handleChange"
|
|
>
|
|
{{ data.LOCVOTCON }}
|
|
<a :style="{ maxWidth: (data.LOCVOTLIK.length * 1) + 'ch' }"
|
|
v-if="data.LOCVOTLIK"
|
|
:href="data.LOCVOTLIK.startsWith('http') ? data.LOCVOTLIK : 'http://' + data.LOCVOTLIK"
|
|
class="text-truncate"
|
|
target="_blank"
|
|
rel="noopener noreferrer">
|
|
{{ data.LOCVOTLIK }}
|
|
</a>
|
|
</label>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
multiIs: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
selectedValues: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
})
|
|
const emit = defineEmits(["update:selectedValues"]);
|
|
|
|
const handleChange = (event) => {
|
|
const value = event.target.value;
|
|
let updatedValues = [];
|
|
// 체크박스일 때 여러 개 선택 가능
|
|
if (props.multiIs === "1") {
|
|
updatedValues = event.target.checked
|
|
? [...props.selectedValues, { VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }]
|
|
: props.selectedValues.filter(v => v.VOTDETSEQ !== value);
|
|
} else {
|
|
// 라디오 버튼일 때 하나만 선택 가능
|
|
updatedValues = [{ VOTDETSEQ: value, LOCVOTSEQ: props.data.LOCVOTSEQ, LOCVOTCON: props.data.LOCVOTCON }];
|
|
}
|
|
emit("update:selectedValues", updatedValues);
|
|
};
|
|
const preventLinkMove = (event) =>{
|
|
event.preventDefault();
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
a {
|
|
display: block; /* 링크 텍스트에만 영역 적용 */
|
|
max-width: 500px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|