不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福。
在学习技术的道路上:落后又要被挨打。这是现实
常用到的组件库:下面的网站在自己空闲时间去看看 下面的资源只需要ctrl+c ctrl+a ctr+v
Border 边框 | Element Plus (element-plus.org)
Icon 图标 - Vant Weapp (youzan.github.io)
组件总览 - Ant Design
Layui 开发使用文档 - 入门指南
Icon 图标 - Semi Design
CSS Reset — Vuetify (vuetifyjs.com)
Icon 图标 | Element Plus (element-plus.org)
以上面的组件为案例介绍:
设计 | Element Plus (element-plus.org)
上面是官方的指南
Element Plus 目前还处于快速开发迭代中。
使用包管理器
我们建议您使用包管理器(如 NPM、Yarn 或 pnpm)安装 Element Plus,然后您就可以使用打包工具,例如 Vite 或 webpack。
# 选择一个你喜欢的包管理器
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
如果您的网络环境不好,建议使用相关镜像服务 cnpm 或 中国 NPM 镜像。
浏览器直接引入
直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus
了。
根据不同的 CDN 提供商有不同的引入方式, 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。
unpkg
<head>
<!-- Import style -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</head>
jsDelivr
<head>
<!-- Import style -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
/>
<!-- Import Vue 3 -->
<script src="//cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Import component library -->
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
</head>
以npm为例
注意在Vue3.0基础上使用elementul组件
第一步 :导入文件的依赖
$ npm install element-plus --save
第二步 :在main.js文件中导入依赖 如下图所示
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
main,js文件截图
第三步 Ctrl+c Ctrl+a Ctrl+v
代码:
<template>
<div>
<h1>使用组件第一个常用的组件为按钮</h1>
<el-row class="mb-4">
<el-button>我是组件</el-button>
<el-button type="primary" style="background: red">我是组件</el-button>
<el-button type="success">Success我是组件10023</el-button>
<el-button type="info">Info我是组件10023</el-button>
<el-button type="warning">Warning我是组件10023</el-button>
<el-button type="danger">Danger我是组件10023</el-button>
</el-row>
<br />
<br />
<el-row class="mb-4">
<el-button plain>Plain我是组件10023</el-button>
<el-button type="primary" plain>Primary我是组件10023</el-button>
<el-button type="success" plain>Success我是组件10023</el-button>
<el-button type="info" plain>Info我是组件10023</el-button>
<el-button type="warning" plain>Warning我是组件10023</el-button>
<el-button type="danger" plain>Danger我是组件10023</el-button>
</el-row>
<br />
<br />
<el-row class="mb-4">
<el-button round>Round我是组件10023</el-button>
<el-button type="primary" round>Primary我是组件10023</el-button>
<el-button type="success" round>Success我是组件10023</el-button>
<el-button type="info" round>Info我是组件10023</el-button>
<el-button type="warning" round>Warning我是组件10023</el-button>
<el-button type="danger" round>Danger我是组件10023</el-button>
</el-row>
<br />
<br />
<el-row>
<el-button :icon="Search" circle />
<el-button type="primary" :icon="Edit" circle />
<el-button type="success" :icon="Check" circle />
<el-button type="info" :icon="Message" circle />
<el-button type="warning" :icon="Star" circle />
<el-button type="danger" :icon="Delete" circle />
</el-row>
<br />
<br />
<div class="flex">
<el-button type="primary" :icon="Edit" />
<el-button type="primary" :icon="Share" />
<el-button type="primary" :icon="Delete" />
<el-button type="primary" :icon="Search">Search</el-button>
<el-button type="primary">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</div>
</template>
<style scoped>
el-button{
width: 200px;
background-color: black;
}
</style>
<script setup>
import {
Check,
Delete,
Edit,
Message,
Search,
Star,
} from "@element-plus/icons-vue";
</script>
文档对组件的解释:
Button API#
Button 属性#
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 尺寸 | string | — |
type | 类型 | string | — |
plain | 是否为朴素按钮 | boolean | false |
text2.2.0 | 是否为文字按钮 | boolean | false |
bg2.2.0 | 是否显示文字按钮背景颜色 | boolean | false |
link 2.2.1 | 是否为链接按钮 | boolean | false |
round | 是否为圆角按钮 | boolean | false |
circle | 是否为圆形按钮 | boolean | false |
loading | 是否为加载中状态 | boolean | false |
loading-icon | 自定义加载中状态图标组件 | string / Component | Loading |
disabled | 按钮是否为禁用状态 | boolean | false |
icon | 图标组件 | string / Component | — |
autofocus | 原生 autofocus 属性 | boolean | false |
native-type | 原生 type 属性 | string | button |
auto-insert-space | 自动在两个中文字符之间插入空格 | boolean | — |
color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 | string | — |
dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 | boolean | false |
Button 插槽#
插槽名 | 说明 |
---|---|
default | 自定义默认内容 |
loading | 自定义加载中组件 |
icon | 自定义图标组件 |
Button 对外暴露的方法#
属性名 | 说明 | 类型 |
---|---|---|
ref | 按钮 html 元素 | Object |
size | 按钮尺寸 | Object |
type | 按钮类型 | Object |
disabled | 按钮已禁用 | Object |
shouldAddSpace | 是否在两个字符之间插入空格 | Object |
ButtonGroup API#
Button Group 属性#
插槽名 | 说明 | 类型 | 默认值 |
---|---|---|---|
size | 用于控制该按钮组内按钮的大小 | string | — |
type | 用于控制该按钮组内按钮的类型 | string | — |
ButtonGroup 插槽#
插槽名 | 说明 | 子标签 |
---|---|---|
default | 自定义按钮组内容 | Bu |
其他的组件也是一样操作的关键在自己多去学习