File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
<template>
<div class="table-zone">
<p class="object-title mb5">백그라운드</p>
<ul>
<li class="mb5">
<div class="tabnav2">
<ul class="flex justify-start align-center">
<li
v-for="(nav, idx) in tabNav"
@click="showTab(nav)"
:key="idx"
class="cursor mr10"
>
<p :class="{ activeTab2: activeTab === nav }">{{ nav }}</p>
</li>
</ul>
</div>
<div class="tab-content2">
<div v-show="activeTab === '색상'">
<input
type="color"
colorformat="rgba"
class="color-picker"
v-model="background.background_color"
/>
</div>
<div v-show="activeTab === '이미지'">
<input
type="text"
name=""
id=""
class="full-input ㅡㅠ5"
placeholder="https://"
v-model="background.imageUrl"
/>
<div class="input-container">
<label class="check-label">
<input
type="checkbox"
name="check"
checked=""
class="custom-checkbox"
/>
<span>HTML</span>
</label>
</div>
</div>
</div>
</li>
<li class="mb5">
<div class="flex align-center">
<div class="slider-container flex65 pd0">
<input
type="range"
min="0"
max="100"
step="1"
v-model="background.opacity"
class="slider"
id="opacitySlider"
/>
</div>
<div class="flex35 pr0">
<input
type="text"
:value="`${background.opacity}%`"
@input="updateOpacity($event.target.value)"
class="full-input text-ct"
/>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
background_style: {
type: Object,
default: null,
},
},
data() {
return {
background: this.background_style,
tabNav: ["색상", "이미지"],
backgroundSelectedColor: "#333333",
backgroundColorList: [],
activeTab: null,
opacity: "100",
};
},
methods: {
showTab: function (tabName) {
this.background.image_at = tabName === "이미지";
this.activeTab = tabName;
},
updateOpacity: function (value) {
this.background.opacity = value.replace("%", "");
},
},
watch: {
background_style: function (v) {
this.background = v;
if (this.background.image_at == true) {
this.activeTab = "이미지";
} else {
this.activeTab = "색상";
}
},
},
mounted() {
if (this.background.image_at == true) {
this.activeTab = "이미지";
} else {
this.activeTab = "색상";
}
},
};
</script>