aihiao的专栏

1. 使用图形化界面的方式创建项目1.1. 使用命令vue ui, 打开图形化界面1.2.在浏览器中创建项目1.3.点击创建按钮, 选择创建项目的路径, 然后点击在此创建新项目1.4.起一个项目名称, 包管理器使用默认的即可, 我们不使用git, 点击下一步按钮1.5.选择手动配置项目, 点击下一步按钮1.6.选择如下功能, 点击下一步按钮1.7.选择如下配置, 点击创建项目按钮1.8.创建项目, 不保存预设1....

1. Container布局容器1.1. Container布局容器是用于布局的容器组件, 方便快速搭建页面的基本结构。1.2. <el-container>外层容器。当子元素中包含<el-header>或<el-footer>时, 全部子元素会垂直上下排列, 否则会水平左右排列。1.3. <el-header>顶栏容器。1.4. <el-aside>侧边栏容器。1.5. <el-main>主要区域容器。1.6.

1. Color色彩1.1. Element为了避免视觉传达差异, 使用一套特定的调色板来规定颜色, 为你所搭建的产品提供一致的外观视觉感受。2. 主色2.1. Element主要品牌颜色是鲜艳、友好的蓝色。3. 辅助色3.1. 除了主色外的场景色, 需要在不同的场景中使用(例如危险色表示危险的操作)。4. 中性色4.1. 中性色用于文本、背景和边框颜色。通过运用不同的中性色, 来表现层次结构。5. Color色彩例子5.1. 使用脚手架新建一个名为elem.

1. Icon图标1.1. ElementUI提供了一套常用的图标集合。1.2. 直接通过设置类名为el-icon-iconName来使用即可。2. Icon图标例子2.1. 使用脚手架新建一个名为element-ui-icon的前端项目, 同时安装Element插件。2.2. 编写App.vue<template> <div id="app"> <table> <tr> <td&g.

1. Button按钮1.1. 常用的操作按钮。1.2. 按钮属性 参数 说明 类型 可选值 默认值 size 尺寸 string medium / small / mini 无 type 类型 string p

1. Radio单选框1.1. 在一组备选项中进行单选。1.2. Radio属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 string / number / boolean 无 无 label Radio的value

