theme test

src/App.vue

@@ -20,6 +20,7 @@
                 </el-radio-button>
             </el-radio-group>
             <div class="flex-1"></div>
+            <el-button @click="()=>customElements=true">定制化样式</el-button>
             <el-switch v-model="ifRealTimeData" active-text="模拟实时数据"></el-switch>
             <el-button icon="Refresh" @click="changeDeviceData">数据变化</el-button>
             <el-button icon="Download" @click="importData">导入</el-button>
@@ -252,11 +253,17 @@
                 </div>
             </template>
         </el-dialog>
+        <el-dialog v-model="customElements" class="w-[1000px] h-[700px]">
+            <el-scrollbar max-height="600px">
+                <Custom></Custom>
+            </el-scrollbar>
+        </el-dialog>
     </div>
 </template>
 <script setup lang="ts">
 import {onMounted, reactive, ref, triggerRef, watch} from "vue";
 import SourceNodeCollection from "./components/source/source-node-collection.vue";
+import Custom from './components/custom.vue'
 import go from "gojs";
 import {
     GO,
@@ -297,6 +304,7 @@ import {diagramModelData} from "./kit/ModelData.ts";
 // 变量定义
 // region
 // 图表配置
+const customElements = ref(false)
 const diagramConfig = reactive<Record<string, any>>({
     mode: "edit",
 })

src/assets/button/button0.svg

+<svg width="734" height="173" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><linearGradient x1="730" y1="430" x2="730" y2="603" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="fill0"><stop offset="0" stop-color="#95ABEA"/><stop offset="0.5" stop-color="#BFCBF0"/><stop offset="1" stop-color="#E0E5F7"/></linearGradient></defs><g transform="translate(-363 -430)"><rect x="363" y="430" width="734" height="173" fill="url(#fill0)"/></g></svg>
\ No newline at end of file

src/assets/button/button1.svg

+<svg width="739" height="178" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden"><defs><radialGradient cx="-0.0625" cy="-0.0625" r="2089578" fx="0" fy="0" gradientUnits="userSpaceOnUse" spreadMethod="pad" id="fill0" gradientTransform="matrix(0.000360892 0 0 0.000360892 1403.5 430.5)"><stop offset="0" stop-color="#95ABEA"/><stop offset="0.5" stop-color="#BFCBF0"/><stop offset="1" stop-color="#E0E5F7"/></radialGradient></defs><g transform="translate(-1401 -428)"><path d="M1403.5 517C1403.5 469.227 1442.23 430.5 1490 430.5L2051 430.5C2098.77 430.5 2137.5 469.227 2137.5 517L2137.5 517C2137.5 564.773 2098.77 603.501 2051 603.501L1490 603.5C1442.23 603.5 1403.5 564.773 1403.5 517Z" stroke="#4472C4" stroke-width="4.58333" stroke-miterlimit="8" fill="url(#fill0)" fill-rule="evenodd"/></g></svg>
\ No newline at end of file

src/components/custom.vue

+<template>
+    <div class="flex flex-col">
+        <h1>Custom Component</h1>
+        <el-row>
+            <el-button @click="console.log('123')">1234</el-button>
+            <el-button type="primary" @click="console.log('456')">1234</el-button>
+        </el-row>
+            <div class="w-25 h-8 img-btn" @click="console.log('img')">
+                123
+            </div>
+        <el-radio-group v-model="radio">
+            <el-radio-button label="1">1</el-radio-button>
+            <el-radio-button label="2">2</el-radio-button>
+            <el-radio-button label="3">3</el-radio-button>
+        </el-radio-group>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+
+import {ref} from "vue";
+
+const radio = ref("1")
+
+</script>
+
+<style scoped>
+
+.el-button {
+    background-image: url("src/assets/button/button0.svg");
+}
+.el-button--primary {
+    background-color: transparent;
+    border: none;
+    background-image: url("src/assets/button/img.png");
+ }
+.el-button--primary:hover {
+    background-color: transparent;
+}
+.el-button--primary:focus {
+    border: none;
+    background-color: transparent;
+    background-image: url("src/assets/button/img_1.png");
+    color: red;
+}
+
+.img-btn{
+    border: 1px solid red;
+    background-image: url("src/assets/button/button1.svg");
+    background-size: 100% 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+.img-btn:hover {
+    border: 1px solid red;
+    background-image: url("src/assets/button/button1.svg");
+}
+.el-radio-button__original-radio{
+    background-color: blue;
+    color: red;
+}
+
+</style>
\ No newline at end of file

src/main.ts

@@ -4,6 +4,7 @@ import gojs from 'gojs'
 import ElementUI from 'element-plus';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import "element-plus/theme-chalk/index.css"
+import './style/element-plus/custom.css'
 import 'virtual:uno.css'
 import './assets/iconfont/iconfont.css'
 import './assets/bootstrap-icons/bootstrap-icons.css'

src/style/element-plus/custom.css

+