标签: alpine.js

所以，我有一个轻微的概念问题。我也承认我主要是一名后端开发人员和松散的前端开发人员，希望学习更好的 UI/UX 原则/框架等，如果这是一个相对简单的问题，请提前道歉。

我有以下x-transition在 Alpine.js 中构建的示例：

<div
    x-show="open"
    x-transition:enter="transition ease-out duration-100"
    x-transition:enter-start="transform opacity-0 scale-95"
    x-transition:enter-end="transform opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75"
    x-transition:leave-start="transform opacity-100 scale-100"
    x-transition:leave-end="transform opacity-0 scale-95"
>...</div>

我试图将其转换为 Vue.js 中的过渡动画

<transition
    name="custom-classes-transition"
    enter-class="transition ease-out duration-100"
    enter-active-class="transform opacity-0 scale-95"
    enter-to-class="transform opacity-100 scale-100"
    leave-class="transition ease-in duration-75"
    leave-active-class="transform opacity-100 scale-100"
    leave-to-class="transform opacity-0 scale-95"
>
    <div v-if="open>

    </div>
</transition>

但是，唉，什么都没有。该怎么办？

我是 alpine.js 的新手，我需要切换元素的innerText，有谁知道我可以结合显示元素和更改另一个元素的innerText吗？这是我的代码

<div x-data="{ numOrder: false, delNumOrder: 'Remove your order number' }">
  <button x-on:click="numOrder = !numOrder">
  Insert your order number</button>
  <input x-show="numOrder" type="text" placeholder="Order Number">
</div>

我需要通过delNumOrder覆盖按钮文本，我尝试使用x-text：

<button x-on:click="numOrder = !numOrder" x-text="delNumOrder = !delNumOrder">

我可以使用类似的东西吗？

<div x-data="{ numOrder: false, delNumOrder = delNumOrder ? 'Insert your order number' : 'Remove your order number' }"></div>

x-data我有一个 Alpine JS 模板，我想从数组中引用它。我目前已在 HTML 文件底部的标签中声明了该内容<script>，并且我想将其移动到外部文件中。如果我创建该文件并将其与<script src='path/to/file.js'>我的组件链接，则会停止工作。

有效的示例：

<div x-data="{items}">
  <template x-for="(item, index) in items" :key="index">
    <a :href="item.link" x-text="item.text"></a>
  </template>
</div>
<script>
  const items = [
    { link: 'foo.com', text: 'foo' },
    { link: 'bar.com', text: 'bar' },
  ]
</script>

不起作用的示例，其中external.js具有相同的变量赋值

<div x-data="{items}">
  <template x-for="(item, index) in items" :key="index">
    <a :href="item.link" x-text="item.text"></a>
  </template>
</div>
<script src="external.js"></script>

以及 external.js 文件的内容：

import 'alpinejs'

window.onload = () => {

console.log('loaded') // This logs in the console …

如何在 Alpine.js 中自动隐藏 Flash 消息？（假设我希望它在 4 秒后消失）

<div class="flex mx-auto justify-between left-0 bottom-0 z-40">
  <div class="flex mr-6 fixed left-8 bottom-8 overflow-hidden">
    <div class="bg-white rounded-lg border-gray-300 border p-4 shadow-xl">
      <div class="flex flex-row">
        <div class="mx-2">
          <svg width="24" height="24" viewBox="0 0 1792 1792" fill="#44C997" xmlns="http://www.w3.org/2000/svg">
            <path d="M1299 813l-422 422q-19 19-45 19t-45-19l-294-294q-19-19-19-45t19-45l102-102q19-19 45-19t45 19l147 147 275-275q19-19 45-19t45 19l102 102q19 19 19 45t-19 45zm141 83q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 …

我正在学习 alpine.js 并尝试捕获用户输入值。我使用了“x-on:input”，但它没有调用该函数

下面是简单的表单输入

 <input type="email" class="form-control" x-on:input.debounce="validateEmail($event)" x-model="userEmail" id="email" aria-describedby="emailHelp" placeholder="Enter email">

这是我的index.js 中的基本方法

function validateEmail(event){
console.log(userEmail);

}

该函数没有被调用。

添加示例stackblitz

请指导

谢谢施鲁蒂·奈尔

我试图迭代一个循环，并向 4 个项目以上的每个元素添加一个条件类，以使用 tailwindcss 实现一些响应式样式。

以前我在其他类中添加了循环，效果很好：

<template x-for="(card, index ) in cards" :key="index">
    <div class="w-40 h-64"
         x-modal="card"
         :class="card.someOtherClass"
    >
        <div class="card-content" :id="'card-' + card.id">
        </div>
    </div>
</template>

但随后我需要添加一个条件语句来检查项目数量是否超过 4。我查看了之前提出的以下问题：

AlpineJS：如何有条件地将类添加到元素？

这建议使用{ 'class-name': statement }，所以我做了以下操作：

<template x-for="(card, index ) in cards" :key="index">
    <div class="w-40 h-64"
         x-modal="card"
         :class="[card.someOtherClass,
             {'bg-green-500':  index > 3 },
          ]"
        >
        <div class="card-content" :id="'card-' + card.id">
        </div>
    </div>
