button

button

<el-button>Defalut</el-button>

element周组件显示成几号到几号_javascript

type="primary|success|info|warning|danger"

<el-button plain>Plain</el-button>

element周组件显示成几号到几号_vue.js_02

type="primary|success|info|warning|danger"

<el-button round>Round</el-button>

element周组件显示成几号到几号_前端_03

type="primary|success|info|warning|danger"

 <el-button :icon="Search" circle />

element周组件显示成几号到几号_前端_04

<script  setup>

import {

  Check,

  Delete,

  Edit,

  Message,

  Search,

  Star,

} from '@element-plus/icons-vue'

</script>

<el-button type="primary" :icon="Edit" circle />

element周组件显示成几号到几号_element周组件显示成几号到几号_05

<el-button type="success" :icon="Check" circle />

element周组件显示成几号到几号_element周组件显示成几号到几号_06

<el-button type="info" :icon="Message" circle />

element周组件显示成几号到几号_javascript_07

<el-button type="warning" :icon="Star" circle />

element周组件显示成几号到几号_element周组件显示成几号到几号_08

<el-button type="danger" :icon="Delete" circle />

element周组件显示成几号到几号_前端_09

禁用状态

<el-button disabled>Default</el-button>

添加disabled

链接按钮

<el-button link>button</el-button>

element周组件显示成几号到几号_vue.js_10

添加link

添加样式：

1. type="primary|success|info|warning|danger"

2.渲染

        <template>
            <el-button v-for="button in buttons" :key="button.text" :type="button.type" link >

                {{ button.text }}</el-button>
</template>

<script setup>
        const buttons = [
          { type: '', text: 'plain' },
          { type: 'primary', text: 'primary' },
          { type: 'success', text: 'success' },
          { type: 'info', text: 'info' },
          { type: 'warning', text: 'warning' },
          { type: 'danger', text: 'danger' },
        ]
</script>

文字按钮

<el-button text bg>button</el-button>

element周组件显示成几号到几号_ico_11

没有边框（text）和背景色（bg）的按钮

添加样式同上

按钮图标

<el-button type="..." :icon="..." />

type="primary|success|info|warning|danger"

:icon="Delete | Edit | Search | Share | Upload | ArrowLeft | ArrowRight"

格式：

       1. <el-button type="..." :icon="..." />

       2.  //在图标后面添加内容

           <el-button type="..." :icon="...">

                text
           </el-button>   

        

element周组件显示成几号到几号_ico_12


       3. //在图标前面添加内容

           <el-button type="...">
              text<el-icon class="el-icon--right"><Delete | Edit | Search | Share | Upload /></el-icon>
           </el-button>

        

element周组件显示成几号到几号_ico_13

 需要添加style

