ElementPlus基本用法

Element Plus 是一个基于 Vue 3 的组件库，它提供了一系列丰富的组件，用于快速构建高质量的Vue应用程序。Element Plus常见元素的用法示例

安装Element Plus
在开始之前，你需要确保已经安装了Element Plus。可以通过npm或yarn来安装：

npm install element-plus --save
# 或者
yarn add element-plus

引入Element Plus
在你的Vue项目中，你可以全局或按需引入Element Plus组件。以下是全局引入的示例：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Button（按钮）

<template>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</template>

Input（输入框）

<template>
  <el-input placeholder="请输入内容"></el-input>
  <el-input type="password" placeholder="请输入密码"></el-input>
  <el-input v-model="input" placeholder="双向绑定"></el-input>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const input = ref('')
    return { input }
  }
}
</script>

Select（选择器）

<template>
  <el-select v-model="selected" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const selected = ref(null)
    const options = ref([
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' }
    ])
    return { selected, options }
  }
}
</script>

Dialog（对话框）

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const dialogVisible = ref(false)
    const handleClose = () => {
      console.log('Dialog closed')
    }
    return { dialogVisible, handleClose }
  }
}
</script>

Table（表格）

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tableData = ref([
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      // ...更多数据
    ])
    return { tableData }
  }
}
</script>

Tabs（标签页）

<template>
  <el-tabs v-model="activeTab" @tab-click="handleTabClick">
    <el-tab-pane label="用户管理" name="first">用户管理的内容</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理的内容</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理的内容</el-tab-pane>
    <el-tab-pane label="任务管理" name="fourth">任务管理的内容</el-tab-pane>
  </el-tabs>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const activeTab = ref('first')
    const handleTabClick = (tab) => {
      console.log(tab.name)
    }
    return { activeTab, handleTabClick }
  }
}
</script>

Pagination（分页）

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(100)
    const handleSizeChange = (newSize) => {
      pageSize.value = newSize
    }
    const handleCurrentChange = (newPage) => {
      currentPage.value = newPage
    }
    return { currentPage, pageSize, total, handleSizeChange, handleCurrentChange }
  }
}
</script>

Tooltip（文字提示）

<template>
  <el-tooltip class="item" effect="dark" content="提示内容" placement="top">
    <el-button>鼠标悬停显示提示</el-button>
  </el-tooltip>
</template>

Popover（弹出框）

<template>
  <el-popover
    ref="popover"
    placement="top"
    width="200"
    trigger="click"
    v-model:visible="visible">
    <p>这是一段内容，这是一段内容。</p>
    <div style="text-align: right; margin: 0">
      <el-button size="mini" type="text" @click="visible = false">关闭</el-button>
    </div>
    <el-button slot="reference">点击激活</el-button>
  </el-popover>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const visible = ref(false)
    return { visible }
  }
}
</script>