3.0 KiB
本项目使用了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实现单一模块的封装和加载，如下所示：
其中动态加载，需要手工指定触发时机，如下方式：
-
init函数中监控触发 init(){
//动态加载,AI对话框 this.$watch('ppt_modalIsOpen',value => { if (value){ this.$nextTick(() => { var dom = document.getElementById("ppt_ai_dialog") scan_alp_units(dom); }); } });
},//初始化函数
-
事件触发函数： enter_chat_agent(index){ //先设置值 this.ppt_modalIsOpen = true;
//更新后动态加载 this.$nextTick(() => { var dom = document.getElementById("ppt_ai_dialog") scan_alp_units(dom); });
}
==============================事件分发价值，在多个组件之间进行消息数据的传递=======================
注意:事件名称一定要全部小写，这是AlpineJs,但可以使用-,如my-event等
跨组件不能使用x-model,最多就是使用下级还没有定义的上级的一些属性和方法，复杂的情况都需要使用事件来传递
- 组件内和上下级组件传递和接收
- 函数内定义和接收参数
<script>
{
//定义的函数
click2(){
this.$dispatch('myevent-2', { foo: 'two' })
},
handel(event){
alert(event.detail.foo)
}
}
</script>
- 平行组件的接收
<button x-data @click="$dispatch('custom-event', 'Hello World!')">
加上.windows即可
===========================初始化隐藏和闪屏问题=======================
- 在元素上同时使用 x-show 和 x-cloak Html 深色版本
<!-- 这个面板默认是隐藏的，但初始化前可能闪现 -->
<div x-show="open" x-cloak>
我是弹出内容！
</div>