基本使用

在官方网站上找到需要的组件样式，点击查看源代码，复制对应的源代码，到.vue界面文件上，即可生成对应相关的组件，在使用的时候，还需要多多注意对应案例组件系统官方提供特有的方法，如属性，事件和插槽等等

---

常用属性

span标记在HTML中的属性

具体如下：

API	描述
font-style	文本样式，文本应为正常、斜体、首字母、继承等
font-family	字体类型
font-size	字体大小
font-weight	粗体或粗字体
text-transform	设置文本大写
text-decoration	此属性用于以文本修饰行、文本修饰颜色等形式修饰文本
color	设置文本内容和文本修饰颜色
background-color	元素的背景色
text-shadow	文本添加阴影
text-align-last	对齐文本
word-spacing	文本单词之间的间距
white-space	处理指定元素内的空格
line-height	设置行的高度
word-break	设置行应在何处断开
text-overflow	识别未显示的溢出内容，这些内容应向用户发出信号

---

单行文本输入框

<template>
    <div>
        <el-input  v-model="text" type="text" placeholder="Please input" />
    </div>
</template>
  
<script>
import {ref} from 'vue'
export default{
    setup(){
        const text = ref('')
        return{text}
    }
}
</script>

<style>
</style>

将type中的“text”改为“number”，单行文本框就变成只能输入数字类型的数据，文本框右侧出现了上下调节器

---

表格相关

表格展示图片：

<el-table-column label="头像">
	<template #default="scope">
		<el-image 
        	style="width: 100px; height: 100px"
        	:src="scope.row.head"
            :preview-src-list="[scope.row.head]"  <!-查看大图->
            :hide-on-click-modal="true"  <-点击旁边的图层可以关闭放大的图片->
        	fit="cover"></el-image>
	</template>
</el-table-column>

---

消息提示

消息提示需要导入相关的模块：import { ElMessage } from 'element-plus'

设置消息提示按钮：

<el-button :plain="true" @click="successMessage" class="successBtn">Success</el-button>

具体的计算函数为：

const successMessage = () => {
     ElMessage({
          message: 'Success类型消息',
          type: 'success',
	})
}

---

布局控制

界面中一行的布局可以看成24分栏，分布分栏可以迅速简便地创建布局

布局控制通过row和col组件，并通过col组件的 span属性我们就可以自由地组合布局