vue -- 03 -- element-ui

1. 安装

• 使用 npm i element-ui -S 命令安装 element-ui
• 可以查看官网，快速入门 element-ui官网

2. 导入Element-ui

• main.js 中

  // The Vue build version to load with the `import` command
  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  import Vue from 'vue'
  import App from './App'
  import router from './router'
  
  Vue.config.productionTip = false
  
  //导入element
  import ElementUI from 'element-ui';
  //导入element的css
  import 'element-ui/lib/theme-chalk/index.css';
  //使用element
  Vue.use(ElementUI);
  
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
  })
  
  

• 修改 Car.vue

  <template>
    <!-- 不能直接写 {{msg}}
     会报错 Component template requires a root element, rather than just text-->
    <h1>
      {{msg}}
      <br />
      <!-- 1.图标的效果 -->
      <i class="el-icon-eleme">饿了么</i>
      <br />
      <i class="el-icon-edit">修改</i>
      <br />
      <i class="el-icon-loading"></i>
  
    </h1>
  </template>
  
  <script>
    /* 支持导出的自定义组件 */
    export default{
      name:'Car',
      data() {
        return {
          msg: "hello components"
        }
      }
    }
  </script>
  
  <style>
  </style>
  
  

3. 布局测试

• 栅格体系，默认把一行分为24栏，可以设置合并多少列
• 并且PC和移动端自适应

<template>
  <!-- 不能直接写 {{msg}}
   会报错 Component template requires a root element, rather than just text-->
  <h1>
    {{msg}}
    <br />
    <!-- 2.栅栏的效果
          el-row是行，el-col是列，:span是自定义合并的列数-->
    <el-row>
      <el-col :span="8"><div class="grid-content bg-purple">hello</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple-light">hello</div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple">hello</div></el-col>
    </el-row>

  </h1>
</template>

<script>
  /* 支持导出的自定义组件 */
  export default{
    name:'Car',
    data() {
      return {
        msg: "hello components"
      }
    }
  }
</script>

<style>
   .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
</style>

4. 按钮

<template>
  <!-- 不能直接写 {{msg}}
   会报错 Component template requires a root element, rather than just text-->
  <h1>
    {{msg}}
    <!-- 3. 按钮 -->
    <el-row>
      <el-button type="primary" plain>关机</el-button>
      <el-button type="danger" icon="el-icon-switch-button" circle></el-button>
    </el-row>
  </h1>
</template>

<script>
  /* 支持导出的自定义组件 */
  export default{
    name:'Car',
    data() {
      return {
        msg: "hello components"
      }
    }
  }
</script>

<style>
</style>

5. 输入框

<template>
  <!-- 不能直接写 {{msg}}
   会报错 Component template requires a root element, rather than just text-->
  <h1>
    {{msg}}

    <!-- 4. 输入框 -->
    <el-row>
      <!-- 输入框必须配置v-model属性 -->
      <el-col :span="4">
        <el-input v-model="msg" placeholder="请输入用户名"></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="msg" placeholder="请输入密码" show-password></el-input>
      </el-col>
      <el-col :span="4">
        <el-input v-model="msg" placeholder="可清空的输入框" clearable></el-input>
      </el-col>
    </el-row>
  </h1>
</template>

<script>
  /* 支持导出的自定义组件 */
  export default{
    name:'Car',
    data() {
      return {
        msg: "hello components"
      }
    }
  }
</script>

<style>
   .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
</style>

6. 表格

<template>
  <!-- 不能直接写 {{msg}}
   会报错 Component template requires a root element, rather than just text-->
  <h1>
    {{msg}}
    <br />

    <!-- 5. 表格
         el-table-column表格里的列，label是列名 prop是对应arr数组的字段名
         stripe 设置斑马纹的表格,默认不写就是没有斑马纹-->
    <el-table :data="arr" stripe="true">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="品牌" prop="name"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
    </el-table>
  </h1>
</template>

<script>
  /* 支持导出的自定义组件 */
  export default{
    name:'Car',
    data() {
      return {
        msg: "hello components",
        //给表格准备多个数据
        arr:[
          {
            id:'001',
            name:'华为',
            price:6666,
            desc:'华为手机'
          },
          {
            id:'002',
            name:'鸿星尔克',
            price:300,
            desc: 'To be number one'
          },
          {
            id:'003',
            name:'蜜雪冰城',
            price:15,
            desc:'你爱我 我爱你 蜜雪冰城甜蜜蜜'
          }
        ]
      }
    }
  }
</script>

<style>
   .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
</style>

7. 超链接及单选按钮

<template>
  <!-- 不能直接写 {{msg}}
   会报错 Component template requires a root element, rather than just text-->
  <h1>
    {{msg}}
    <br />

    <!-- 6. 表单 -->
    <!-- el-link超链接，href设置网址，target设置打开方式，type是颜色-->
    <el-link href="#" target="_blank" type="success">超链接</el-link>
    <!-- el-radio是单选框，v-model是双向绑定，是指把label的值交给msg去管理-->
    <el-radio v-model="msg" label="1">单选框</el-radio>
    <el-radio v-model="msg" label="2">单选框</el-radio>

    
  </h1>
</template>

<script>
  /* 支持导出的自定义组件 */
  export default{
    name:'Car',
    data() {
      return {
        msg: "hello components"
      }
    }
  }
</script>

<style>
</style>

8. 综合form表单

<template>
  <!-- 不能直接写 {{msg}}
   会报错 Component template requires a root element, rather than just text-->
  <h1>
    {{msg}}
    <br />
    
    <!-- 7. from表单，用于提交数据，:model用来获取指定的数据 -->
    <el-form :model="goods" label-width="80px">
      <!-- el-form-item表单项，label是名称 -->
      <el-form-item label="标题">
        <el-input v-model="goods.name"></el-input>
      </el-form-item>
      <el-form-item label="卖点">
        <el-input v-model="goods.msg" placeholder="请输入卖点"></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="请选择日期" v-model="goods.date" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker placeholder="选择时间" v-model="goods.time" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="价格">
        <el-input placeholder="请输入价格" v-model="goods.price"></el-input>
      </el-form-item>
      <el-form-item label="详情">
        <el-input placeholder="请输入详情" v-model="goods.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </h1>
</template>

<script>
  /* 支持导出的自定义组件 */
  export default{
    name:'Car',
    data() {
      return {
        msg: "hello components",
        //给表单准备数据
        goods:{
          name:'夏令营',
          msg: '',
          date: '',
          time: '',
          price:'',
          desc:''
        }
      }
    },
    methods:{
      onSubmit(){
        alert("保存成功！");
      }
    }

  }
</script>

<style>
    .el-form{
      width: 460px;
      margin-left: 50px;
    }
</style>