8.28_elementui/vue ref/js callback
先从页面看起(views)，最后看整个框架结构，红色表示有疑问
element-ui
1.表单+input
<!-- 表单 --> <el-form ref="form" :model="form" label-width="80px"> <!-- 表单子项；label为标签文本 --> <el-form-item label="活动名称"> <!-- 输入框 这里的form是v-model绑定的form，而不是ref的form--> <el-input v-model="form.name"></el-input> </el-form-item> </el-form>
表单验证
<!-- status-icon：是否在输入框中显示校验结果反馈图标，即输入框右边的对号叉号 --> <!-- 表单验证：通过rules属性传入验证规则，并将el-form-item的prop属性设置成需校验的字段名即可 --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> <!-- autocomplete：原生属性，自动补全 on、off--> <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input> </el-form-item> </el-form> <script> export default { data() { return { // 规则设置 rules: { // 验证name name: [ // type：规定数据类型，不符合会弹错误提示，即message // required：该子表项是否必填，即前面的红色星号 // message：错误提示信息 // trigger：blur表示这个输入框失去焦点时触发，change表示数据改变时触发 { type: 'number', required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], } }; }, } </script>
自定义校验规则：
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!-- prop绑定age规则 -->
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
// checkAge规则
var checkAge = (rule, value, callback) => {
// value为input接收到的值
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if (value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
}, 1000);
};
return {
rules: {
age: [
// age规则这里验证checkAge规则
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
}
</script>
input属性：
tabindex：属性规定元素的 tab 键控制次序（当 tab 键用于切换导航时）
<el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
name：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
2.DatePicker日期选择器
<el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placeholder="选择周"> </el-date-picker>
其中，type为可选值：date为日期、dates为选择多个日期、week为周、month为月、year为年、daterange为日期范围、monthrange为月份范围
type为datetimerange为时间和日期范围
<el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
使用format指定输入框的格式：yyyy表示年、M表示月(不补0)、MM表示月(有0)、W表示周(仅周选择器可用，不补0)、WW、d(日)、dd、H(24小时制)、HH、h(12小时制，须和A或a使用)、hh、A(AM/PM)、a(am/pm)、m(分钟)、mm、s(秒)、ss、
3.TimePicker时间选择器
<el-time-select v-model="value" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间"> </el-time-select>
<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"> </el-time-select> <el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{ start: '08:30', step: '00:15', end: '18:30', // 通过minTime属性固定时间范围 minTime: startTime }"> </el-time-select>
使用el-time-select标签，通过start、end和step分别指定可选的起始时间、结束时间和步长
<el-time-picker arrow-control v-model="value2" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker>
<el-time-picker // 添加is-range属性即可选择时间范围 is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
使用el-time-picker标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择
4.button
<el-row>
//white <el-button>默认按钮</el-button> // blue <el-button type="primary">主要按钮</el-button> // green <el-button type="success">成功按钮</el-button> //gray <el-button type="info">信息按钮</el-button> // orange <el-button type="warning">警告按钮</el-button> //red <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>
5.Message消息提示
<template> <el-button :plain="true" @click="open">打开消息提示</el-button> </template> <script> export default { methods: { open() {
// element注册了一个$meaasge方法用于调用 this.$message('这是一条消息提示'); } } } </script>
默认的mesage是不可以人工关闭(3秒内自动关闭)的，可以使用showClose字段类似设置可手动关闭功能；通过type设定消息提示种类：success为绿色成功、warning为橘色警告、error为红色错误、不设定为白色默认
open2() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
openHTML() { this.$message({ // 将dangerouslyUseHTMLString属性设置为true，message就会被当作HTML片段处理
// 但在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。永远不要将用户提交的内容赋值给message属性 dangerouslyUseHTMLString: true, message: '<strong>这是 <i>HTML</i> 片段</strong>' }); }
6.Table表格
<template> <el-table :data="tableData" // 固定表头使用height属性 height=“250” // 通过max-height指定table最大高度，若超出则会显示滚动条 max-height=”250“ // 设置边框 border // 设置斑马线条 stripe // 列的宽度自撑开 fit // 高亮显示当前行 highlight-current-row // 在表尾添加合计行 show-summary style="width: 100%"> <el-table-column // 通过type=index传入index属性，可以自定义索引 type="index" // 传入数字或方法提供索引值 :index="indexMethod"> </el-table-column> <el-table-column // 设置fixed固定该列 fixed // 该列绑定数据 prop="date" // 显示的标题 label="日期" // 设置排序按钮 sortable width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </template>
7.Tree树形控件
// data为展示的数据 <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" // 设置节点可选择 show-checkbox // 设置每次只打开一个同级树节点 according // 懒加载子节点，需与load方法结合使用 ></el-tree> <script> export default { data() { return { data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' // 设置禁用状态 disabled: true }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' } }; }, methods: { handleNodeClick(data) { console.log(data); } } }; </script>
breadcrumb面包屑导航
<!-- 这里使用separator属性来设置分隔符，分隔符只能是字符串，默认为/ --> <!-- 还可以通过separator-class属性把图标设置为分隔符，separator-class属性将会覆盖separator属性 --> // <el-breadcrumb separator="/"> <el-breadcrumb separator-class="el-icon-arrow-right"> <!-- to：路由跳转对象，同vue-router的to --> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>活动管理</el-breadcrumb-item> <el-breadcrumb-item>活动列表</el-breadcrumb-item> <el-breadcrumb-item>活动详情</el-breadcrumb-item> </el-breadcrumb>
Vue
1.ref属性
尽管存在prop和事件，有的时候仍然需要在JavaScript中直接访问一个子组件。为达到这个目的，可以通过ref这个属性为子组件赋予一个ID引用
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个ref的组件里，可以使用
this.$refs.usernameInput
来访问这个<base-input>实例
即$refs是所有标记了ref的组件的集合，可以通过$refs来实现对某个组件的调用
tips：$refs只会在组件渲染完成后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”，应该避免在模板或计算属性中访问$refs
2.事件处理
// 表示按键松开时触发的事件
@keyup.enter.native="handleLogin"
使用v-on监听事件时，通过按键码来执行特定事件，如.enter、.tab、.delete等
事件修饰符：如.stop、.prevent、.capture、.self、.once、.passive
.native：监听组件根元素的原生事件，主要是给自定义的组件添加原生事件
JavaScript
1.callback(回调函数)
在JavaScript中，函数是对象。因此函数可以将函数作为参数，并且可以由其他函数进行返回。即一个在另外一个函数执行完之后要执行的函数
function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`);
// 此处回调alertFinished函数
callback(); }
function alertFinished(){ alert('Finished my homework'); }
doHomework('math', alertFinished);
