Element UI 应用精讲

本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。Element UI 应用前言一、Element 快速上手1.1、Element 是什么1.2、Element2.13.1 快速上手二、Layout 布局2.1、清理脚手架中组件原有内容2.2、Layout 布局示例2.3、使用动态 css——通过 less三、Container

小小福仔

2121人浏览 · 2022-05-16 22:28:49

小小福仔 · 2022-05-16 22:28:49 发布

本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

Element UI 应用

前言
一、Element 快速上手
- 1.1、Element 是什么
- 1.2、Element2.13.1 快速上手
二、Layout 布局
三、Container 布局容器和 Color 色彩
四、Typography 字体和 Border 边框
五、Icon 图标、按钮和 Link 文字链接
六、Radio 单选框和 Checkbox 多选框
七、Input 输入框和 InputNumber 计数器

前言

今天学习的主要是关于Element UI 的应用，快速上手Element UI 知识的理解和应用

一、Element 快速上手

1.1、Element 是什么

Element 是Element 团队提供的一套基于 Vue2.0 的组件库，可以快速搭建网站，提高开发效率。还有 ivew 也是基于 vue.js 的组件库，（类似于 BootStrap）有基于 PC 端和移动端的两套 UI。分别是ElementUI 和 MintUI
【element 参考官网】https://element.eleme.cn/#/zh-CN
【ivew 官网】http://v1.iviewui.com/

1.2、Element2.13.1 快速上手

（1）通过 vue-cli 初始化一个项目
进入存放项目的根文件夹，打开 cmd 窗口，输入下面命令创建项目
第 1 个执行的命令：vue create vue-cli-element
具体可以参见上一章 vue-cli-demo1。
（2）安装 element UI 插件【我们采用的是@vue/cli4.x 版本，需要下面方法安装】
第 2 个执行的命令：cd vue-cli-element
第 3 个执行的命令：vue add element 或 npm i element-ui –S选择前面的，如果选择后面过程有点不一样哦【第四篇综合项目用】。
说明：安装好后会在 src 下生成/plugins/element.js，打开该 js文件，内容如下：
import Vue from ‘vue’
import Element from ‘element-ui’
import 'element-ui/lib/theme-chalk/index.css
Vue.use(Element)
（3）运行下项目
npm run serve
效果与上一章的 vue-cli-demo1 有点不同，如下:
（4）在入口文件 main.js 中引入 element-ui【全局引入】

import Vue from 'vue' 
import App from './App.vue' 
import './plugins/element.js' 
import ElementUI from 'element-ui' //element-ui 不能写错，是组件名称。这里引入的是 js 文件，还要单独引入 css 文件
import 'element-ui/lib/theme-chalk/index.css';//index.css 这个文件当然在项目下的相应目录下有的，如下图红色线框住
Vue.use(ElementUI);//指明使用 ElementUI
Vue.config.productionTip = false
new Vue({
render: h => h(App), }).$mount('#app')

通过以上4、5、6句黄色底纹代码实际上引入了 ElementUI 中的所有组件，这种方式简洁。但是实际开发中有时可能只要用到 ElementUI中的 1-2 个组件，而全部引入导致整个文件没有必要。因此也可以按需引入

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码测试各个组件了。下面讲解些主要的组件使用。
说明：我们也可以单独建一个组件来使用这些 element UI. （1）在 componets 文件夹下新建组件（2）在 App.vue 中使用组件。3 个步骤，导入、注册、使用。

二、Layout 布局

2.1、清理脚手架中组件原有内容

为了更好的演示效果，把 App.vue 和 HelloWorld.vue 组件
template 中的内容删除大部分，如下：
HelloWorld.vue 剩下如下代码:
<template>
<div class=“hello”>
<h1>{{ msg }}</h1>
</div>
</template>
App.vue 剩下如下代码
<template>
<div id=“app”>
<HelloWorld msg=“Welcome to Your Vue.js App”/>
</div>
</template>

2.2、Layout 布局示例

通过基础的 24 分栏，迅速简便地创建布局。
使用方法：选择需要的效果，然后单击显示代码，就会显示出相应的代码。

示例 1：效果
在这里插入图片描述
html 代码：1 行 4 列表

<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-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>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就
可以自由地组合布局【相当于宽度属性，总宽度为 24 份】。
gutter 属性来指定每一栏之间的间隔，默认间隔为 0

