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">
<div class="flex60 pd0">
<select class="full-select" v-model="fontStyle.font">
<option v-for="(item, indx) in fontList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm
}}</option>
</select>
</div>
<div class="flex40">
<div class="font-size flex justify-start align-center no-gutter">
<div class="down flex20">
<button @click="down">-</button>
</div>
<div class="flex55">
<input type="text" class="size-input full-input" v-model="fontStyle.font_size">
</div>
<div class="up flex20">
<button @click="up">+</button>
</div>
</div>
</div>
</div>
</li> -->
<li class="mb10">
<div class="flex align-center">
<div v-for="(style, idx) in fontStyleList" :key="idx" class="check-group ml5">
<input type="checkbox" name="" :id="style.name" class="style-input">
<label :for="style.name" class="style-label">
<svg-icon type="mdi" :path="style.iconPath"></svg-icon>
</label>
</div>
</div>
</li>
<li class="mb10">
<div class="flex align-center">
<div v-for="(HorSort, idx) in fontHorSort" :key="idx" class="check-group ml5">
<input type="radio" name="horizontalAlign" :id="HorSort.name" class="style-input">
<label :for="HorSort.name" class="style-label">
<svg-icon type="mdi" :path="HorSort.iconPath"></svg-icon>
</label>
</div>
</div>
</li>
<li class="mb10">
<div class="flex align-center">
<div v-for="(verSort, idx) in fontVerSort" :key="idx" class="check-group ml5">
<input type="radio" name="verticalAlign" :id="verSort.name" class="style-input">
<label :for="verSort.name" class="style-label">
<svg-icon type="mdi" :path="verSort.iconPath"></svg-icon>
</label>
</div>
</div>
</li>
<li class="mb10">
<input type="color" name="" id="" class="color-picker flex align-center" v-model="fontSelectedColor" />
</li>
</ul>
</div>
</template>
<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiFormatBold, mdiFormatItalic, mdiFormatUnderline, mdiFormatStrikethroughVariant, mdiFormatAlignLeft, mdiFormatAlignCenter, mdiFormatAlignRight, mdiFormatAlignTop, mdiFormatAlignMiddle, mdiFormatAlignBottom } from '@mdi/js';
export default {
props: {
fontStyle: {
type: Object,
default: null
},
},
data() {
return {
fontStyleList: [
{ iconPath: mdiFormatBold, active: false, name: 'bold' },
{ iconPath: mdiFormatItalic, active: false, name: 'italic' },
{ iconPath: mdiFormatUnderline, active: false, name: 'underline' },
{ iconPath: mdiFormatStrikethroughVariant, active: false, name: 'centerline' },
],
fontHorSort: [
{ iconPath: mdiFormatAlignLeft, active: false, name: 'left' },
{ iconPath: mdiFormatAlignCenter, active: false, name: 'center' },
{ iconPath: mdiFormatAlignRight, active: false, name: 'right' },
],
fontVerSort: [
{ iconPath: mdiFormatAlignTop, active: false, name: 'top' },
{ iconPath: mdiFormatAlignMiddle, active: false, name: 'middle' },
{ iconPath: mdiFormatAlignBottom, active: false, name: 'bottom' },
],
fontSize: 16,
fontSelectedColor: '#333333',
fontIsColorChanged: false,
fontColorList: [],
fontList: []
}
},
methods: {
up: function () {
this.fontSize += 1;
},
down: function () {
this.fontSize -= 1;
},
},
watch: {
},
computed: {
},
components: {
'SvgIcon': SvgIcon
},
mounted() {
}
}
</script>