layui vue3

<template>
  <div>
    <lay-button @click="showMessage">点击我</lay-button>
    <lay-message ref="message"></lay-message>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { LayButton, LayMessage } from '@layui/vue';

const message = ref(null);

const showMessage = () => {
  message.value.show({
    content: '这是一个消息提示',
    type: 'success'
  });
};
</script>

<style scoped>
/* 自定义样式 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用了 lay-button 和 lay-message 组件。lay-button 是一个按钮组件，点击后会触发 showMessage 方法。
   • lay-message 是一个消息提示组件，通过 ref 引用可以在方法中调用其 show 方法来显示消息。

2. 脚本部分 (<script setup>)：

   • 导入了 ref 和 Layui Vue 组件 LayButton 和 LayMessage。
   • 定义了一个 ref 变量 message 来引用 lay-message 组件实例。
   • 定义了 showMessage 方法，当按钮被点击时调用此方法，显示一条成功类型的消息。

3. 样式部分 (<style scoped>)：

   • 这里留空，可以根据需要添加自定义样式。

这个示例展示了如何在 Vue 3 中使用 Layui Vue 组件库中的按钮和消息提示组件，并实现简单的交互功能。