style 代码：

<style lang="less">/*<!--必须指定 lang="less"，如果报错则可能是没有安装 less less-loader，继续往下学习会教你如何安装-->*/
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>

2.3、使用动态 css——通过 less

总结：
4.X 版本的脚手架默认已经安装了，并配置好了相应 loader，如果不是应用这个脚手架先下载less和lessloader。
然后在<style lang=“less”></style>。中运用这个属性，这样就可以在css中定义变量、函数、Mixin了。然后要用的话就直接引用这些定义的就行了。

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、函数、Mixin(是一种简化代码的方法,能够提高代码的重复使用率)等特性，使 CSS 更易维护和扩展。通俗说采用了 less 语法，css可以使用变量、函数了。
【参考】http://lesscss.cn/
需要安装 less 和 less-loader 插件的支持，我们这个 4.X 版本的脚手架默认已经安装了，并配置好了相应 loader，若没有安装则执行下面命令：
npm install less less-loader -D
接下来可以使用 less 语法了，如上面的 style 中使用了，并且必须在 style 标签后指明 lang=“less”。比如在 App.vue 中，上面的css代码改成如下:

<style lang="less">/*必须指定 lang="less"*/
……
.bg-purple {
background: @color;/*引用变量*/
.h(50px);
}
@color:#f00 /*定义变量*/
.h(@height){ /*此为定义函数，方法名前面以.开头*/
height:@height
}
...
</style>

最终运行效果如下：
在这里插入图片描述

定义在哪呢？比如我要定义 h1 中字体颜色也为红色，就可以使用变
量@color。
h1{
color:@color
}

三、Container 布局容器和 Color 色彩

3.1、Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container> ：外层容器。当子元素中包
含或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否容。
此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>

示例：

<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</template>
<style>
/*css代码省略不写*/
</style>

在这里插入图片描述
具体代码见官网

3.2、Color 色彩

Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

3.2.1、主色

Element 主要品牌颜色是鲜艳、友好的蓝色。

在这里插入图片描述

3.2.2、辅助色

除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。

在这里插入图片描述

3.2.3、中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

在这里插入图片描述

四、Typography 字体和 Border 边框

4.1、Typography 字体

我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。

4.1.1、字号

在这里插入图片描述

4.1.2、行高

在这里插入图片描述

4.1.3、Font-family 代码

font-family: "Helvetica Neue",Helvetica,"PingFang SC","HiraginoSans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

4.2、Border 边框

我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。

4.2.1、边框

在这里插入图片描述

4.2.2、圆角

在这里插入图片描述

4.2.3、投影

在这里插入图片描述

五、Icon 图标、按钮和 Link 文字链接

5.1、Icon 图标

提供了一套常用的图标集合。

5.1.1、使用方法

直接通过设置类名为图标的名称来使用即可。例如：

在这里插入图片描述
代码：

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

5.1.2、图标集合（部分），全部的参见官网

在这里插入图片描述

5.2、Button 按钮

常用的操作按钮。

5.2.1、基础用法

使用 type、plain、round 和 circle 属性来定义 Button 的样

在这里插入图片描述

<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>
<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>
<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>
<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.2.2、禁用状态

按钮不可用状态。
你可以使用 disabled 属性来定义按钮是否可用，它接受一个Boolean 值。

在这里插入图片描述

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

5.2.3、文字按钮

在这里插入图片描述

<el-button type="text">文字按钮</el-button>
<el-button type="text" disabled>文字按钮</el-button>

5.2.4、图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。
设置 icon 属性即可，icon 的列表可以参考 Element 的 icon
组件，也可以设置在文字右边的 icon ，只要使用 i 标签即可，可以使用自定义图标。

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

5.2.5、按钮组

以按钮组的方式出现，常用于多项类似操作

在这里插入图片描述

使用<el-button-group>标签来嵌套你的按钮。

<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页
</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right
el-icon--right"></i></el-button>
</el-button-group>
<el-button-group>
<el-button type="primary" icon="el-icon-edit"></el-button>
<el-button type="primary" icon="el-icon-share"></el-button>
<el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

5.2.6、加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

在这里插入图片描述

要设置为 loading 状态，只要设置 loading 属性为 true 即可。

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

5.2.7、不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

在这里插入图片描述

