VUE常用组件(一)之Element UI

Element UI安装

原来安装的是 element-plus 而不是 Element-ui
Element-ui和Element-Plus的区别_Element2和Element3的区别

1. Icon图标库变化了
2. 组件的插槽slot使用变化了:同时可支持多个插槽
3. 新增组件 Skeleton-骨架屏/Empty-空状态/Affix -固钉/TimeSelect 时间选择/Space 间距

---

因需使用 el-table 报错才发现需要安装 Element UI 组件，开始按照网上大多数方法进行，但总报错！因为这些方法是基于VUE2.X版本，而搭建的环境是VUE3！

VUE3正确安装方法

1. 下载 Element UI组件

   npm install --save element-plus

   安装完之后 package.json 文件中的 dependencies 会新增版本内容，说明安装成功

   "dependencies": {
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "element-plus": "^2.2.0",
     "table": "^6.8.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },

2. 在 main.js 中引入 Element UI 组件

   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   
   const app = createApp(App);
   app.use(ElementPlus)
   
   //...
   app.mount('#app');
   
   //createApp(App).use(store).use(router).use(element).mount('#app')

   注意：
   因vue3 的 dom挂载方式是新创建一个 app 然后调用 mount() 方法插入到页面中
   所以 app.use(ElementPlus) 设置需要在 app.mount(‘#app’); 挂载之前设置

3. 在相应的 vue 文件中测试使用 并 npm run serve 运行测试

   <el-button type="primary">主要按钮</el-button>

4. 卸载 element-ui

   npm uninstall element-ui

   装过旧版需要卸载，还需要把 main.js 和 package.json 内与 element-plus 相关删除

旧版常规安装

注意:官方和网上常见的方式为 VUE2.X 旧版本方式

# 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);

Element UI基本使用(示例)

注意：
使用element ui的相关组件时需要注意的是 所有组件都是el-组件名称开头
属性使用都是直接将属性名=属性值方式写在对应的组件标签上

按钮组件

1. 默认样式按钮

   <el-row>
     <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>
   </el-row>

2. 简洁按钮

   <el-row>
     <el-button plain>朴素按钮</el-button>
     <el-button type="primary" plain>主要按钮</el-button>
     <el-button type="success" plain>成功按钮</el-button>
     <el-button type="info" plain>信息按钮</el-button>
     <el-button type="warning" plain>警告按钮</el-button>
     <el-button type="danger" plain>危险按钮</el-button>
   </el-row>

3. 圆角按钮

   <el-row>
     <el-button round>圆角按钮</el-button>
     <el-button type="primary" round>主要按钮</el-button>
     <el-button type="success" round>成功按钮</el-button>
     <el-button type="info" round>信息按钮</el-button>
     <el-button type="warning" round>警告按钮</el-button>
     <el-button type="danger" round>危险按钮</el-button>
   </el-row>

4. 图标按钮

   <el-row>
     <el-button icon="el-icon-search" circle></el-button>
     <el-button type="primary" icon="el-icon-edit" circle></el-button>
     <el-button type="success" icon="el-icon-check" circle></el-button>
     <el-button type="info" icon="el-icon-message" circle></el-button>
     <el-button type="warning" icon="el-icon-star-off" circle></el-button>
     <el-button type="danger" icon="el-icon-delete" circle></el-button>
   </el-row>

5. 按钮组件的详细使用
   一、 按钮组件的创建

   <el-button>默认按钮</el-button>

   二、 按钮属性使用

   <el-button type="primary" 属性名=属性值>默认按钮</el-button>
   <el-button type="success" size="medium" plain=true round circle icon="el-icon-loading"></el-button>

   三、 按钮组使用

   <el-button-group>
     <el-button type="primary" icon="el-icon-back">上一页</el-button>
     <el-button type="primary" icon="el-icon-right">下一页</el-button>
   </el-button-group>

   Link 文字链接组件

6. 文字链接组件的创建

   <el-link>默认链接</el-link>

7. 文字链接组件的属性的使用

   <el-link  target="_blank" href="http://www.baidu.com" >默认链接</el-link>
   <el-link type="primary":underline="false">默认链接</el-link>
   <el-link type="success" disabled>默认链接</el-link>
   <el-link type="info" icon="el-icon-platform-eleme">默认链接</el-link>
   <el-link type="warning">默认链接</el-link>
   <el-link type="danger">默认链接</el-link> 

   Layout (栅格)布局组件的使用

   通过基础的 24 分栏，迅速简便地创建布局
   在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)

8. 使用Layout组件

   <el-row>
       <el-col :span="8">占用8份</el-col>
     <el-col :span="8">占用8份</el-col>
     <el-col :span="8">占用8份</el-col>
   </el-row>

   在一个布局组件中 是由 row 和 col 组合而成
   在使用时要区分 row属性 和 col属性

9. 使用Layout组件

   <el-row>
       <el-col :span="8">占用8份</el-col>
     <el-col :span="8">占用8份</el-col>
     <el-col :span="8">占用8份</el-col>
   </el-row>

10. 属性的使用
    一、 行属性使用

    <el-row :gutter="50" tag="span">
      <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
      <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
      <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
      <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
    </el-row>

    二、 列属性的使用

    <el-row>
      <el-col :span="12" :offset="9" :psuh="3" xs><div style="border: 1px blue solid;">我是占用12分</div></el-col>
      <el-col :span="6"><div style="border: 1px blue solid;">我是占用6分</div></el-col>
    </el-row>

    Container 布局容器组件

11. 创建布局容器

    <el-row>
    <el-container>
    </el-container>

12. 容器中包含的子元素

    <el-header>：顶栏容器。
    <el-aside>：侧边栏容器。
    <el-main>：主要区域容器。
    <el-footer>：底栏容器。

13. 容器的嵌套使用

    <!--创建容器-->
    <el-container>
      <!--header-->
      <el-header><div><h1>我是标题</h1></div></el-header>
      <!--容器嵌套使用-->
      <el-container>
        <!--aside-->
        <el-aside><div><h1>我是菜单</h1></div></el-aside>
        <!--main-->
        <el-main><div><h1>我是中心内容</h1></div></el-main>
      </el-container>
      <el-footer><div><h1>我是页脚</h1></div></el-footer>
    </el-container>

14. 水平容器

    <el-container direction="horizontal">
      <!--header-->
      <el-header><div><h1>我是标题</h1></div></el-header>
      <el-container>
        <!--aside-->
        <el-aside><div><h1>我是菜单</h1></div></el-aside>
        <!--main-->
        <el-main><div><h1>我是中心内容</h1></div></el-main>
      </el-container>
      <el-footer><div><h1>我是页脚</h1></div></el-footer>
    </el-container>

15. 垂直容器

    <el-container direction="vertical">
      <!--header-->
      <el-header><div><h1>我是标题</h1></div></el-header>
      <el-container>
        <!--aside-->
        <el-aside><div><h1>我是菜单</h1></div></el-aside>
        <!--main-->
        <el-main><div><h1>我是中心内容</h1></div></el-main>
      </el-container>
      <!--footer-->
      <el-footer><div><h1>我是页脚</h1></div></el-footer>
    </el-container>

    Form相关组件

    Radio单选按钮

16. 创建Radio按钮

    <!--组件创建-->
    <el-radio v-model="label" label="男">男</el-radio>
    <el-radio v-model="label" label="女">女</el-radio>
    <script>
        export default {
            name: "Radio",
            data(){
                return{
                    label:'男'
                }
            }
        }
    </script>

17. Radio按钮属性的使用

    <el-radio v-model="label" name="sex" disabled label="男">男</el-radio>
    <el-radio v-model="label" name="sex" border size="small" label="女">女</el-radio>
    <el-radio v-model="label" border size="mini" label="女">女</el-radio>
    <el-radio v-model="label" border size="medium" label="女">女</el-radio>

18. Radio事件的使用

    <el-radio v-model="label" @change="aa" name="sex" label="男">男</el-radio>
    <el-radio v-model="label" @change="aa" name="sex" border size="small" label="女">女</el-radio>
    <script>
        export default {
            name: "Radio",
            data(){
                return{
                    label:'男'
                }
            },
            methods:{
                aa(){ //定义的事件处理函数
                    console.log(this.label);
                }
            }
        }
    </script>

    事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
    事件在使用时必须使用Vue中绑定时间方式进行使用如 @事件名=事件处理函数(绑在在vue组件中对应函数)

    radio按钮组

    <el-radio-group v-model="radio">
      <el-radio :label="3">备选项3</el-radio>
      <el-radio :label="6">备选项6</el-radio>
      <el-radio :label="9">备选项9</el-radio>
    </el-radio-group>
    <script>
      export default {
        name: "Radio",
        data() {
          return {
            radio: 6
          }
        }
      }
    </script>

    checkbox组件

19. 创建checkbox组件

    <el-checkbox v-model="checked">北京</el-checkbox>
    <el-checkbox v-model="checked">上海</el-checkbox>
    <el-checkbox v-model="checked">天津</el-checkbox>

20. 属性使用

    <el-checkbox v-model="checked"  disabled true-label="北京">北京</el-checkbox>
    <el-checkbox checked border true-label="上海">上海</el-checkbox>
    <el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>

21. 事件使用

    <el-checkbox @change="aa"v-model="checked"  true-label="上海">上海</el-checkbox>
    <el-checkbox v-model="checked" @change="aa" true-label="天津">天津</el-checkbox>
    <script>
        export default {
            name: "Checkbox",
            data(){
                return{
                    checked:true
                }
            },
            methods:{
                aa(){
                    console.log(this.checked);
                }
            }
        }
    </script>

22. 复选框组的使用

    <el-checkbox-group @change="bb" :min="1" v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>
    <script>
        export default {
            name: "Checkbox",
            data(){
                return{
                    checked:true,
                    checkList:[],
                }
            },
            methods:{
                aa(){
                    console.log(this.checked);
                },
                bb(){
                    console.log(this.checkList);
                }
            }
        }
    </script>

    Input 输入框组件

23. 创建Input组件

    <el-input v-model="name"></el-input>
    <script>
        export default {
            name: "Input",
            data(){
                return {
                    name:'xiaochen'
                }
            }
        }
    </script>

24. 常用属性

    <el-input v-model="name" disabled type="textarea"></el-input>
    <el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input>
    <el-input prefix-icon="el-icon-user-solid" placeholder="请输入用户名" clearable v-model="username"></el-input>
    <el-input suffix-icon="el-icon-star-off" placeholder="请输入密码" show-password type="password" clearable v-model="password"></el-input>
    <script>
        export default {
            name: "Input",
            data() {
                return {
                    restaurants: [],
                    state1: '',
                    state2: '',
                    name:'xiaochen',
                    price:0.0,
                    username:"",
                    password:"",
                };
            },
        }
    </script>

25. 事件使用

    <el-input v-model="username" @blur="aaa" @focus="bbb" @clear="clears" clearable @input="ccc"></el-input>
    <script>
        export default {
            name: "Input",
            data() {
                return {
                    restaurants: [],
                    state1: '',
                    state2: '',
                    name:'xiaochen',
                    price:0.0,
                    username:"",
                    password:"",
                };
            },
            methods:{
                aaa(){
                    console.log('失去焦点');
                    ;
                },
                bbb(){
                    console.log("获取焦点");
                },
                ccc(value){
                    console.log("改变:"+value);
                },
                clears(){
                    console.log("清楚");
                }
            }
        }
    </script>

26. 方法的使用

    <h1>方法的使用</h1>
    <el-input v-model="username" ref="inputs"></el-input>
    <el-button @click="focusInputs">focus方法</el-button>
    <el-button @click="blurInputs">blur方法</el-button>
    <script>
        export default {
            name: "Input",
            data() {
                return{}
            },
            methods:{
                //调用focus方法
                focusInputs(){
                    this.$refs.inputs.focus();
                },
               //调用失去焦点方法
                blurInputs(){
                    this.$refs.inputs.blur();
                }
            }
        }
    </script>

    在使用组件的方法时需要在对应的组件中加入 ref=”组件别名”
    在调用方法时直接使用 this.$refs.组件别名.方法名()

elementui 使用注意

**注意:在elementui中所有组件 都存在 属性 事件 和方法
属性: 直接写在对应的组件标签上 使用方式:属性名=属性值方式 事件: 直接使用vue绑定事件方式写在对应的组件标签上 使用方式:`@事件名=vue中事件处理函数
方法: 1.在对应组件标签上使用 ref=组件别名 2. 通过使用this.$refs.组件别名.方法名()进行调用
**

相关链接及原文出处

1. vue3 引入element-ui
2. Element UI组件介绍
3. VUE 官方文档
4. 官方VUE3使用 Element UI