baozhida-hardware-development/src/views/maskedbox.vue

<!-- 样式编辑控件 -->
<template>
    <layout v-if="config.config.fixedWidth && config.config.fixedHeight" v-model:configData="config.config"
        v-model:cssData="config.css"></layout>
    <div class="box_padding" v-if="config.css">
        <div class="same_row_in">
            <span class="default_size title_5">基础设置</span>
            <el-icon style="cursor: pointer;" :class="basicFlag ? '' : 'putAway'" @click="getbasicSetting('basic')">
                <ArrowDown />
            </el-icon>
        </div>
        <div v-if="basicFlag" class="card_second_level">
            <digitalSlider v-if="config.config.size" v-model:num="config.config.size" title="层级"></digitalSlider>
            <patternMode v-if="config.config.pictureMode" v-model:mode="config.config.pictureMode"></patternMode>
            <literalName v-if="'name' in config.config" v-model:name="config.config.name"></literalName>
            <boxSize v-if="config.css.width && config.css.height != 'auto' && config.css.height && config.config.resizable"
                v-model:width="config.css.width" v-model:height="config.css.height"></boxSize>
            <colorSelection v-if="config.css.color" v-model:iconColor="config.css.color" title="颜色"></colorSelection>
            <colorSelection v-if="config.css.colorOpen" v-model:iconColor="config.css.colorOpen" title="颜色(开)">
            </colorSelection>
            <colorSelection v-if="config.css.colorClose" v-model:iconColor="config.css.colorClose" title="颜色(关)">
            </colorSelection>
            <colorSelection v-if="config.css.backgroundColor" v-model:iconColor="config.css.backgroundColor" title="颜色">
            </colorSelection>
            <digitalSlider v-if="'borderRadius' in config.css" v-model:num="config.css.borderRadius" title="圆角">
            </digitalSlider>
            <fontSize v-if="config.css.fontSize && config.css.fontWeight" v-model:fontSize="config.css.fontSize"
                v-model:fontWeight="config.css.fontWeight"></fontSize>
            <textAlignment v-if="config.css.textAlign" v-model:align="config.css.textAlign"></textAlignment>
            <lineNumber v-if="'lineNum' in config.config" v-model:num="config.config.lineNum"></lineNumber>
            <digitalSlider v-if="'opacity' in config.css" v-model:num="config.css.opacity" :min="0" :max="1" :step="0.1"
                title="透明度">
            </digitalSlider>
            <digitalSlider v-if="'textWidth' in config.css" v-model:num="config.css.textWidth" title="宽度"></digitalSlider>
        </div>
    </div>
    <div class="box_padding" v-if="config.config.img">
        <div class="same_row_in">
            <span class="default_size title_5">图标</span>
            <el-icon style="cursor: pointer;" :class="imgFlag ? '' : 'putAway'" @click="getbasicSetting('img')">
                <ArrowDown />
            </el-icon>
        </div>
        <div v-if="imgFlag" class="card_second_level">
            <fontSize v-if="'fontSize' in config.css && 'fontWeight' in config.css" v-model:fontSize="config.css.fontSize"
                v-model:fontWeight="config.css.fontWeight"></fontSize>
            <iconSize v-if="'iconSize' in config.css && 'img' in config.config" v-model:num="config.css.iconSize"
                v-model:iconName="config.config.img" @mousedown.stop @childEvent="childEvent"></iconSize>
            <colorSelection v-if="'iconColor' in config.css" v-model:iconColor="config.css.iconColor" title="选择颜色">
            </colorSelection>
        </div>
    </div>
    <div class="box_padding" v-if="'picture' in config.config">
        <div class="same_row_in">
            <span class="default_size title_5">图库</span>
        </div>
        <div style="padding: 18px 0px 13px;">
            <photoGallery></photoGallery>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import color from 'color';
import layout from '../components/maskedbox/layout.vue';
import patternMode from '../components/maskedbox/pattern.vue';
import literalName from '../components/maskedbox/literalName.vue';
import boxSize from '../components/maskedbox/boxSize.vue';
import fontSize from '../components/maskedbox/fontSize.vue';
import iconSize from '../components/maskedbox/iconSize.vue';
import colorSelection from '../components/maskedbox/colorSelection.vue';
import textAlignment from '../components/maskedbox/textAlignment.vue';
import lineNumber from '../components/maskedbox/lineNumber.vue';
import digitalSlider from '../components/maskedbox/digitalSlider.vue';
import photoGallery from '../components/maskedbox/photoGallery.vue';

const props = defineProps({
    config: {
        type: Object,
        required: true
    },
})

const basicFlag = ref(true)
const imgFlag = ref(true)
const backgroundFlag = ref(true)
function getbasicSetting(params: any) {
    if (params == 'basic') {
        if (basicFlag.value) {
            basicFlag.value = false
        } else {
            basicFlag.value = true
        }
    } else if (params == 'img') {
        if (imgFlag.value) {
            imgFlag.value = false
        } else {
            imgFlag.value = true
        }
    } else if (params == 'background') {
        if (backgroundFlag.value) {
            backgroundFlag.value = false
        } else {
            backgroundFlag.value = true
        }
    }
}

const alpha = ref(1);
const hexColor = ref('');
// rgba hex颜色格式化
const handleColorChange = (rgbaStr) => {
    const hex = color(rgbaStr).hex();
    const alpha1 = color(rgbaStr).alpha();

    const arrColor = removeChar(hex, "#");
    return arrColor
    alpha.value = alpha1

    function removeChar(str: string, charToRemove: string): string {
        return str.replace(new RegExp(charToRemove, 'g'), '');
    }
};

const emit = defineEmits(['childEvent', 'updateValue'])
// 选择图标抽屉
function childEvent() {
    emit('childEvent');
}
watch(() => props.config, (newValue) => {
    if (newValue.css) {
        // 初始化hex颜色
        hexColor.value = handleColorChange(newValue.css.iconColor)
        emit('updateValue', newValue);
    }
}, { immediate: true, deep: true })
</script>

<style lang="scss" scoped>
.box_padding {
    padding: 7px 0px 4px;
}

.card_second_level {
    padding: 9px 0px 4px 18px;
}

.putAway {
    transform: rotate(180deg);
}

:deep(.el-input-number.is-controls-right .el-input__wrapper) {
    padding-left: 5px;
    padding-right: 30px;
}

.card_select_bg {
    background-color: #f1f1f7;
    padding: 2px;
    border-radius: 4px;
}
</style>