|
|
@@ -25,8 +25,8 @@
|
|
|
<ArrowDown />
|
|
|
</el-icon>
|
|
|
</div>
|
|
|
- <div v-if="basicFlag" style="padding: 9px 0px 4px 18px;">
|
|
|
- <div class="same_row_in" style="padding: 9px 0px;">
|
|
|
+ <div v-if="basicFlag" class="card_second_level">
|
|
|
+ <div class="same_row_in upAndDown_padding">
|
|
|
<span class="title_12 w_60 default_size">尺寸</span>
|
|
|
<div class="grey_input_bgc">
|
|
|
<el-input-number class="card_number" v-model="config.css.width" :min="1" size="small"
|
|
|
@@ -47,22 +47,97 @@
|
|
|
<span>H</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
-
|
|
|
+ <div class="same_row_in upAndDown_padding" v-if="config.config.size">
|
|
|
+ <span class="title_12 w_60 default_size" style="flex: none;">层级</span>
|
|
|
+ <div class="grey_input_bgc w_60_index">
|
|
|
+ <el-input-number class="card_number" v-model="config.config.size" :min="1" size="small"
|
|
|
+ controls-position="right" />
|
|
|
+ </div>
|
|
|
+ <div class="card_slider" style="width: 100%;">
|
|
|
+ <el-slider v-model="config.config.size" size="small" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="same_row_in upAndDown_padding">
|
|
|
+ <span class="title_12 w_60 default_size" style="flex: none;">颜色</span>
|
|
|
+ <el-color-picker v-model="config.css.iconColor" show-alpha @change="handleColorChange" />
|
|
|
+ <div class="leftmargin_8">
|
|
|
+ <el-input v-model="hexColor" size="small">
|
|
|
+ <template #prefix>
|
|
|
+ <i style="margin-right: 0px;">#</i>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="grey_input_bgc leftmargin_8">
|
|
|
+ <el-input-number class="card_number" v-model="alpha" :min="0" :max="1" :step="0.1" size="small"
|
|
|
+ controls-position="right" @change="colorNum" />
|
|
|
+ <span>A</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="same_row_in upAndDown_padding">
|
|
|
+ <span class="title_12 w_60 default_size" style="flex: none;">字体</span>
|
|
|
+ <div class="grey_input_bgc w_60_index">
|
|
|
+ <el-input-number class="card_number" v-model="config.config.size" :min="1" size="small"
|
|
|
+ controls-position="right" />
|
|
|
+ </div>
|
|
|
+ <div class="card_select_bg" style="width: 100%;">
|
|
|
+ <el-select v-model="config.css.fontWeight" placeholder="Select" size="small">
|
|
|
+ <el-option v-for="item in fontWeightData" :key="item.value" :label="item.label"
|
|
|
+ :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <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="imgFlag ? '' : 'putAway'" @click="getbasicSetting('img')">
|
|
|
+ <ArrowDown />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <div v-if="imgFlag" class="card_second_level">
|
|
|
+ <div class="same_row_in upAndDown_padding">
|
|
|
+ <span class="title_12 w_60 default_size" style="flex: none;">大小</span>
|
|
|
+ <div class="images_card center_in">
|
|
|
+ <el-image style="width: 16px; height: 16px"
|
|
|
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
|
|
|
+ </div>
|
|
|
+ <div class="grey_input_bgc w_60_index">
|
|
|
+ <el-input-number class="card_number" v-model="config.config.size" :min="1" size="small"
|
|
|
+ controls-position="right" />
|
|
|
+ </div>
|
|
|
+ <div class="card_slider" style="width: 100%;">
|
|
|
+ <el-slider v-model="config.config.size" size="small" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <colorSelection :iconColor="config.css.iconColor" title="选择颜色"></colorSelection>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from "vue";
|
|
|
+import { ref, watch } from "vue";
|
|
|
+import color from 'color';
|
|
|
+import colorSelection from '../components/maskedbox/colorSelection.vue';
|
|
|
+
|
|
|
const props = defineProps({
|
|
|
config: {
|
|
|
type: Object,
|
|
|
required: true
|
|
|
},
|
|
|
})
|
|
|
+const fontWeightData = [{
|
|
|
+ label: '细体',
|
|
|
+ value: 300,
|
|
|
+}, {
|
|
|
+ label: '常规',
|
|
|
+ value: 400,
|
|
|
+}, {
|
|
|
+ label: '粗体',
|
|
|
+ value: 500,
|
|
|
+}]
|
|
|
const basicFlag = ref(true)
|
|
|
+const imgFlag = ref(true)
|
|
|
const lockFlag = ref(true)
|
|
|
function getbasicSetting(params: any) {
|
|
|
console.log();
|
|
|
@@ -72,6 +147,12 @@ function getbasicSetting(params: any) {
|
|
|
} else {
|
|
|
basicFlag.value = true
|
|
|
}
|
|
|
+ } else if (params == 'img') {
|
|
|
+ if (imgFlag.value) {
|
|
|
+ imgFlag.value = false
|
|
|
+ } else {
|
|
|
+ imgFlag.value = true
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
function getLock(params: any) {
|
|
|
@@ -81,7 +162,44 @@ function getLock(params: any) {
|
|
|
lockFlag.value = true
|
|
|
}
|
|
|
}
|
|
|
-console.log(props.config, 888)
|
|
|
+
|
|
|
+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 colorNum = (value: any) => {
|
|
|
+ const rgbaStr = props.config.css.iconColor;
|
|
|
+ const newAlpha = value;
|
|
|
+ props.config.css.iconColor = adjustAlpha(rgbaStr, newAlpha);
|
|
|
+
|
|
|
+ function adjustAlpha(rgbaStr: string, alpha: number): string {
|
|
|
+ const match = rgbaStr.match(/^rgba\((\d+), (\d+), (\d+), ([^\)]+)\)$/);
|
|
|
+ if (!match) {
|
|
|
+ throw new Error('Invalid RGBA string');
|
|
|
+ }
|
|
|
+ const [r, g, b] = [match[1], match[2], match[3]].map(Number);
|
|
|
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+watch(() => props.config, (newValue) => {
|
|
|
+ if (newValue.css) {
|
|
|
+ // 初始化hex颜色
|
|
|
+ hexColor.value = handleColorChange(newValue.css.iconColor)
|
|
|
+ }
|
|
|
+}, { immediate: true, deep: true })
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -89,6 +207,10 @@ console.log(props.config, 888)
|
|
|
padding: 7px 0px 4px;
|
|
|
}
|
|
|
|
|
|
+.card_second_level {
|
|
|
+ padding: 9px 0px 4px 18px;
|
|
|
+}
|
|
|
+
|
|
|
.dpjis {
|
|
|
width: 159px;
|
|
|
height: 100px;
|
|
|
@@ -139,17 +261,51 @@ console.log(props.config, 888)
|
|
|
width: 30px;
|
|
|
}
|
|
|
|
|
|
-.grey_input_bgc {
|
|
|
- width: 85px;
|
|
|
+
|
|
|
+.card_select_bg {
|
|
|
background-color: #f1f1f7;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
padding: 2px;
|
|
|
border-radius: 4px;
|
|
|
+}
|
|
|
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- margin: 1px;
|
|
|
- }
|
|
|
+.w_60_index {
|
|
|
+ width: 60px !important;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.card_slider :deep(.el-slider__button-wrapper) {
|
|
|
+ top: -17px;
|
|
|
+}
|
|
|
+
|
|
|
+.card_slider :deep(.el-slider__runway) {
|
|
|
+ height: 4px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.card_slider :deep(.el-slider__bar) {
|
|
|
+ height: 4px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.card_slider :deep(.el-slider__button) {
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+.cKnghd {
|
|
|
+ flex: none;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+ width: 46px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.images_card {
|
|
|
+ margin-right: 5px;
|
|
|
+ flex: none;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: rgb(243, 243, 248);
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
</style>
|
qianduan