vue ui组件

<template>
  <div>
    <!-- Button 组件示例 -->
    <button @click="handleClick">点击我</button>

    <!-- Input 组件示例 -->
    <input v-model="message" placeholder="输入内容" />

    <!-- Modal 弹窗组件示例 -->
    <button @click="showModal = true">打开弹窗</button>
    <modal v-if="showModal" @close="showModal = false">
      <h3>这是一个弹窗</h3>
      <p>你可以在这里添加更多内容。</p>
    </modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '', // 输入框的绑定值
      showModal: false, // 控制弹窗显示/隐藏
    };
  },
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
};
</script>

<style scoped>
/* 简单样式 */
button {
  margin: 10px;
}
</style>

<!-- Modal 组件定义 -->
<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <slot></slot>
          <button @click="$emit('close')">关闭</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Modal'
};
</script>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}
</style>

解释说明：

• Button 组件：简单的按钮，点击后会弹出一个提示框。
• Input 组件：使用 v-model 实现双向数据绑定，用户输入的内容会实时更新到 message 变量中。
• Modal 组件：通过 v-if 控制弹窗的显示与隐藏，点击按钮可以打开或关闭弹窗。弹窗内部可以自定义内容，通过 <slot> 插槽实现。

以上代码展示了 Vue 中常见的 UI 组件用法，包括按钮、输入框和弹窗等。