额外的尺寸：medium、small、mini，通过设置 size 属性来配置它们。

<el-row>
<el-button>默认按钮</el-button>
<el-button size="medium">中等按钮</el-button>
<el-button size="small">小型按钮</el-button>
<el-button size="mini">超小按钮</el-button>
</el-row>
<el-row>
<el-button round>默认按钮</el-button>
<el-button size="medium" round>中等按钮</el-button>
<el-button size="small" round>小型按钮</el-button>
<el-button size="mini" round>超小按钮</el-button>
</el-row>

5.3、Link 文字链接

文字超链接

5.3.1、基础用法

在这里插入图片描述

<el-link href="https://element.eleme.io" target="_blank">默认链
接</el-link>
<el-link type="primary">主要链接</el-link>
<el-link type="success">成功链接</el-link>
<el-link type="warning">警告链接</el-link>
<el-link type="danger">危险链接</el-link>
<el-link type="info">信息链接</el-link>

5.3.2、禁用状态

文字链接不可用状态。

在这里插入图片描述

<el-link disabled>默认链接</el-link>
<el-link type="primary" disabled>主要链接</el-link>
<el-link type="success" disabled>成功链接</el-link>
<el-link type="warning" disabled>警告链接</el-link>
<el-link type="danger" disabled>危险链接</el-link>
<el-link type="info" disabled>信息链接</el-link>

5.3.3、下划线

文字链接下划线。

在这里插入图片描述

<el-link :underline="false">无下划线</el-link>
<el-link>有下划线</el-link>

六、Radio 单选框和 Checkbox 多选框

6.1、Radio 单选框

在一组备选项中进行单选。

6.1.1、基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

在这里插入图片描述

要使用 Radio 组件，只需要设置 v-model 绑定变量，选中意
味着变量的值为相应 Radio label 属性的值，label 可以是 String、Number 或 Boolean。
主要代码就是黄色底纹的。
<template>
<div id=“app”>
{{radio}}
<el-radio v-model=“radio” label=“1”>备选项</el-radio>
<el-radio v-model=“radio” label=“2”>备选项</el-radio>
</div>
</template>
<script>
export default {
name: “App”,
data() {
return {
radio: ‘1’ };
}
};
</script>

6.1.2、禁用状态

单选框不可用的状态。

在这里插入图片描述

只要在 el-radio 元素中设置 disabled 属性即可，它接受一个Boolean，true 为禁用

<template>
<el-radio disabled v-model="radio" label="禁用">备选项
</el-radio>
<el-radio disabled v-model="radio" label="选中且禁用">备选项
</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '选中且禁用'
};
}
}
</script>

6.1.3、单选框组

适用于在多个互斥的选项中选择的场景。

在这里插入图片描述

结合 el-radio-group 元素和子元素 el-radio 可以实现单选组，在 el-radio-group 中绑定 v-model，在 el-radio 中设置好 label 即可，无需再给每一个 el-radio 绑定变量，另外，还提供了 change事件来响应变化，它会传入一个参数 value

<template>
<el-radio-group v-model="radio">
<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 {
radio: 3
};
}
}
</script>

6.1.4、按钮样式

在这里插入图片描述

6.1.5、带有边框

在这里插入图片描述

6.2、Checkbox 多选框

6.2.1、基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为checkbox 按钮后的介绍

在这里插入图片描述

在 el-checkbox 元素中定义 v-model 绑定变量，单一的checkbox 中，默认绑定变量的值会是 Boolean，选中为 true。

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

6.2.2、禁用状态

在这里插入图片描述

设置 disabled 属性即可

<template>
<el-checkbox v-model="checked1" disabled>备选项 1</el-checkbox>
<el-checkbox v-model="checked2" disabled>备选项</el-checkbox>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: true
};
}
};
</script>

6.2.3、多选框组

在这里插入图片描述

6.2.4、indeterminate 状态

indeterminate属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

在这里插入图片描述

七、Input 输入框和 InputNumber 计数器

7.1、Input 输入框

通过鼠标或键盘输入字符

7.1.1、基础用法

在这里插入图片描述

<el-input v-model="input" placeholder="请输入内容"></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>

7.1.2、可清空

使用 clearable 属性即可得到一个可清空的输入框

在这里插入图片描述

<el-input
placeholder="请输入内容"
v-model="input"
clearable>
</el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>

