发布,增加自定义组件炫彩文字

GoEasyDesigner/frontend/public/自定义组件/ColorfulText/ColorfulText.js

@@ -0,0 +1,18 @@
+
+export default {
+    top: "150",
+    left: "440",
+    width: "400",
+    height: "80",
+    no_place: true,
+    visible: true,
+    disable: false,
+    zIndex: 0,
+    customListening:true,
+
+    fontSize: "48px",
+    data:{
+        title: "Go Easy Designer",
+    },
+    html:""
+}

GoEasyDesigner/frontend/public/自定义组件/ColorfulText/ColorfulText.vue

@@ -0,0 +1,107 @@
+<template>
+
+
+  <div class="relative h-[100%] w-[100%] overflow-hidden rounded-xl" >
+    <span class="all-gpts inherited-styles-for-exported-element" v-html="item.data.title" :style="{
+    fontSize: item.fontSize,
+  }"></span>
+
+  </div>
+
+
+
+</template>
+<style scoped>
+
+
+@keyframes text-gradient {
+  0% {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: 200% 0;
+  }
+}
+
+*, ::after, ::before {
+  border: 0 solid #e5e7eb;
+  box-sizing: border-box;
+}
+
+.inherited-styles-for-exported-element {
+  color: transparent;
+  cursor: default;
+  //font-family: Lexend, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "segoe ui", "helvetica neue", Arial, "noto sans", "apple color emoji", "segoe ui emoji", "segoe ui symbol", "noto color emoji";
+  //font-size: 2.25rem;
+  //font-weight: 700;
+  letter-spacing: -.02em;
+  line-height: 1.1;
+  tab-size: 4;
+}
+
+* ::-webkit-scrollbar {
+  width: 10px;
+}
+
+* ::-webkit-scrollbar-track {
+  background-color: #fff;
+}
+
+* ::-webkit-scrollbar-thumb {
+  background-color: #ddd6fe;
+}
+
+:disabled {
+  cursor: default;
+}
+
+@media (min-width: 768px) {
+  .inherited-styles-for-exported-element {
+    font-size: 3rem;
+    text-align: center;
+  }
+}
+
+@media (min-width: 1280px) {
+  .inherited-styles-for-exported-element {
+    font-size: 3.75rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .inherited-styles-for-exported-element {
+    font-size: 4.5rem;
+  }
+}
+
+* ::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}
+
+.all-gpts {
+  animation: text-gradient 2s linear infinite;
+  animation-range-end: normal;
+  animation-range-start: normal;
+  animation-timeline: auto;
+  background-clip: text;
+  background-image: linear-gradient(90deg, #fb7185, #d946ef, #6366f1, #d946ef, #fb7185), linear-gradient(90deg, #fb7185, #d946ef, #6366f1, #d946ef, #fb7185);
+  background-size: 200% 100%;
+}
+</style>
+
+<script setup>
+import {defineEmits, defineProps} from "vue";
+
+const {item} = defineProps(['item'])
+console.log("自定义组件数据", item);
+const emits = defineEmits(["CustomEvent"]);
+console.log("自定义组件事件", emits);
+
+function onSendEvent(name, data) {
+  console.log("自定义组件", name, "发送数据", item.data);
+  emits("CustomEvent", name, data);
+}
+
+
+</script>

GoEasyDesigner/frontend/public/自定义组件/ColorfulText/ColorfulTextAttr.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-form
+      label-position="left"
+      label-width="100px"
+      style="max-width: 460px"
+  >
+    <el-form-item label="标题">
+      <el-input v-model="item.data.title"/>
+    </el-form-item>
+  </el-form>
+  <teleport to="#事件选择器">
+    <component is="common-event-component" :item="item" :eventName="eventName"/>
+  </teleport>
+</template>
+<script setup>
+import {defineEmits, defineProps, ref} from "vue";
+
+const emits = defineEmits(["添加事件被选择"]); // 声明接受的事件
+const {item} = defineProps(['item']);
+
+let eventName = ref([
+  {"label": "自定义事件", "value": "自定义事件", "ext_data": "自定义事件(事件名称,事件数据)"},
+  {"label": "被单击", "value": "click"},
+  {"label": "鼠标左键被按下", "value": "mousedown"},
+  {"label": "鼠标左键被放开", "value": "mouseup"},
+  {"label": "被双击", "value": "dblclick"},
+  {"label": "鼠标右键被按下", "value": "contextmenu"},
+  {"label": "鼠标位置被移动", "value": "mousemove"},
+  {"label": "获得焦点", "value": "focus"},
+  {"label": "失去焦点", "value": "blur"},
+  {"label": "按下某键", "value": "keydown"},
+  {"label": "放开某键", "value": "keyup"},
+  {"label": "滚轮被滚动", "value": "mousewheel"}
+])
+</script>
+

GoEasyDesigner/frontend/src/main.js

@@ -64,6 +64,12 @@ let 自定义组件名称列表 = []
     组件默认属性: "./自定义组件/TimeProgressBar/TimeProgressBar.js",
     组件属性框: "./自定义组件/TimeProgressBar/TimeProgressBarAttr.vue",
 })
+自定义组件名称列表.push({
+    componentName: "ColorfulText",
+    组件路径: "./自定义组件/ColorfulText/ColorfulText.vue",
+    组件默认属性: "./自定义组件/ColorfulText/ColorfulText.js",
+    组件属性框: "./自定义组件/ColorfulText/ColorfulTextAttr.vue",
+})
 console.log("自定义组件名称列表", JSON.stringify(自定义组件名称列表))
 app.config.globalProperties.自定义组件名称列表 = 自定义组件名称列表