vue常用组件及ui框架

<template>
  <div>
    <!-- Element UI 的 Button 组件示例 -->
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="info">信息按钮</el-button>

    <!-- Element UI 的 Input 组件示例 -->
    <el-input v-model="input" placeholder="请输入内容"></el-input>

    <!-- Element UI 的 Dialog 组件示例 -->
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
.el-button {
  margin: 5px;
}
</style>

解释说明：

1. Element UI 的 Button 组件：展示了不同类型的按钮（主要、成功、警告、危险、信息），通过 type 属性来区分。
2. Element UI 的 Input 组件：用于输入框，通过 v-model 实现双向数据绑定。
3. Element UI 的 Dialog 组件：用于弹出对话框，visible.sync 控制对话框的显示与隐藏，before-close 事件用于在关闭前进行确认操作。

以上代码使用了 Element UI 这个 Vue 的 UI 框架。如果你需要其他组件或框架的示例，请告诉我。