// type为字符串的话可以直接写 赞 踩 直接先说最常用的 如有错误,请不吝赐教! Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。
element-ui使用心得之三:怎么看element官方文档_autocomplete events
一、使用组件
以el-input为例
1. Attributes:
attributes属性直接在组件上引用,前面的checkbox表示引用的标签,比如:
<template>
<el-input type="number"></el-input>
// type为字符串的话可以直接写
<el-input :type="inputType"></el-input>
<el-input v-bind:type="inputType"></el-input>
// 如果是变量可以用v-bind:或者简写:, 在script的data中注册inputType: 'number'
<el-input clearable></el-checkbox>
<el-input :clearable="true"></el-input>
// 像clearable这样值为true和false的属性可以写:clearable="true"或:clearable="false"(这里要加:,
// 否则程序会将true识别为字符串)或者直接写border(程序会默认它为true)
<el-input v-model="inputValue"></el-input>
// v-model为vue提供的指令,不加:或者v-bind:
</template>
<script>
export default {
data () {
inputType: 'number',
inpuValue: ''
}
}
</script>
2. Events
events事件是可以在组件上监听的事件
<template>
<el-input @change="inputChange"></el-input>
</template>
<script>
export default {
methods: inputChange (newVal) {
// 这里的形参newVal是input改变后的新值
console.log(newVal)
}
}
</script>
3. Methods
methods是用来调用的方法
<template>
<el-input ref="inputRef">
</el-input>
</template>
<script>
export default {
methods: handleInputFocus () {
// 这里需要先用vue提供的ref方法选中该el-input元素,再调用focus方法
// 官方文档中的回调参数是--表示无形参,传了也没用
this.$refs.inpuRef.focus()
}
}
</script>
4. autocomplete
autocomplete是组件名,也就是el-autocomplete,autocomplete也是elput的一种,由于它拥有自己独特的属性、方法,所以把它单独做成了一个组件。
后面的Autocomplete Attributes,Autocomplete Slots,Autocomplete Scoped Slot,Autocomplete Events,Autocomplete Methods都是autocomplete的属性和方法
5. Slots
大家都知道,slot是vue提供的插槽
<template>
<div class="demo-input-suffix">
// 如果我们想自定义前置或者后置图标的话,可以用slot
// 官方提供了4种:prefix框内前置,suffix框内后置,prepend框外前置,append框外后置
<el-input
placeholder="请选择日期"
v-model="input3">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input4">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</div>
</template>
官方还提供了另外一种自定义前置后置图标的方法:配置属性
<template>
<div class="demo-input-suffix">
属性方式:
<el-input
suffix-icon="el-icon-date">
// element提供的所有icon这里都可以使用
</el-input>
</div>
</template>
6. Scoped Slots
给el-autocomplete内部自定义内容传参,用如下的方式就可以在输入建议中渲染出来 “我的 ¥”
<template>
<el-autocomplete
popper-class="my-autocomplete"
v-model="state"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
<span class="addr">{{ item.address }}</span>
</template>
</el-autocomplete>
</template>
<script>
export default {
return data () {
item: {
value: '我的',
address: '¥'
}
}
</script>
7. 辨别是哪个组件的属性
如上,Checkbox Events表示下面的event时间都是el-checkbox组件的
checkboxs-group表示下面的attributes属性都是el-checkbox-group组件的<template>
<el-checkbox-group size="small">
// checkboxChange函数应在script中注册
<el-checkbox @change="checkboxChange">
</el-checkbox>
</el-checkbox-group>
</template>
题外话,根据最新的代码规范,vue的自定义组件名都建议用kebab-case短横线连接,并且为双标签,所以
element-ui中的自定义组件均为<el-checkbox></el-checkbox>这种写法