From a16d4c8ab4b9c25e17d7cbcdc5f6dcf0ee725f80 Mon Sep 17 00:00:00 2001
From: 01Petard <1520394133@qq.com>
Date: Mon, 11 Nov 2024 22:21:46 +0800
Subject: [PATCH] =?UTF-8?q?doc:=20=E5=A4=87=E4=BB=BD=E6=96=87=E7=AB=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/.vitepress/config.js | 1 +
...36\346\210\230\346\225\231\347\250\213.md" | 1503 +++++++++++++++++
...41\346\201\257\345\267\245\345\205\267.md" | 46 +-
3 files changed, 1548 insertions(+), 2 deletions(-)
create mode 100644 "docs/\345\274\200\345\217\221/\345\211\215\347\253\257/ElementUI\345\256\236\346\210\230\346\225\231\347\250\213.md"
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 9f0e397..2068b7d 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -116,6 +116,7 @@ export default {
{text: '几个免版权图片网站', link: '/开发/前端/几个免版权图片网站'},
{text: 'Vue的事件修饰符', link: '/开发/前端/Vue的事件修饰符'},
{text: 'electron', link: '/开发/前端/electron'},
+ {text: 'ElementUI实战教程', link: '/开发/前端/ElementUI实战教程'},
]
},
]
diff --git "a/docs/\345\274\200\345\217\221/\345\211\215\347\253\257/ElementUI\345\256\236\346\210\230\346\225\231\347\250\213.md" "b/docs/\345\274\200\345\217\221/\345\211\215\347\253\257/ElementUI\345\256\236\346\210\230\346\225\231\347\250\213.md"
new file mode 100644
index 0000000..c64ea85
--- /dev/null
+++ "b/docs/\345\274\200\345\217\221/\345\211\215\347\253\257/ElementUI\345\256\236\346\210\230\346\225\231\347\250\213.md"
@@ -0,0 +1,1503 @@
+---
+sidebar:
+ title: ElementUI实战教程
+ step: 1
+title: ElementUI实战教程
+description: 介绍快速入门Electron
+isTimeLine: true
+date: 2024-11-11 22:17:00
+updated:
+categories:
+- 学习
+tags:
+- ElementUI
+keywords:
+- 图片
+- 免版权
+description: 适合找素材的图片网站
+cover: https://cdn.jsdelivr.net/gh/01Petard/imageURL@main/img/202411112221879.png
+top_img: https://cdn.jsdelivr.net/gh/01Petard/imageURL@main/img/202411112221375.png
+---
+
+
+
+# Element UI 实战教程
+
+- 记录：泽校
+
+- 作者B站：[编程不良人](https://space.bilibili.com/352224540)
+- 资料：http://www.baizhiedu.xin
+
+---
+
+## 1.Element UI 引言
+
+官网: https://element.eleme.io/#/zh-CN
+
+### 1.1 官方定义
+
+`网站快速成型工具` 和 `桌面端组件库`
+
+### 1.2 定义
+
+element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。
+
+### 1.3 由来
+
+饿了么前端团队 基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件。
+
+---
+
+## 2.安装Element UI
+
+### 2.1通过vue脚手架创建项目
+
+```js
+vue init webpack element(项目名)
+```
+
+### 2.2在vue脚手架项目中安装elementui
+
+```js
+# 1.下载elementui的依赖
+ npm i element-ui -S
+
+# 2.指定当前项目中使用elementui
+ import ElementUI from 'element-ui';
+ import 'element-ui/lib/theme-chalk/index.css';
+
+ //在vue脚手架中使用elementui
+ Vue.use(ElementUI);
+```
+
+----
+
+## 3.按钮组件(示例)
+
+ 
+
+#### 3.1 默认样式按钮
+
+```html
+
+ 默认按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+```
+
+#### 3.2 简洁按钮
+
+```html
+
+ 朴素按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+```
+
+#### 3.3 圆角按钮
+
+```html
+
+ 圆角按钮
+ 主要按钮
+ 成功按钮
+ 信息按钮
+ 警告按钮
+ 危险按钮
+
+```
+
+#### 3.4 图标按钮
+
+```html
+
+
+
+
+
+
+
+
+```
+
+----
+
+## 4.按钮组件的详细使用
+
+`总结:日后使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头`
+
+### 4.1创建按钮
+
+```html
+默认按钮
+```
+
+### 4.2 按钮属性使用
+
+```html
+默认按钮
+
+```
+
+`总结:在elementui中所有组件的属性全部写在组件标签上`
+
+### 4.3 按钮组使用
+
+```html
+
+ 上一页
+ 下一页
+
+```
+
+`注意:`
+
+- 在element ui中所有组件都是 `el-组件名称` 方式进行命名
+- 在element ui中组件的属性使用`都是直接将属性名=属性值方式写在对应的组件标签上`
+
+---
+
+## 5.Link 文字链接组件
+
+### 5.1 文字链接组件的创建
+
+```html
+默认链接
+```
+
+### 5.2 文字链接组件的属性的使用
+
+```html
+默认链接
+默认链接
+默认链接
+默认链接
+默认链接
+默认链接
+```
+
+-----
+
+## 6.Layout (栅格)布局组件的使用
+
+`通过基础的 24 分栏，迅速简便地创建布局`
+
+`在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)`
+
+### 6.1 使用Layout组件
+
+```html
+
+ 占用8份
+ 占用8份
+ 占用8份
+
+```
+
+`注意:`
+
+- 在一个布局组件中 是由 `row` 和 `col` 组合而成
+- 在使用时要区分 `row属性` 和 `col属性`
+
+### 6.2 属性的使用
+
+- 行属性使用
+
+ ```html
+
+ 占用4份
+ 占用8份
+ 占用3份
+ 占用9份
+
+ ```
+
+- 列属性的使用
+
+ ```html
+
+ 我是占用12分
+ 我是占用6分
+
+ ```
+
+---
+
+## 7.Container 布局容器组件
+
+### 7.1 创建布局容器
+
+```html
+
+
+
+```
+
+### 7.2 容器中包含的子元素
+
+```html
+：顶栏容器。
+：侧边栏容器。
+：主要区域容器。
+：底栏容器。
+```
+
+### 7.3 容器的嵌套使用
+
+```html
+
+
+
+ 我是标题
+
+
+
+ 我是菜单
+
+ 我是中心内容
+
+ 我是页脚
+
+```
+
+### 7.4 水平容器
+
+```html
+
+
+ 我是标题
+
+
+ 我是菜单
+
+ 我是中心内容
+
+ 我是页脚
+
+```
+
+`注意:当子元素中没有有 el-header 或 el-footer 时容器排列为水平`
+
+### 7.5 垂直容器
+
+```html
+
+
+ 我是标题
+
+
+ 我是菜单
+
+ 我是中心内容
+
+
+ 我是页脚
+
+```
+
+----
+
+## 8.Form相关组件
+
+### 8.1 Radio单选按钮
+
+#### 1.创建Radio按钮
+
+```html
+
+男
+女
+
+```
+
+`注意:在使用radio单选按钮是至少加入v-model和label两个属性`
+
+#### 2.Radio按钮属性的使用
+
+```html
+男
+女
+女
+女
+```
+
+`总结:属性使用还是直接卸载对应的组件标签上以 属性名=属性值 方式使用`
+
+#### 3.Radio事件的使用
+
+```html
+男
+女
+
+
+
+
+```
+
+`总结:`
+
+- 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
+- 事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)
+
+#### 4.radio按钮组
+
+```html
+
+ 备选项3
+ 备选项6
+ 备选项9
+
+
+```
+
+----
+
+### 8.2 checkbox组件
+
+#### 1.创建checkbox组件
+
+```html
+北京
+上海
+天津
+```
+
+#### 2.属性使用
+
+```html
+北京
+上海
+天津
+```
+
+#### 3.事件使用
+
+```html
+上海
+天津
+
+```
+
+#### 4.复选框组的使用
+
+```html
+
+
+
+
+
+
+
+
+```
+
+---
+
+### 8.3 Input 输入框组件
+
+#### 1.创建Input组件
+
+```html
+
+
+```
+
+#### 2.常用属性
+
+```html
+
+
+
+
+
+```
+
+#### 3.事件使用
+
+```html
+
+
+```
+
+#### 4.方法的使用
+
+```html
+方法的使用
+
+
+focus方法
+blur方法
+
+
+```
+
+`总结`
+
+- 在使用组件的方法时需要在对应的组件中加入 `ref="组件别名"`
+- 在调用方法时直接使用 `this.$refs.组件别名.方法名()`
+
+> `注意:在elementui中所有组件 都存在 属性 事件 和方法`
+>
+> `属性:`直接写在对应的组件标签上 使用方式:`属性名=属性值`方式
+>
+> `事件`: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:`@事件名=vue中事件处理函数`
+>
+> `方法`: 1.在对应组件标签上使用`ref=组件别名` 2.`通过使用this.$refs.组件别名.方法名()`进行调用
+
+### 8.4 Select选择器组件的使用
+
+#### 1.组件创建
+
+```markdown
+# 1.数据写死在页面上
+
+ 北京
+ 天津
+
+ 注意:1.要求下拉列表中必须存在option的value属性值 2.要求select中必须使用v-model进行数据绑定
+
+# 2.如何动态获取数据
+
+
+
+
+
+
+
+# 3.获取下拉列表选中数据
+
+
+
+
+```
+
+#### 2.属性使用
+
+```html
+
+ ......
+
+```
+
+#### 3.事件的使用
+
+```html
+
+
+
+
+
+```
+
+#### 4.方法的使用
+
+```html
+1.给组件通过ref起别名并绑定到vue实例中
+
+ ....
+
+2.调用方法
+ this.$refs.selects.focus();//方法调用
+```
+
+-----
+
+### 8.5 Switch 开关组件
+
+#### 1.Switch组件的创建
+
+```html
+
+
+```
+
+#### 2.属性使用
+
+```html
+
+
+```
+
+#### 3.事件使用
+
+```html
+
+
+```
+
+#### 4.方法使用
+
+```html
+
+调用方法
+
+
+```
+
+---
+
+### 8.6 DatePicker组件
+
+#### 1.创建
+
+```html
+
+```
+
+#### 2.属性的使用
+
+```html
+
+
+```
+
+#### 3.Picker Options 和 Shortcuts使用
+
+- **Shortcuts:** 用来增加日期组件的快捷面板
+- **Picker Options:** 用来对日期控件做自定义配置
+
+##### 3.1 Shortcuts使用
+
+```html
+
+日期配置
+
+
+
+```
+
+
+
+##### 3.2 Picker Options
+
+```html
+
+
+
+
+```
+
+
+
+#### 4.事件使用
+
+```html
+
+
+
+
+```
+
+----
+
+### 8.7 Upload组件
+
+#### 1.组件创建
+
+```html
+
+ 点击上传
+ 只能上传jpg/png文件，且不超过500kb
+
+```
+
+`注意:在使用upload组件时必须设置action属性 action属性为必要参数不能省略`
+
+#### 2.属性和事件的使用
+
+```html
+
+
+ 将文件拖到此处，或点击上传
+ 只能上传jpg/png文件，且不超过500kb
+
+
+
+```
+
+- **注意:在使用upload组件时没有event事件,所有事件都是属性事件**
+
+#### 3.方法的使用
+
+```html
+........
+
+方法调用:
+ this.$refs.uploads.clearFiles();
+ this.$refs.uploads.abort();
+ this.$refs.uploads.submit();
+```
+
+----
+
+### 8.8 Form组件
+
+#### 1.组件的创建
+
+```html
+
+
+
+
+ ......
+
+ 立即创建
+ 取消
+
+
+
+```
+
+#### 2.内联表单
+
+```html
+
+ .......
+
+```
+
+`通过设置 inline=true方式将表单作为内联表单处理`
+
+#### 3.表单验证
+
+- **使用说明:**
+
+> Form 组件提供了表单验证的功能，只需要通过 `rules` 属性传入约定的验证规则，并将 Form-Item 的 `prop` 属性设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
+
+##### 3.1 失去焦点自动验证
+
+```html
+
+
+
+
+ ....
+
+
+```
+
+##### 3.2 表单提交调用表单组件的验证方法验证
+
+```html
+
+
+
+
+
+ 立即创建
+ 取消
+
+
+...
+methods: {
+ onSubmit(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ alert('submit!');
+ //发送异步请求 到 springboot项目
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ }
+ }
+```
+
+#### 4.自定义表单的验证规则
+
+```html
+
+
+
+
+
+ 提交
+ 重置
+
+
+
+
+```
+
+----
+
+## 9.消息提示
+
+### 9.1警告提示
+
+#### 1.1 创建警告提示
+
+```html
+
+ 我是辅助信息
+
+
+
+
+```
+
+#### 1.2属性的使用
+
+```html
+
+ 我是辅助信息
+
+```
+
+### 9.2 Message消息提示
+
+#### 2.1 创建组件
+
+- **注意:这个组件的创建无须在页面中书写任何标签,他是一个js插件,在需要展示消息提示的位置直接调用提供的js插件方法即可**
+
+```js
+# 1.创建最简单的消息
+ this.$message('这是一个消息提示!!')
+
+# 2.自定义消息内容
+ this.$message({
+ message: h('p', null, [
+ h('span', null, '订单创建成功,您的订单编号为: '),
+ h('i', { style: 'color: teal' }, '87')
+ ])
+ });
+
+# 3.不同主题的消息提示
+ this.$message({
+ message:'这是信息提示',
+ type:"success",
+ })
+ //主题样式: success info warning error
+
+# 4.属性使用
+ this.$message({
+ message:'这是信息提示',
+ type:"success",
+ showClose:true,
+ center:true,
+ iconClass:'el-icon-user-solid',
+ duration:0
+ })
+# 5.方法的使用
+ this.$message.closeAll();
+
+```
+
+----
+
+## 10.table表格组件
+
+### 1.组件的创建
+
+```html
+
+
+
+
+
+
+
+```
+
+### 2.表格中列属性
+
+- **el-table-column属性**
+
+```html
+
+
+
+
+
+
+```
+
+### 3.表格属性
+
+```html
+
+
+
+
+```
+
+### 4.组件事件使用
+
+```html
+
+
+
+```
+
+### 5.组件方法的使用
+
+```html
+........
+//调用方法
+ this.$refs.mytable.方法名
+```
+
+### 6.表格中定义操作列
+
+```html
+
+ ....
+
+
+ 编辑
+ 删除
+
+
+
+
+```
+
+
+
+---
+
+### 7.自定义表头
+
+```html
+
+ .....
+
+
+
+
+
+
+ 编辑
+ 删除
+
+
+
+
+
+```
+
+
+
+-----
+
+
+
+
+
diff --git "a/docs/\350\275\257\344\273\266/Linux/\345\221\275\344\273\244\350\241\214\347\263\273\347\273\237\344\277\241\346\201\257\345\267\245\345\205\267.md" "b/docs/\350\275\257\344\273\266/Linux/\345\221\275\344\273\244\350\241\214\347\263\273\347\273\237\344\277\241\346\201\257\345\267\245\345\205\267.md"
index 262c3f4..8b65e88 100644
--- "a/docs/\350\275\257\344\273\266/Linux/\345\221\275\344\273\244\350\241\214\347\263\273\347\273\237\344\277\241\346\201\257\345\267\245\345\205\267.md"
+++ "b/docs/\350\275\257\344\273\266/Linux/\345\221\275\344\273\244\350\241\214\347\263\273\347\273\237\344\277\241\346\201\257\345\267\245\345\205\267.md"
@@ -1,7 +1,7 @@
---
title: 命令行系统信息工具
date: 2024-11-05 22:40:00
-updated: 2024-11-10 22:14:00
+updated: 2024-11-11 18:44:00
categories:
- 软件
tags:
@@ -10,7 +10,7 @@ tags:
keywords:
- Linux
- 命令行
-description: （主要目的是为了装逼）
+description: （主要是为了装逼）
cover: https://cdn.jsdelivr.net/gh/01Petard/imageURL@main/img/202411052242583.png
top_img: https://cdn.jsdelivr.net/gh/01Petard/imageURL@main/img/202411052242895.png
---
@@ -152,6 +152,48 @@ x cat
+# x ascii
+
+> 将 x-cmd 字符串转为 ASCII 艺术字
+
+```shell
+x ascii cfont HuangZexiao -g red,magenta -a center -s
+```
+
+
+
+# x hua
+
+> 查看古文诗词
+
+```shell
+x hua
+```
+
+> 查看《唐诗三百》
+
+```shell
+x hua ts
+```
+
+
+
+# x wttr
+
+> 展示中山市天气的信息
+
+```shell
+x wttr zhongshan
+```
+
+> 显示当前位置的天气和今日的天气预报
+
+```shell
+x wttr ?1
+```
+
+
+
# lsd
> 查看当前目录下的文件，比`ls`的功能更丰富