113 lines
3.0 KiB
Markdown
113 lines
3.0 KiB
Markdown
本项目使用了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 确保它在初始化前始终隐藏。 |