Add File

2025-11-19 19:43:18 +08:00
parent ef062a6432
commit 84be0f28a6
1 changed files with 113 additions and 0 deletions
--- a/doc/AlpineJs.md
+++ b/doc/AlpineJs.md
@@ -0,0 +1,113 @@
+本项目使用了AlpineJs作为前端主要库，目的是简单快捷，语法类似于VUE2.
+
+中文官网：https://www.alpinejs.cn/
+国际官网：https://alpinejs.dev/
+
+和UI相关的资源，本项目使用了如下的资源
+https://www.penguinui.com/
+https://devdojo.com/pines
+https://pinemix.com/
+
+
+更多信息可以在bing中搜索alpine js ui library
+
+
+作者编写了alp_unit.js实现单一模块的封装和加载，如下所示：
+
+<div alp-unit="kg.html"></div>
+<div alp-unit="kg2.aps"></div>
+
+
+其中动态加载，需要手工指定触发时机，如下方式：
+
+ <!-- 智能体对话窗口-->
+<template x-if="ppt_modalIsOpen">
+    <div id="ppt_ai_dialog" alp-unit="chat_agent.html"></div>
+</template>
+
+1. init函数中监控触发
+    init(){
+
+    //动态加载,AI对话框
+    this.$watch('ppt_modalIsOpen',value => {
+        if (value){
+            this.$nextTick(() => { 
+                var dom = document.getElementById("ppt_ai_dialog")
+                scan_alp_units(dom); 
+            });
+        }
+    });
+
+    },//初始化函数
+
+2. 事件触发函数：
+enter_chat_agent(index){
+    //先设置值
+    this.ppt_modalIsOpen = true;
+    
+    //更新后动态加载
+    this.$nextTick(() => { 
+        var dom = document.getElementById("ppt_ai_dialog")
+        scan_alp_units(dom); 
+    });
+
+}
+
+==============================事件分发价值，在多个组件之间进行消息数据的传递=======================
+<h3>注意:事件名称一定要全部小写，这是AlpineJs,但可以使用-,如my-event等<h3>
+跨组件不能使用x-model,最多就是使用下级还没有定义的上级的一些属性和方法，复杂的情况都需要使用事件来传递
+
+1. 组件内和上下级组件传递和接收
+<div @myevent="console.log($event.detail.foo)">
+    <button @click="$dispatch('myevent', { foo: 'bar' })">
+    <!-- 点击时，将触发 console.log -->
+    
+</div>
+
+2. 函数内定义和接收参数
+<div @myevent-2="handel($event)">
+    <button @click="click2">
+</div>
+
+<script>
+   {
+    //定义的函数
+   
+    click2(){
+        this.$dispatch('myevent-2', { foo: 'two' })
+    },
+    handel(event){
+        alert(event.detail.foo)
+    }
+} 
+</script>
+
+3. 平行组件的接收
+<div x-data @custom-event.window="console.log($event.detail)"></div>
+
+<button x-data @click="$dispatch('custom-event', 'Hello World!')">
+
+加上.windows即可
+
+
+===========================初始化隐藏和闪屏问题=======================
+1. 在元素上同时使用 x-show 和 x-cloak
+Html
+深色版本
+<div x-data="{ open: false }">
+    <button @click="open = !open">Toggle</button>
+
+    <!-- 这个面板默认是隐藏的，但初始化前可能闪现 -->
+    <div x-show="open" x-cloak>
+        我是弹出内容！
+    </div>
+</div>
+2. 全局 CSS 中定义 x-cloak 隐藏规则（必须！）
+Html
+深色版本
+<style>
+    [x-cloak] {
+        display: none !important;
+    }
+</style>
+💡 即使 x-show 最终会设为 false，但在 Alpine 初始化完成前，浏览器仍会渲染该元素。x-cloak 确保它在初始化前始终隐藏。