Element-UI-应用与静态网页部署

Element-UI

安装
# 在 vue 项目中启动终端执行
vue add element
# 安装过程中可以选择按需加载
  • 按需加载

    按需加载
    Element-UI-应用与静态网页部署_第1张图片
基础使用
  • 引入

<template>
  <div>
    <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>
    <router-view />
  div>
template>
  • 渲染

    Button使用
    Element-UI-应用与静态网页部署_第2张图片
  • 属性介绍: 使用typeplainroundcircle属性来定义 Button 的样式。

  • 灵活使用属性即可获得想要的结果

Layout 布局
  • 通过基础的 24 分栏,迅速简便地创建布局。

  • offset属性使用

    offset
    Element-UI-应用与静态网页部署_第3张图片
RadioButton
  • 使用
<template>
    <div class="radio-button">
        <template>
            <el-radio v-model="label" label="">el-radio>
            <el-radio v-model="label" label="">el-radio>
        template>
        <router-view />
    div>
template>

<script>

export default ({
   data(){
       return{
           label:'男'
       }
   }
})
script>

<style scoped>
.radio-button{
    margin: 50px;
}
style>
  • 渲染

    radio-button使用需要与v-model共同配合
    Element-UI-应用与静态网页部署_第4张图片
Input
input
Element-UI-应用与静态网页部署_第5张图片
  • 在使用组件的方法时需要在对应的组件中加入ref="组件别名"
  • 在调用方法时直接使用this.$refs.组件别名.方法名()
  • element-ui中所有组件标签上,使用方式属性名=属性值方式
    • 属性: 直接写在对应的组件标签上,使用方式属性名=属性值方式
    • 事件: 直接使用vue绑定事件方式写在对应的组件标签上,使用方式@事件名=vue中事件的处理函数
Select
<template>
    <div class="select">
        <template>
            <el-select v-model="value" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                el-option>
            el-select>
        template>
        <router-view>router-view>
    div>

template>

<script>
export default {
    name: "Select",
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: ''
        }
    }
}
script>

<style scoped>
.select {
    margin: 50px;
}
style>
Switch 开关组件
  • 使用
<template>
    <div class="div">
        <el-switch
            v-model="value"
            
                    

你可能感兴趣的:(ui,vue.js,elementui)