png颜色处理

src/components/maskedbox/iconSize.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+const props = defineProps({
+    num: {
+        type: Number,
+        required: true
+    },
+})
+const lineNum: any = ref()
+
+watch(() => props.num, (newValue) => {
+    if (newValue) {
+        lineNum.value = newValue;
+    }
+}, { immediate: true, deep: true })
+
+const emit = defineEmits(['update:num', 'childEvent']);
+function numberChange(params: any) {
+    const arr = params
+    emit('update:num', arr);
+}
+
+function selectIcon() {
+    emit('childEvent');
+}
+</script>
+
+<template>
+    <div>
+        <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" @click="selectIcon">
+                <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="lineNum" :min="1" size="small" controls-position="right"
+                    @input="numberChange" />
+            </div>
+            <div class="card_slider">
+                <div style="width: 100%;flex: none;">
+                    <el-slider v-model="lineNum" size="small" @input="numberChange" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.images_card {
+    margin-right: 5px;
+    flex: none;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+    background-color: rgb(243, 243, 248);
+    border-radius: 4px;
+}
+
+.card_number :deep(.el-input-number__decrease),
+.card_number :depp(.el-input-number__increase) {
+    width: 20px;
+}
+
+.card_slider {
+    flex: 1;
+}
+
+.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;
+}
+</style>

src/components/widgets/SceneButton.vue

@@ -1,19 +1,38 @@
 <template>
     <div class="center_in">
-        <div class="card_btn center_in" :style="{ width: config.css.width + 'px', height: config.css.height + 'px' }">
+        <div class="card_btn center_in" :style="{ width: btndata.css.width + 'px', height: btndata.css.height + 'px' }">
             <div class="bg_item_btn center_in">
-                <el-icon :size="config.config.size" :color="config.css.iconColor">
+                <!-- <el-icon :size="config.config.size" :color="config.css.iconColor">
                     <BellFilled />
-                </el-icon>
+                </el-icon> -->
+                <div class="icon_card_btn"
+                    :style="{ width: btndata.config.size + 'px', height: btndata.config.size + 'px', }">
+                    <el-image class="images_icon"
+                        :style="{ width: btndata.config.size + 'px', height: btndata.config.size + 'px', left: '-' + btndata.config.size + 'px', filter: 'drop-shadow(' + btndata.config.size + 'px 0 0 ' + btndata.css.iconColor + ')' }"
+                        :src="getAssetsImages(btndata.config.img)" fit="contain" />
+                </div>
             </div>
-            <div>{{ config.name }}</div>
+            <div>{{ btndata.name }}</div>
         </div>
     </div>
 </template>
   
 <script lang="ts" setup>
-import { defineProps } from "vue";
-defineProps(["config", "sendSon"])
+import { defineProps, watch, ref } from "vue";
+const props = defineProps(["config", "sendSon"])
+
+const btndata: any = ref({})
+function getAssetsImages(name) {
+    var arr = '../../assets/iconData/' + name + '.png'
+    return new URL(`${arr}`, import.meta.url).href;
+}
+
+watch(() => props.config, (newValue) => {
+    console.log(newValue, 889);
+    if (newValue) {
+        btndata.value = newValue
+    }
+}, { immediate: true, deep: true })
 </script>
  
 <style lang="scss" scoped>
@@ -30,4 +49,16 @@ defineProps(["config", "sendSon"])
     border-radius: 50%;
     background-color: rgba(21, 140, 251, 0.1);
 }
+
+.icon_card_btn {
+    overflow: hidden;
+    position: relative;
+}
+
+.images_icon {
+    position: relative;
+    // left: -30px;
+    // -webkit-filter: drop-shadow(30px 0 0 rgba(21, 140, 251, 1));
+    // filter: drop-shadow(30px 0 0 rgba(21, 140, 251, 1));
+}
 </style>

src/module/config/button.ts

@@ -3,6 +3,7 @@ const btnConfig = {
     type: 1,
     name: '文本',
     size: 30,
+    img: 'set',
     lineNum: null,
     isResizable: true, //禁止缩放
     // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],

src/style.css

@@ -88,4 +88,9 @@ body,
         font-size: 12px;
         margin: 1px;
     }
-}
+}
+
+.w_60_index {
+    width: 60px !important;
+    margin-right: 5px;
+}

src/views/HomeView.vue

@@ -97,7 +97,7 @@
       <div class="panel_right">
         <!-- 样式编辑控件 -->
         <div class="card_maskedbox">
-          <maskedbox :config="currentMove"></maskedbox>
+          <maskedbox :config="currentMove" @childEvent="childEvent"></maskedbox>
         </div>
         {{ currentMove }}
         <!-- <div class="tabs_radio center_in" v-if="tabPosition == 'style'">
@@ -123,6 +123,10 @@
       </div>
     </div>
   </div>
+  <!-- 图标抽屉 -->
+  <el-drawer v-model="drawer" title="选择图标" direction="rtl">
+    <span @click="getIconSelection('equal')">Hi, there!</span>
+  </el-drawer>
 </template>
 
 <script lang="ts" setup>
@@ -137,6 +141,8 @@ import { ref, computed } from "vue";
 import { useRouter } from 'vue-router'
 import { ElMessageBox } from 'element-plus'
 
+// 图标弹窗
+const drawer = ref(false)
 // const tabPosition = ref<string>('style');
 const activeName = ref<string>('bank');
 // 默认选择组件库
@@ -340,6 +346,15 @@ function alignment(params: any) {
   }
   console.log(extraImgs1.value, 5);
 }
+// 选择图标抽屉
+function childEvent() {
+  drawer.value = true
+}
+// 选择图标
+function getIconSelection(params:any) {
+  console.log(params,currentMove,222);
+  
+}
 </script>
 
 <style lang="scss" scoped>
@@ -694,4 +709,5 @@ img {
 
 .Bzuil {
   height: 100%;
-}</style>
+}
+</style>

src/views/maskedbox.vue

@@ -79,20 +79,7 @@
             </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>
+            <iconSize v-model:num="config.config.size" @childEvent="childEvent"></iconSize>
             <colorSelection v-model:iconColor="config.css.iconColor" title="选择颜色"></colorSelection>
             <textAlignment v-model:align="config.css.textAlign"></textAlignment>
             <lineNumber v-model:num="config.config.lineNum"></lineNumber>
@@ -104,6 +91,7 @@
 import { ref, watch } from "vue";
 import color from 'color';
 import layout from '../components/maskedbox/layout.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';
@@ -181,7 +169,11 @@ const colorNum = (value: any) => {
         return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
 }
-
+const emit = defineEmits(['childEvent'])
+// 选择图标抽屉
+function childEvent() {
+    emit('childEvent');
+}
 watch(() => props.config, (newValue) => {
     if (newValue.css) {
         // 初始化hex颜色
@@ -226,11 +218,6 @@ watch(() => props.config, (newValue) => {
     border-radius: 4px;
 }
 
-.w_60_index {
-    width: 60px !important;
-    margin-right: 5px;
-}
-
 .card_slider :deep(.el-slider__button-wrapper) {
     top: -17px;
 }
@@ -248,22 +235,4 @@ watch(() => props.config, (newValue) => {
     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>