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 确保它在初始化前始终隐藏。
|