发布加入时间进度条组件

GoEasyDesigner/app.go

@@ -31,6 +31,7 @@ func NewApp() *App {
 	go func() {
 		a.文件监视.E开始()
 	}()
+
 	return a
 }
 

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

@@ -0,0 +1,16 @@
+export default {
+    top: "0",
+    left: "0",
+    width: "200",
+    height: "30",
+    noPlace: true,
+
+    visible: true,
+    disable: false,
+    size: "custom",
+    zIndex: 0,
+    min: 0,
+    max: 100,
+    step: 1,
+    n: 0,
+}

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

@@ -0,0 +1,41 @@
+<template>
+  <el-slider
+      :style="item.size=='custom'"
+      style="width: 80%;margin:0px 20px"
+      v-model="item.n"
+      :size="item.size=='custom' ?'':item.size"
+      :min="item.min"
+      :max="item.max"
+      :step="item.step"
+      :format-tooltip="formatTooltip"
+  />
+  <el-button>abv</el-button>
+
+</template>
+
+<script setup>
+import {defineEmits, defineProps} from "vue";
+
+const {item} = defineProps(['item'])
+console.log("自定义组件数据", item);
+const emits = defineEmits(["CustomEvent"]);
+console.log("自定义组件事件", emits);
+
+// secondsToClockTime converts seconds to clock time in the format HH:mm:ss.
+function secondsToClockTime(secs) {
+  let hours = Math.floor(secs / 3600);
+  secs %= 3600;
+  let minutes = Math.floor(secs / 60);
+  secs %= 60;
+
+  let str = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  return str;
+}
+
+
+function formatTooltip(index){
+
+  return secondsToClockTime(index)
+}
+
+</script>

GoEasyDesigner/frontend/public/自定义组件/TimeProgressBar/TimeProgressBarAttr.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="属性表格">
+  <el-form
+      label-position="left"
+      label-width="100px"
+      style="max-width: 460px"
+  >
+      <component is="common-properties" :item="item"/>
+
+      <el-form-item label="n">
+        <el-input-number  v-model="props.item.n"/>
+      </el-form-item>
+      <el-form-item label="min">
+        <el-input-number  v-model="props.item.min"/>
+      </el-form-item>
+      <el-form-item label="max">
+        <el-input-number  v-model="props.item.max"/>
+      </el-form-item>
+      <el-form-item label="step">
+        <el-input-number  v-model="props.item.step"/>
+      </el-form-item>
+      <el-form-item label="size">
+        <el-select v-model="props.item.size" style="width: 100%">
+          <el-option
+              v-for="(item, index) in sizeOptions"
+              :key="item"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+
+    </el-form>
+  </div>
+
+  <component is="common-event-component" :item="props.item"  :eventName="eventName"/>
+
+</template>
+<script setup>
+import {ref, defineProps, defineEmits, onMounted} from "vue";
+
+const emits = defineEmits(["添加事件被选择"]); // 声明接受的事件
+const props = defineProps(['item']);
+
+let sizeOptions = ref([
+  {"label": "自定义", "value": "custom"},
+  {"label": "默认", "value": "default"},
+  {"label": "大号", "value": "large"},
+  {"label": "小号", "value": "small"},
+]);
+
+
+let eventName = ref([
+
+  {"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"}
+])
+
+onMounted(() => {
+  if (localStorage.getItem("locale") === "English") {
+    sizeOptions.value.forEach((item) => {
+      item.label = item.value;
+    });
+  }
+});
+
+</script>

GoEasyDesigner/frontend/src/app11.vue

@@ -256,7 +256,7 @@ if (localStorage.getItem("locale")) {
 }
 
 const onclickLanguageHandle = (item) => {
-  item !== locale.value ? (locale.value = item) : false;
+  item !== locale.value ? (locale.vaEventsOnlue = item) : false;
   //写入本地存储
   localStorage.setItem("locale", item);
 };

GoEasyDesigner/frontend/src/components/boxs/el/ProgressBar/ProgressBar.js

@@ -9,8 +9,8 @@ export default {
     disable: false,
     size: "custom",
     zIndex: 0,
-    min:0,
-    max:100,
-    step:1,
-    n:0,
+    min: 0,
+    max: 100,
+    step: 1,
+    n: 0,
 }

GoEasyDesigner/frontend/src/components/boxs/el/ProgressBar/ProgressBar.vue

@@ -1,26 +1,29 @@
 <template>
-    <el-slider
-        :style="item.size=='custom' ? getItemStyle(item):''"
-        style="width: 80%;margin:0px 20px"
-        v-model="item.n"
-               :size="item.size=='custom' ?'':item.size"
-               :min="item.min"
-               :max="item.max"
-               :step="item.step"
-    />
+  <el-slider
+      :style="item.size=='custom' ? getItemStyle(item):''"
+      style="width: 80%;margin:0px 20px"
+      v-model="item.n"
+      :size="item.size=='custom' ?'':item.size"
+      :min="item.min"
+      :max="item.max"
+      :step="item.step"
+      :format-tooltip="formatTooltip"
+  />
 
 </template>
 
-<script>
+<script setup>
 import {getItemStyle} from "@/public";
 
-export default {
-  methods: {getItemStyle},
-  props: {
-    item: {
-      type: Object,
-      default: '',
-    }
-  },
+import {defineEmits, defineProps} from "vue";
+
+const {item} = defineProps(['item'])
+console.log("自定义组件数据", item);
+const emits = defineEmits(["CustomEvent"]);
+console.log("自定义组件事件", emits);
+
+function formatTooltip(index){
+  return index
 }
-</script>
+
+</script>

GoEasyDesigner/frontend/src/main.js

@@ -2,7 +2,7 @@ import './assets/main.css'
 
 import {createApp} from 'vue'
 import {createPinia} from 'pinia'
-// import ElementPlus from 'element-plus'
+import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
 // import TDesign from 'tdesign-vue-next'
@@ -56,7 +56,12 @@ let 自定义组件名称列表 = []
     组件路径: "./自定义组件/登录框/登录框.vue",
     组件默认属性: "./自定义组件/登录框/登录框.js",
     组件属性框: "./自定义组件/登录框/登录框属性.vue",
-
+})
+自定义组件名称列表.push({
+    componentName: "TimeProgressBar",
+    组件路径: "./自定义组件/TimeProgressBar/TimeProgressBar.vue",
+    组件默认属性: "./自定义组件/TimeProgressBar/TimeProgressBar.js",
+    组件属性框: "./自定义组件/TimeProgressBar/TimeProgressBarAttr.vue",
 })
 console.log("自定义组件名称列表", JSON.stringify(自定义组件名称列表))
 app.config.globalProperties.自定义组件名称列表 = 自定义组件名称列表
@@ -194,7 +199,7 @@ app.config.globalProperties.t = i18n.global.t
 
 app.use(i18n)
 // app.use(TDesign)
-// app.use(ElementPlus)
+app.use(ElementPlus)
 app.mount('#app')