<script setup >
import { ArrowLeft，ArrowRight，Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
</script>    

按钮组

<el-button-group>按钮组</el-button-group>

通过<el-button-group>将一组按钮包裹起来

加载按钮

<el-button type="..." loading>Loading</el-button>

element周组件显示成几号到几号_javascript_14

添加loading

按钮大小

<el-button size="..">Large</el-button>

size="large | small"  ，不写默认中等

按钮颜色

<el-button color="..." :dark="isDark">Default</el-button>

添加color=" " :dark="isDark"

js中添加

         button API

Button属性

size

尺寸

type

类型

plain

是否为朴素按钮

text

是否为文字按钮

bg

是否显示文字按钮背景颜色

link

是否为链接按钮

round

是否为圆角按钮

circle

是否为圆形按钮

loading

是否为加载中状态

loading-icon

自定义加载中状态图标组件

disabled

按钮是否为禁用状态

icon

图标组件

autofocus

原生autofocus属性

native-type

原生 type 属性

auto-insert-space

自动在两个中文字符之间插入空格

color

自定义按钮颜色, 并自动计算hover和active触发后的颜色

dark

dark 模式, 意味着自动设置color为 dark 模式的颜色

Button插槽

default

自定义默认内容

loading

自定义加载中组件

icon

自定义图标组件

Button对外暴露的方法

ref

按钮 html 元素

size

按钮尺寸

type

按钮类型

disabled

按钮已禁用

shouldAddSpace

是否在两个字符之间插入空格

         ButtonGroup API

属性

size

用于控制该按钮组内按钮的大小

type

用于控制该按钮组内按钮的类型

插槽

default

自定义按钮组内容

Radio单选框

         单选框格式  <el-radio>

element周组件显示成几号到几号_ico_15

<template>
    <el-radio v-model="radio" label="1">选项</el-radio>
    <el-radio v-model="radio" label="2">选项</el-radio>
</template>

<script>
    export default {
        data(){
            //默认选中的按钮
            return{
                radio:'1'
            }
        }
    }
</script>

        单选框组格式： <el-radio-group>

<template>
    <el-radio-group v-model="radio">
        <el-radio label="1">选项</el-radio>
        <el-radio label="2">选项</el-radio>
    </el-radio-group>
</template>

<script>
    export default {
        data(){
            return{
                radio:'1'
            }
        }
    }
</script>

        单选按钮格式 <el-radio-button>

element周组件显示成几号到几号_element周组件显示成几号到几号_16

<template>
    <el-radio-group v-model="radio">
        <el-radio-button label="1">选项</el-radio-button>
        <el-radio-button label="2">选项</el-radio-button>
    </el-radio-group>
</template>

<script>
    export default {
        data(){
            return{
                radio:'1'
            }
        }
    }
</script>

        Radio Attributes

label

Radio的value

label="number|number|boolean

disabled

是否禁用

默认false

border

是否显示边框

默认false

size

Radio的尺寸，仅当border为true时有效

size="medium|small|mini

name

原生name属性

         Radio Event

change

绑定值变化时触发的事件

@change=" "

回调参数为选中的Radio label值

        Radio-group Attributes

size

按钮组尺寸，仅对按钮形式或带有边框的Radio有效

size="medium|small|mini

disabled

text-color

按钮形式的Radio激活时的文本颜色

text-color=""

默认#fff

fill

按钮形式的Radio被激活时的填充色和边框色

fill=""

默认#409EFF

        Radio-group Events

change

绑定值变化时触发

@change=""

返回选中的Radio label值

Checkbox多选框

         格式：<el-checkbox>

element周组件显示成几号到几号_ico_17

<template>
    <el-checkbox v-model="checked">选项</el-checkbox>
</template>
<script>
    export default{
        data(){
            return{
                checked:true
            }
        }
    }
</script>

        多选框组<el-checkbox-group>

element周组件显示成几号到几号_ico_18

 

<template>
    <el-checkbox-group v-model="checkList">
        <el-checkbox label="A"></el-checkbox>
        <el-checkbox label="B"></el-checkbox>
        <el-checkbox label="C"></el-checkbox>
    </el-checkbox-group>
</template>
<script>
    export default {
        data(){
            //多选
            return{
                checkList:["A","C"]
            }
        }
    }
</scrpit>

         多选按钮<el-checkbox-button> 

element周组件显示成几号到几号_vue.js_19

<template>
  <el-checkbox-group v-model="checkList">
      <el-checkbox-button label="A"></el-checkbox-button>
      <el-checkbox-button label="B"></el-checkbox-button>
      <el-checkbox-button label="C"></el-checkbox-button>
  </el-checkbox-group>
</template>
<script>
  export default {
      data(){
          //多选
          return{
              checkList:["A","C"]
          }
      }
  }
</script>

        与单选框Radio不同的Attributes

checkbox | checkbox-button

true-label

选中时的值

false-label

没有选中的值

checked

当前是否勾选

默认false

indeterminate

设置indeterminate状态，只负责样式控制

默认false

label

选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）

label="string|number|boolean"

checkbox-group

min

可被勾选的checkbox最小数量

min="number"

max

可被勾选的checkbox最大数量

max="number

        获取选中的checkbox的label值

        

element周组件显示成几号到几号_element周组件显示成几号到几号_20

<template>
  <el-checkbox-group v-model="checkedList">
    <el-checkbox label="1">A</el-checkbox>
    <el-checkbox label="2">B</el-checkbox>
  </el-checkbox-group>
  <div>你选择{{checkedList}}</div>
</template>
<script>
  export default{
    data(){
      return{
        checkedList:[]
      }
    }
  }
</script>

Boder边框 

边框样式

border: 1px solid var(--el-border-color)

element周组件显示成几号到几号_element周组件显示成几号到几号_21

border: 1px dashed var(--el-border-color)

element周组件显示成几号到几号_前端_22

圆角

阴影

Container布局容器

        格式：

<el-container>  //外层容器
    <el-header></el-header> //顶栏容器
    <el-aside></el-aside>  //侧边栏容器
    <el-main></el-main>  //主要区域容器
    <el-footer></el-footer>  //底栏容器
</el-container>

         必须被外层容器包裹，子元素与<el-header>和<el-footer>垂直分布，其他都水平分布

        Container Attributes

direction

子元素的排列方向

direction="vertical|horizontal"

子元素中有<el-header>或<el-footer>为vertical，否则为horizontal

        Header Attributes

height

顶栏高度

height="number px"

默认60px

        Aside Attributes

width

侧边栏宽度

width="number px"

默认300px

        Footer Attributes

height

底栏高度

height="number px

默认60px

Icon图标

        1.安装包

npm install @element-plus/icons-vue

        2.注册图标，导入全局变量

        在main.js中添加

// 如果您正在使用CDN引入，请删除下面一行。 import * as ElementPlusIconsVue from '@element-plus/icons-vue' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) }

        浏览器引入

        3.用法

<template>

     //不从父级获取属性
    <el-icon> <Edit /> </el-icon>
    //独立使用它
    <Edit />
</template>

element周组件显示成几号到几号_ico_23

与<e-icon>结合，可以在<e-icon>中添加样式color|type|class|style等

直接使用SVG图标

 <Edit style="width: 1em; height: 1em; margin-right: 8px" />

element周组件显示成几号到几号_ico_24

SVG图标需要提供图标

Layout布局

        通过24分栏，迅速简便的创建布局

        格式： 

<el-row >
    <el-col :span="">...</el-col>
</el-row>

        Row Attributes

gutter

栅格间隔

:gutter="number"

默认为0

type

布局模式，可选flex,可通过justify来定义子元素排版方式

type="flex"

justify

flex布局下的水平排列方式

justift="start|end|center|space-around|space-between

默认start

align

flex布局下的垂直排列方式

align="top|midlle|bottom

默认top

tag

自定义元素标签

默认div

        Col Attributes

span

栅格占列数

:span="number"

默认24（最大值）

offset

栅格左侧偏移的栏数

:offset="number"

默认0

push

栅格向右移动的格数

:push="number"

默认0

pull

栅格向左移动的格数

:pull="number"

默认0

xs|sm|md|lg|xl

tag

自定义元素标签

默认div

 

Link链接

<el-link href="https://element.eleme.io" target="_blank">default</el-link>

element周组件显示成几号到几号_element周组件显示成几号到几号_25

<el-link>..</el-link>

禁用状态

添加disabled属性

取消下划线

<el-link :underline="false">..</el-link>

添加 :underline="flase"

图标链接

<el-link :icon="Edit">Edit</el-link>

element周组件显示成几号到几号_element周组件显示成几号到几号_26

js添加：

滚动条

         Scrollbar

  <el-scrollbar height="400px">{需要添加滚动条的内容}</el-scrollbar>

垂直滚动

通过height属性设置滚动条区域显示高度，若不设置则根据父容器高度自适应

只有当滚动的元素高度大于滚动显示高度才会显示垂直滚动

横向滚动

当滚动的元素宽度大于滚动显示宽度，就会显示横向滚动

手动滚动

使用setScrollTop和setScrollLeft方法实现手动控制滚动条滚动

API

属性：

height（滚动显示高度）

max-height（滚动显示最大高度）

native（是否使用原生滚条样式，默认false）

wrap-style（包裹容器的定义样式）

wrap-class（包裹容器的类名）

view-style（视图的自定义样式）

noresize（不响应容器尺寸变化，默认false）

tag（视图的元素标签，默认div）

alw（滚动条总是显示，默认false）

min-size（滚动条最小尺寸，默认20）

事件：

scroll（当触动滚动事件时，返回滚动的距离）

插槽：

default（自定义默认内容）

对外暴露的方法：

handleScroll（触发滚动事件）

scrollTo（滚动到一组特定坐标）

setScrollTop（设置滚动条到顶部的距离）

setScrollLeft（设置滚动条到左边的距离）

update（手动更新滚动条状态）

wrapRef（滚动条包裹的 ref 对象）

update

手动更新滚动条状态

handleScroll

触发滚动事件

Function

scrollTo

滚动到一组特定坐标

Function

setScrollTop

设置滚动条到顶部的距离

Function

setScrollLeft

设置滚动条到左边的距离

Function

update

手动更新滚动条状态

Function

wrapRef

滚动条包裹的 ref 对象

Object

Space间距

<el-space wrap>{需要统一间距的多个组件}</el-space>

direction

<el-space direction="vertical">...</el-space>

垂直布局

direction="vertical"

相当于添加wrap换行

(direction="horizontal"   水平分布)

size

控制间距大小

：size=“samll（8px）| default（12px）| large（16px）| 自定义”

wrap

<el-space wrap>...</el-space>

自动换行

spacer

<el-space spacer="{用来分隔的字符}">... </el-space>

字母数字类型分隔符

spacer=“{可以是数字、字母、VNode类型字符}”

alignment

<el-space alignment=" ">{多个子节点}</el-space>

对齐

alignment="flex-start | center | flex_end"（默认center）

（容器中子节点的对齐方式）

fill / fillRatio

//自动填充

<el-space :fill=" ">{多个子节点}</el-space>

//自定义填充的比例

<el-space :fillRatio=" ">{多个子节点}</el-space>

填充容器

：fill="false（默认）| true"

子节点是否自动适配容器的宽度

:fillRatio=" {数字} "

（默认100，代表基于父容器宽度的100%填充）

class

类名

prefix-cls

给space-items的类名前缀

prefix-cls="el-space"

style

样式

Config Provider 全局配置

    <el-config-provider>...</el-config-provider>

locale

<template>
       <div>
            <el-config-provider :locale="zhCn">
                      <el-table mb-1 :data="[]" />
            </el-config-provider>
      </div>
</template>

<script setup>
        import zhCN from 'element-plus/dist/locale/zh-tw.mjs'

</script>

翻译文本对象

1.:locale="{组件中的所有语言}"

2.需要在js中引用所选语言（ import zhCN from 'element-plus/dist/locale/{语言名}.mjs'）

3.只能翻译组件中存在的内容

button

<template>
       <div>
            <el-config-provider :button="config">
                 <el-button>中文字符</el-button>
           </el-config-provider>
      </div>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue'

    const config = reactive({
          autoInsertSpace: true|false,
    })
</script>

是否自动在按钮中中文字符间插入空格

button属性：

参数：autoInsertSpace（默认值为false）

message

<template>
  <div>
    <el-config-provider :message="config">
      <el-button @click="open">OPEN</el-button>
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
const config = reactive({
  max: 3,
})
const open = () => {
  ElMessage('This is a message.')
}
</script>

可以同时显示消息的最大数量

Message属性：

参数max

element周组件显示成几号到几号_ico_27

size

全局组件大小

zIndex

全局初始化zIndex值

number

Form表单组件

         Autodcomplete自动补全输入框

<template>
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearch"
        clearable
        class="inline-input w-50"
        placeholder="Please Input"
        @select="handleSelect"
      />

</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface RestaurantItem {
  value: string
  link: string
}

const state = ref('')

const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

const handleSelect = (item: RestaurantItem) => {
  console.log(item)
}

onMounted(() => {
  restaurants.value = loadAll()
})
</script>

属性

placeholder

 placeholder="文本"

  占位文本

表单中显示的内容

clearable

是否可清空

默认false

disabled

自动补全组件是否被禁用

默认false

value-key

输入建议对象中用于显示的键名

model-value / v-model

选中项绑定值

debounce

获取输入建议的防抖延时，单位为毫秒

默认300

placement

菜单弹出位置

默认bottom-start

fetch-suggestions

获取输入建议的方法， 仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它

popper-class

下拉列表的类名

trigger-on-focus

:trigger-on-focus="true|false"

点击表单的时候会不会显示输入建议

默认true

name

等价于原生 input name属性

select-when-unmatched

在输入没有任何匹配建议的情况下，按下回车是否触发select事件

默认false

label

输入框关联的 label 文字

hide-loading

是否隐藏远程加载时的加载图标

false

popper-append-to-body(deprecated)

是否将下拉列表插入至 body 元素。 在下拉列表的定位出现问题时，可将该属性设置为 false

默认false

teleported

是否将下拉列表元素插入 append-to 指向的元素下

默认true

highlight-first-item

是否默认高亮远程搜索结果的第一项

默认false

highlight-first-item

是否默认高亮远程搜索结果的第一项

默认false

fit-input-width

下拉框的宽度是否与输入框相同

默认false

事件

select

点击选中建议项时触发

change

在 Input 值改变时触发

插槽

default

自定义输入建议的内容。 自定义标签，参数为

prefix

输入框头部内容

suffix

输入框尾部内容

prepend

输入框前置内容，在 prefix 之前

append

输入框后置内容，在 suffix 之后

对外暴露成员

activated

自动补全输入框是否被激活

对象

blur

使 input 失去焦点

close

折叠建议列表

focus

使 input 获取焦点

handleSelect

手动触发选中建议事件

handleKeyEnter

手动触发键盘回车事件

highlightedIndex

当前高亮显示选项的索引

highlight

在建议中高亮显示一个项目

inputRef

el-input 组件实例

loading

远程获取提示内容的加载状态指示器

popperRef

el-tooltip 组件实例

suggestions

suggestions

        Cascader级联选择器

属性

model-value / v-model

选中项绑定值

options

可选项数据源，键名可通过Props属性配置

props

:props=" "

expandTrigger:'hover|click(默认)'

次级菜单的展开方式（click点击展开，hover鼠标放在上面就展开）

<el-cascader
      v-model="value"

     :options="options" 

 :props="props" 

    @change="handleChange"
    />

<script>

        const props = {
  expandTrigger: 'hover|click',
}

</script>

multiple

是否多选