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="mb10">
<div class="flex align-center">
<div class="flex50 pd0">
<select class="full-select" v-model="border.border_style">
<option value="none">없음</option>
<option v-for="(item, indx) in cellList" :key="indx" :value="item.codeNm">
<!-- <span :class="['option-img', item.codeNm]"></span> -->
{{ item.codeNm }}
</option>
</select>
</div>
</div>
</li>
<li class="mb10">
<div class="font-size flex justify-between align-center">
<div v-for="(item, idx) in borderStyles" :key="idx" class="flex justify-between flex50 align-center mt5 no-gutter pl0">
<span class="flex20">
<img :src="item.src" alt="" class="content-box">
</span>
<div class="flex75">
<input type="text" class="full-input " v-model="border.border_item[idx].border_width" >
<!-- v-model="border.border_item[0].border_width"> -->
</div>
</div>
</div>
</li>
<li class="mb10">
<div class="font-size flex justify-between align-center">
<div class="flex justify-between flex50 align-center mt5 no-gutter pl0">
<span class="flex20"><img src="../../../resources/img/icon/lt.png" alt=""
class="content-box"></span>
<div class="flex75"><input type="text" class="full-input " v-model="border.border_item[0].border_radius">
</div>
</div>
<div class="flex justify-between flex50 align-center mt5 no-gutter pr0">
<div class="flex75"><input type="text" class="full-input " v-model="border.border_item[1].border_radius">
</div>
<span class="flex20"><img src="../../../resources/img/icon/rt.png" alt=""
class="content-box"></span>
</div>
<div class="flex justify-between flex50 align-center mt5 no-gutter pl0">
<span class="flex20"><img src="../../../resources/img/icon/lb.png" alt=""
class="content-box"></span>
<div class="flex75"><input type="text" name="" id="" class="full-input " v-model="border.border_item[2].border_radius">
</div>
</div>
<div class="flex justify-between flex50 align-center mt5 no-gutter pr0">
<div class="flex75"><input type="text" name="" id="" class="full-input " v-model="border.border_item[3].border_radius">
</div>
<span class="flex20"><img src="../../../resources/img/icon/rb.png" alt=""
class="content-box"></span>
</div>
</div>
</li>
<li class="mb10">
<input type="color" class="color-picker" v-model="border.border_color" />
</li>
</ul>
</div>
</template>
<script>
import { Background } from '@vue-flow/background';
export default {
props: {
borderStyle: {
type: Object,
default: null
},
},
data() {
return {
border : this.borderStyle
,cellWidth: 1,
cellRound: 0,
cellSelectedColor: "#333333",
cellIsColorChanged: false,
fontColorList: [],
cellColorList: [],
cellList: [],
borderStyles: [
{ src: require("../../../resources/img/icon/top.png"), name: "top" },
{ src: require("../../../resources/img/icon/right.png"), name: "right" },
{ src: require("../../../resources/img/icon/left.png"), name: "left" },
{ src: require("../../../resources/img/icon/bottom.png"), name: "bottom" },
]
}
},
methods: {
// addColorToList(type) {
// if (type === 'font') {
// this.fontColorList.push(this.fontSelectedColor);
// } else if (type === 'cell') {
// this.cellColorList.push(this.cellSelectedColor);
// }
// },
initCode: async function () {
this.cellList = await this.$getCommonCode('CELL_STYLE');
}
},
watch: {
borderStyle : function(v){
this.border = v;
}
},
computed: {
},
components: {
},
mounted() {
this.initCode();
}
}
</script>