• elementUI 学习- Layout布局 与UI 设定


    Layout布局

    1.创建布局

    通过Col组件的:span属性调整Layout布局,分为24栏。

    el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    

      

    2.分栏间隔

    通过Row组件的:gutter属性来调整布局之间的宽度

    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    

      

    3.分栏漂移

    通过Col组件的:offset属性调整栅格的偏移位置(每次1格/24格)。

    <el-row :gutter="20">
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    

      

    4.对齐方式

    通过Row组件的type="flex"启动flex布局,再通过Row组件的justify属性调整排版方式,属性值分别有

    start 居前(默认)
    center 居中
    end 居后
    space-between 分布自适应(两边–中间,两边没有空隙)
    around (中间–两边,两边会有空隙)

    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    

      

    5.响应式布局

    参考bootstrap的响应式,预设四个尺寸

    1. xs <768px
    2. sm ≥768px
    3. md ≥992
    4. lg ≥1200
      <el-row :gutter="10">
        <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      

        

      ICON图标

      今后可以使用<i>来做图标,给其class添加el-icon-iconName即可。 
      可以在<button>上添加icon属性。

      <i class="el-icon-edit"></i>
      <i class="el-icon-share"></i>
      <i class="el-icon-delete"></i>
      <el-button type="primary" icon="search">搜索</el-button>
      

        

      Button图标

      1.主题风格

      1. default
      2. primary 蓝色
      3. text 文字蓝色无边框
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="text">文字按钮</el-button>
        

          2.禁用状态 
        通过修改:disabled的boolean值true,false来控制按钮是否禁用。

        <el-button :plain="true" :disabled="true">主要按钮</el-button>
        <el-button type="primary" :disabled="true">主要按钮</el-button>
        <el-button type="text" :disabled="true">文字按钮</el-button>
        

          

        3.颜色暗示

        1. 默认按钮,通过type的值来控制
        2. 朴素按钮,hover显示颜色 ,通过plain的boolean值来控制

        4.图标按钮

        按钮不添加字,设置icon属性即可

      4. <el-button type="primary" icon="edit"></el-button>
        

          按钮添加字,图标居按钮文字左侧

        <el-button type="primary" icon="search">搜索</el-button>
        

          可以在<button>文字右侧添加<i>标签,图标居按钮文字右侧

        <el-button type="primary">上传
        <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        

          

        5.加载中

        设置loading属性为true即可

        <el-button type="primary" :loading="true">加载中</el-button>
        

          

        6.按钮尺寸

        设置size属性来配置

          • large 大
          • 正常
          • small 小
          • mini 超小 
            其他
          • autofocus:是否默认对焦,boolean
          • native-type:原生type,string(button,submit,reset)
          • Radio单选框(label前面到底加不加:冒号)

            1.基本用法

            v-model属性用来绑定变量

            label用来赋值(想要选中该单选框,label的值必须等于v-model绑定的变量值,Number/String)

          • <template>
              <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>
              <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>
            </template>
             
            <script>
              export default {
                data () {
                  return {
                    radio: '1'
                  };
                }
              }
            </script>
            

              

            2.禁用状态

            设置disableed的boolean值为true

          • <template>
              <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
              <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
            </template>
             
            <script>
              export default {
                data () {
                  return {
                    radio1: '选中且禁用'//此处变量值等于label变量值
                  };
                }
              }
            </script>
            

              

            3.单选框组

            <el-radio-group> </el-radio-group> 包含即可。

            只需要在<el-radio-group>中绑定v-model, 
            <el-radio>中设置:label即可。 
            (提供可一个change方法响应变化,会传入一个value值)

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

              

            4.按钮组(单选)

            个人炒鸡喜欢 
            lable就是显示的值 
            在按钮组当中添加<el-radio-button>就可以实现, 
            并且支持对size属性设置largesmall两个属性,不设置为默认。

          • <el-radio-group v-model="radio5" :disabled="true">
                <el-radio-button label="上海" :disabled="true">
                </el-radio-button>
                <el-radio-button label="北京"></el-radio-button>
                <el-radio-button label="广州"></el-radio-button>
                <el-radio-button label="深圳"></el-radio-button>
              </el-radio-group>
            </template>
             
            <script>
              export default {
                data () {
                  return {
                    radio5: '上海'
                  };
                }
              }
            </script>
            

              

            CheckBox单选框

            1.基础用法 
            设置v-model属性绑定变量。

          • <template>
              <!-- `checked` 为 true 或 false -->
              <el-checkbox v-model="checked">备选项</el-checkbox>
            </template>
            <script>
              export default {
                data() {
                  return {
                    checked: true
                  };
                }
              };
            </script>
            

              

            • 2.禁用状态 

            设置disabled属性即可。

          • <el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
            

              

  • 相关阅读:
    【Azure Developer】Windows中通过pslist命令查看到Java进程和线程信息,但为什么和代码中打印出来的进程号不一致呢?
    【Azure 服务总线】详解Azure Service Bus SDK中接收消息时设置的maxConcurrentCalls,prefetchCount参数
    【Azure 应用服务】App Service站点Header头中的中文信息显示乱码?当下载文件时,文件名也是乱码?
    【Azure 应用服务】Azure App Service 自带 FTP服务
    【Azure 微服务】PowerShell中,用Connect-ServiceFabricCluster命令无法连接到sf-test.chinaeast2.cloudapp.chinacloudapi.cn:19000 问题分析
    【Azure Developer】Python 获取Micrisoft Graph API资源的Access Token, 并调用Microsoft Graph API servicePrincipals接口获取应用ID
    【Azure Developer】Visual Studio 2019中如何修改.Net Core应用通过IIS Express Host的应用端口(SSL/非SSL)
    【Azure 应用服务】Azure SignalR 是否可以同时支持近十万人在线互动
    Markedown实现
    vue-router的使用之如何让导航栏实现一种动态数据 与 如何实现导航栏刷新页面保持状态不变
  • 原文地址:https://www.cnblogs.com/chenglideyueguang/p/9923407.html
Copyright © 2020-2023  润新知