</template>

但我将其<div class="w-40 h-64 some-other-class [object Object]">传递给浏览器中的相关 HTML。如何从该对象获取相关值？

在 tailwindcss 的 Alpinejs 页面上，我使用通过单击按钮打开的模式。问题是，在加载页面时，我看到闪烁的对话框内容。我尝试将隐藏类设置为模态窗口，并在 init 方法末尾将 isPageLoaded 变量设置为 true

<div class="overflow-auto border-2 border-grey-900" x-data="app()" x-init="appInit()">

    <div class="w-full h-full">
        <button
            type="button"
            class="bg-transparent border border-gray-500 hover:border-indigo-500 text-gray-500 hover:text-indigo-500 font-bold py-2 px-4 rounded-full"
            @click="showModal = true"
        >Open modal
        </button>
    </div>
    <!--Overlay-->

    <div class="overflow-auto w-full h-full hidden" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal, 'visible' : isPageLoaded }">

...
<script>

    function app() {
        return {
            showModal : false,
            isPageLoaded : false,

            appInit: function () {
                console.log('appInit::')
                this.isPageLoaded= true
            }, …

我有一个按钮，当用户单击它时，应该显示一个输入元素并且它应该具有焦点。

我试过这个：

<div x-data="{ show: false }">

    <input x-show="show" type="text" id="input" x-ref="input" />

    <button @click="show = !show; $refs.input.focus();">Button</button>

</div>

但这不起作用。

我正在开发 Laravel、Livewire 和 AlpineJs 项目，验证通过后可以触发事件，如下代码所示。但是当发生验证错误时，下面的代码$this->validate();将不会运行。

如何发出验证错误事件，以便可以在刀片文件中捕获它以显示如下小通知：

注册.blade.php

<span x-data="{ open: false }" x-init="
    @this.on('validation-error', () => {
        if (open === false) setTimeout(() => { open = false }, 2500);
            open = true;
        })"
    x-show.transition.out.duration.1000ms="open" style="display: none;" class="text-red-500">Error saving!</span>

注册.php

class Register extends Component
{
    public $name = '';
    public $email = '';
    public $password = '';
    public $password_confirmation = '';

    protected $rules = [
        'name' => 'required|min:2',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:6|same:password_confirmation',
    ];

    public function register()
    { …

我在新项目中开始使用 Alpine.js v3 时遇到问题。这是我的 package.json 和 Alpine 设置：

  "devDependencies": {
    "laravel-mix": "^6.0.19"
  },
  "dependencies": {
    "alpinejs": "^3.0.6"
  }

import Alpine from 'alpinejs'

window.Alpine = Alpine
window.Alpine.start()

Alpine.data('demo', () => ({
    open: false,

    toggle() {
        this.open = !this.open
    }
}))

驱动此标记：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <script src="assets/app.js"></script>
  </head>
  <body>
    <div x-data="demo">
      <button @click="toggle">Expand</button>

      <div x-show="open">Content...</div>
    </div>
  </body>
</html>

我使用 laravel-mix 构建我的 javascript：

// webpack.mix.js

let mix = …