142 lines
4.1 KiB
Vue
142 lines
4.1 KiB
Vue
<template>
|
|
<div class="my-textTools">
|
|
<input class="color" type="color" ref="colorInput" @change="changeColor" />
|
|
<div class="interval"></div>
|
|
<div class="fontFamily">
|
|
<my-select v-model="textStyle['--font-family']" @change="changeFontFamily" :list="fontFamilyList[locale]" />
|
|
</div>
|
|
<div class="interval"></div>
|
|
<div class="size">
|
|
<div class="label" @click="changeFontSize(-1)">
|
|
-
|
|
</div>
|
|
<div class="value">{{ parseInt(props.textStyle?.['--font-size']) }}</div>
|
|
<div class="label" @click="changeFontSize(1)">
|
|
+
|
|
</div>
|
|
</div>
|
|
<div class="interval"></div>
|
|
<div class="fontStyle">
|
|
<div class="label" @click="changeFontStyle('--font-weight',['bold','normal'])" :class="{'active': props.textStyle['--font-weight'] === 'bold'}">
|
|
<svg-icon name="textToolsweight" size="12" size-unit="px" color="#000" />
|
|
</div>
|
|
<div class="label" @click="changeFontStyle('--font-style',['italic','normal'])" :class="{'active': props.textStyle['--font-style'] === 'italic'}">
|
|
<svg-icon name="textToolsStyle" size="12" size-unit="px" color="#000" />
|
|
</div>
|
|
<div class="label" @click="changeFontStyle('--font-decoration',['underline','none'])" :class="{'active': props.textStyle['--font-decoration'] === 'underline'}">
|
|
<svg-icon name="textToolsDecoration" size="12" size-unit="px" color="#000" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref, markRaw, onMounted } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
const emit = defineEmits(['update:textStyle'])
|
|
const { locale } = useI18n()
|
|
const fontFamilyList = ref({
|
|
ENGLISH: [
|
|
{ value:'Medium',label:'Medium' },
|
|
{ value:'Arial',label:'Arial' },
|
|
{ value:'Helvetica',label:'Helvetica' },
|
|
{ value:'Times New Roman',label:'Times New Roman' },
|
|
{ value:'Georgia',label:'Georgia' },
|
|
{ value:'Verdana',label:'Verdana' },
|
|
{ value:'Courier New',label:'Courier New' },
|
|
{ value:'Lucida Console',label:'Lucida Console' },
|
|
{ value:'General Sans',label:'General Sans' },
|
|
{ value:'Inter',label:'Inter' },
|
|
],
|
|
CHINESE_SIMPLIFIED: [
|
|
{ value:'Medium',label:'Medium' },
|
|
{ value:'微软雅黑',label:'微软雅黑' },
|
|
{ value:'宋体',label:'宋体' },
|
|
{ value:'黑体',label:'黑体' },
|
|
{ value:'仿宋',label:'仿宋' },
|
|
{ value:'楷体',label:'楷体' },
|
|
{ value:'苹方',label:'苹方' },
|
|
{ value:'华文黑体',label:'华文黑体' },
|
|
{ value:'华文宋体',label:'华文宋体' },
|
|
{ value:'华文楷体',label:'华文楷体' },
|
|
{ value:'思源黑体',label:'思源黑体' },
|
|
{ value:'MiSans',label:'MiSans' },
|
|
]
|
|
})
|
|
const props = defineProps({
|
|
textStyle: { type: Object },
|
|
})
|
|
const changeFontFamily = (val: string) => {
|
|
props.textStyle['--font-family'] = val
|
|
onChange()
|
|
}
|
|
const changeColor = (e: Event) => {
|
|
const target = e.target as HTMLInputElement
|
|
props.textStyle['--font-color'] = target.value
|
|
onChange()
|
|
}
|
|
const changeFontSize = (val: number) => {
|
|
if (parseInt(props.textStyle?.['--font-size']) + val <= 9 || parseInt(props.textStyle?.['--font-size']) + val >= 51) {
|
|
return
|
|
}
|
|
props.textStyle['--font-size'] = parseInt(props.textStyle?.['--font-size']) + val + 'px'
|
|
onChange()
|
|
}
|
|
const changeFontStyle = (key: string,value: string[]) => {
|
|
props.textStyle[key] = props.textStyle[key] === value[0] ? value[1] : value[0]
|
|
onChange()
|
|
}
|
|
const onChange = () => {
|
|
emit('update:textStyle', props.textStyle)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.my-textTools {
|
|
height: 100%;
|
|
display: flex;
|
|
padding: 6px 19px;
|
|
align-items: center;
|
|
.interval{
|
|
margin: 0 16px;
|
|
height: 25px;
|
|
width: 1px;
|
|
background-color: #EBEBEB;
|
|
}
|
|
.label{
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
&:hover{
|
|
background-color: #e5e5e5;
|
|
}
|
|
&.active{
|
|
background-color: #e5e5e5;
|
|
}
|
|
}
|
|
.fontFamily{
|
|
width: 103px;
|
|
|
|
}
|
|
.color{
|
|
width: 55px;
|
|
height: 25px;
|
|
}
|
|
.size{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
.fontStyle{
|
|
display: flex;
|
|
gap: 16px;
|
|
|
|
}
|
|
}
|
|
</style>
|