1. Checkbox多选框1.1. 一组备选项中进行多选。1.2. Checkbox属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 string / number / boolean 无 无 label 选中状态的值(只有

1. Input输入框1.1. 通过鼠标或键盘输入字符。1.2. 输入框属性 参数 说明 类型 可选值 默认值 type 类型 string text, textarea和其他原生input的type值 text value / v-model 绑定值

1. InputNumber计数器1.1. InputNumber计数器, 仅允许输入标准的数字值, 可定义范围。1.2. 计数器属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 number 无 0 min 设置计数器允许的

1. Select选择器1.1. 当选项过多时, 使用下拉菜单展示并选择内容。1.2. Select属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 boolean / string / number 无 无 multiple

1. Cascader级联选择器1.1. 当一个数据集合有清晰的层级结构时, 可通过级联选择器逐级查看并选择。1.2. Cascader属性 参数 说明 类型 可选值 默认值 value / v-model 选中项绑定值 无 无 无 options 可选项

1. Switch开关1.1. 表示两种相互对立的状态间的切换, 多用于触发「开/关」。1.2. 开关属性 参数 说明 类型 默认值 value / v-model 绑定值 boolean / string / number 无 disabled 是否禁用 boolean

1. Slider滑块1.1. 通过拖动滑块在一个固定区间内进行选择。1.2. Slider属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 number 无 0 min 最小值 number

1. TimePicker时间选择器1.1. 用于选择或输入日期。1.2. 时间选择器属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 date(TimePicker) / string(TimeSelect) 无 无 readonly

1. DatePicker日期选择器1.1. 用于选择或输入日期。1.2. 时间选择器属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 date(DatePicker) / array(DateRangePicker) 无 无 readonly

1. DateTimePicker日期时间选择器1.1. 在同一个选择器里选择日期和时间。1.2. DateTimePicker由DatePicker和TimePicker派生, Picker Options或者其他选项可以参照DatePicker和TimePicker。1.3. 日期时间选择器属性 参数 说明 类型 可选值 默认值 value / v-model

1. Upload上传1.1. 通过点击或者拖拽上传文件。1.2. Upload上传属性 参数 说明 类型 可选值 默认值 action 必选参数, 上传的地址 string 无 无 headers 设置上传的请求头部 object

1. rate评分1.1. rate评分组件。1.2. 评分属性 参数 说明 类型 默认值 value / v-model 绑定值 number 0 max 最大分值 number 5 disabled 是否为只读

1. ColorPicker颜色选择器1.1. 用于颜色选择, 支持多种格式。1.2. 颜色选择器属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 string 无 无 disabled 是否禁用 boo

1. Transfer穿梭框1.1. 属性 参数 说明 类型 可选值 默认值 value / v-model 绑定值 array 无 无 data Transfer的数据源 array[{ key, label, disabled }]

1. Form表单1.1. 属性 参数 说明 类型 可选值 默认值 model 表单数据对象 object 无 无 rules 表单验证规则 object 无 无 inlin

1. Table表格例子1.1. Table表格用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。1.2. Table Attributes 参数 说明 类型 可选值 默认值 data 显示的数据 array 无 无 height

1. Tag标签1.1. Tag标签用于标记和选择。1.2. Attributes 参数 说明 类型 可选值 默认值 type 类型 string success/info/warning/danger 无 closable 是否可关闭

1. Progress进度条1.1. Progress进度条, 用于展示操作进度, 告知用户当前状态和预期。1.2. Attributes 参数 说明 类型 可选值 默认值 percentage 百分比(必填) number 0-100 0 type 进度

1. Tree树形控件1.1. Tree树形控件用清晰的层级结构展示信息, 可展开或折叠。1.2. Tree树形控件内部使用了Node类型的对象来包装用户传入的数据, 用来保存目前节点的状态。1.3. Attributes 参数 说明 类型 可选值 默认值 data 展示数据 array 无

1. Pagination分页1.1. Pagination分页当数据量过多时，使用分页分解数据。1.2. Attributes 参数 说明 类型 可选值 默认值 small 是否使用小型分页样式 boolean 无 false background 是否

1. Badge标记1.1. Badge标记出现在按钮、图标旁的数字或状态标记。1.2. Attributes 参数 说明 类型 可选值 默认值 value 显示值 string, number 无 无 max 最大值, 超过最大值会显示'{max}+',

1. Alert警告1.1. Alert警告用于页面中展示重要的提示信息。1.2. Attributes 参数 说明 类型 可选值 默认值 title 标题 string 无 无 type 主题 string s

1. Loading加载1.1. Loading加载数据时显示动效。1.3. Attributes 参数 说明 类型 默认值 target Loading需要覆盖的DOM节点。可传入一个DOM对象或字符串; 若传入字符串, 则会将其作为参数传入document.querySelector以获取到对应DOM节点 object/string d

1. Message消息提示1.1. Message消息提示常用于主动操作后的反馈提示。与Notification的区别是后者更多用于系统级通知的被动提醒。1.2. Options 参数 说明 类型 可选值 默认值 message 消息文字 string / VNode 无 无

1. MessageBox弹框1.1. MessageBox弹框, 模拟系统的消息提示框而实现的一套模态对话框组件, 用于消息提示、确认消息和提交内容。1.2. 从场景上说, MessageBox的作用是美化系统自带的alert、confirm和prompt, 因此适合展示较为简单的内容。如果需要弹出较为复杂的内容, 请使用Dialog。1.3. Options 参数 说明 类型 可选值 默认值

1. Notification通知1.1. Notification通知, 悬浮出现在页面角落, 显示全局的通知提醒消息。1.2. Options 参数 说明 类型 可选值 默认值 title 标题 string 无 无 message 说明文字

1. NavMenu导航菜单1.1. NavMenu导航菜单为网站提供导航功能的菜单。1.2. Menu Attribute 参数 说明 类型 可选值 默认值 mode 模式 string horizontal / vertical vertical collapse

1. Tabs标签页1.1. Tabs标签页分隔内容上有关联但属于不同类别的数据集合。1.2. Tabs Attributes 参数 说明 类型 可选值 默认值 value / v-model 绑定值, 选中选项卡的name string 无 第一个选项卡的name type

1. Breadcrumb面包屑1.1. Breadcrumb面包屑显示当前页面的路径, 快速返回之前的任意页面。1.2. Breadcrumb Attributes 参数 说明 类型 默认值 separator 分隔符 string 斜杠'/' separator-class 图标分隔符class

1. PageHeader页头1.1. 如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。1.2. Attributes 参数 说明 类型 可选值 默认值 title 标题 string 无 返回 content 内容 str

1. Dropdown下拉菜单1.1. Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。1.2. Dropdown Attributes 参数 说明 类型 可选值 默认值 type 菜单按钮类型, 同Button组件(只在split-button为true的情况下有效) string 无 无

1. Steps步骤条1.1. Steps步骤条引导用户按照流程完成任务的分步导航条, 可根据实际应用场景设定步骤, 步骤不得少于2步。1.2. Steps Attributes 参数 说明 类型 可选值 默认值 space 每个step的间距, 不填写将自适应间距。支持百分比。 number / string 无

1. Dialog对话框1.1. Dialog对话框在保留当前页面状态的情况下, 告知用户并承载相关操作。1.2. Attributes 参数 说明 类型 可选值 默认值 visible 是否显示Dialog, 支持.sync修饰符 boolean 无 false title

1. Tooltip文字提示1.1. Tooltip文字提示常用于展示鼠标hover时的提示信息。1.2. Attributes 参数 说明 类型 可选值 默认值 effect 默认提供的主题 String dark/light dark content