7.1.3、密码框

在这里插入图片描述

使用 show-password 属性即可得到一个可切换显示隐藏的密码框。

<el-input placeholder="请输入密码" v-model="input"
show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>

7.1.4、带 icon 的输入框

带有图标标记输入类型

在这里插入图片描述

7.1.5、文本域

用于输入多行文本信息，通过将 type 属性的值指定为 textarea

<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea">
</el-input>
<script>
export default {
data() {
return {
textarea: ''
}
}
}
</script>

7.2、InputNumber 计数器

仅允许输入标准的数字值，可定义范围。

7.2.1、基础用法

在这里插入图片描述

要使用它，只需要在 el-input-number 元素中使用 v-model 绑定变量即可，变量的初始值即为默认值。

<template>
<el-input-number v-model="num"
@change="handleChange" :min="1" :max="10" label="描述文字
"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>

7.2.2、禁用状态

在这里插入图片描述

disabled 属性接受一个 Boolean，设置为 true 即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max属性。

<template>
<el-input-number
v-model="num" :disabled="true"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
}
}
};
</script>

7.2.3、步数

允许定义递增递减的步数控制。
设置 step 属性可以控制步长，接受一个 Number

在这里插入图片描述

<template>
<el-input-number v-model="num" :step="2"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 5
}
}
};
</script>

7.2.4、按钮位置

设置 controls-position 属性可以控制按钮位置。

在这里插入图片描述

设置left是一左一右噢，设置right如上

<template>
<el-input-number v-model="num" controls-position="right"
@change="handleChange" :min="1" :max="10"></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods: {
handleChange(value) {
console.log(value);
}
}
};
</script>

更多其他组件请看官网：
Element组件

💕 $\textcolor{blue}{原创不易，还希望各位大佬支持一下}$

👍 $\textcolor{orange}{点赞，你的认可是我创作的动力！}$

⭐ $\textcolor{red}{收藏，你的青睐是我努力的方向！}$

🥕 $\textcolor{green}{评论，你的意见是我进步的财富！}$

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

vue+element ui实现好看的登录界面

ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

ViewDesign

所有评论(0)

查看更多评论

小小福仔

@qq_46152664

已为社区贡献1条内容

Element UI 应用精讲

小小福仔

Element UI 应用

前言

一、Element 快速上手

1.1、Element 是什么

1.2、Element2.13.1 快速上手

二、Layout 布局

2.1、清理脚手架中组件原有内容

2.2、Layout 布局示例

2.3、使用动态 css——通过 less

三、Container 布局容器和 Color 色彩

3.1、Container 布局容器

3.2、Color 色彩

3.2.1、主色

3.2.2、 辅助色

3.2.3、中性色

四、Typography 字体和 Border 边框

4.1、Typography 字体

4.1.1、字号

4.1.2、行高

4.1.3、Font-family 代码

4.2、Border 边框

4.2.1、边框

4.2.2、圆角

4.2.3、投影

五、Icon 图标、按钮和 Link 文字链接

5.1、Icon 图标

5.1.1、使用方法

5.1.2、图标集合（部分），全部的参见官网

5.2、Button 按钮

5.2.1、基础用法

5.2.2、禁用状态

5.2.3、文字按钮

5.2.4、图标按钮

5.2.5、按钮组

5.2.6、加载中

5.2.7、不同尺寸

5.3、Link 文字链接

5.3.1、基础用法

5.3.2、禁用状态

5.3.3、下划线

六、Radio 单选框和 Checkbox 多选框

6.1、Radio 单选框

6.1.1、基础用法

6.1.2、禁用状态

6.1.3、单选框组

6.1.4、按钮样式

6.1.5、带有边框

6.2、Checkbox 多选框

6.2.1、基础用法

6.2.2、禁用状态

6.2.3、多选框组

6.2.4、indeterminate 状态

七、Input 输入框和 InputNumber 计数器

7.1、Input 输入框

7.1.1、基础用法

7.1.2、可清空

7.1.3、密码框

7.1.4、带 icon 的输入框

7.1.5、文本域

7.2、InputNumber 计数器

7.2.1、基础用法

7.2.2、禁用状态

7.2.3、步数

7.2.4、按钮位置

所有评论(0)

小小福仔

3.2.2、辅助色