正文
vue 封装组件
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
props 接收数据
props对象里面 键值 是对改数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则报警告
先根据要求写出完整的代码，再一一用参数实现组件封装
这里试着封装一个select组件，主要是为了了解组件封装。参考自博客：https://www.cnblogs.com/pengfei-nie/p/9134367.html
效果：
sleceView：
<template>
<div class="partake">
<div class="f-search" :class="{searchInFous: this.fousFlag}">
<div class="f-searchIn">
{{this.searchV}}
<span :class="{searchActive: this.searchFlag}" @click="searchDown"></span>
</div>
<div class="f-searchXl" v-if="this.dataHas" :style="{height:this.searchFous, border:this.searchBorder}">
<div v-for="(item,index) in searchList" @click="choseValue(item.value, item.key)" :key="index">{{item.value}}</div>
</div>
<div class="f-searchXl" v-else >
<div>暂无数据</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'xuef',
props: {
searchList: Array,
selectValue: String
},
data() {
return {
searchV: '',
searchFlag: false,
searchFous: '0',
searchBorder: 'none',
fousFlag: false,
dataHas: true
};
},
methods:{
searchDown() {
this.searchFlag === false ? this.searchFlag = true : this.searchFlag = false
this.searchFous === '0' ? this.searchFous = 'auto' : this.searchFous = '0'
this.searchBorder === 'none' ? this.searchBorder = '1px solid #D9D9D9' : this.searchBorder = 'none'
this.fousFlag === false ? this.fousFlag = true : this.fousFlag = false
},
choseValue(value, key) {
this.searchV = value
this.searchDown()
this.$emit('selectFunction', value, key)
}
},
components:{
}
}
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.f-search{
width: 250px;
height: auto;
position: relative;
margin-left: 20px;
box-sizing: border-box;
}
.f-searchIn{
width: 250px;
height: 35px;
line-height: 35px;
font-size: 0.95rem;
border-radius: 5px;
overflow: hidden;
position: relative;
background-color: white;
box-shadow: none;
box-sizing: border-box;
color: #000000;
padding-left: 10px;
border: 1px solid #A3A3A3;
}
.searchInFous{
border: 1px solid #57C4F6;
box-shadow: 0px 0px 5px #57C4F6;
}
.f-searchIn > span{
display: block;
width: 28px;
height: 28px;
background-image: url(../../assets/images/down.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 0px -13px;
position: absolute;
top: 10px;
right: 5px;
}
.f-searchIn .searchActive{
background-position: 0px 12px;
top: -2px;
}
.f-search .f-searchXl{
position: absolute;
width: 100%;
height: auto;
max-height: 220px;
top: 41px;
left: -1px;
border-radius: 5px;
/*border: 1px solid #D9D9D9;*/
background-color: white;
overflow-x: hidden;
overflow-y: scroll;
}
.f-search .f-searchXl > div{
height: 35px;
line-height: 38px;
color: #000000;
padding-left: 25px;
font-size: 0.92rem;
}
.f-search .f-searchXl > div:hover{
background-color: #D5F1FD;
}
</style>
引用这个组件的view：useSelect
<template>
<div class="partake">
<section class="f-mainPage">
<search @selectFunction="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
</section>
</div>
</template>
<script>
import search from 'components/component/selectView';
export default {
name: 'xuef',
data() {
return {
searchList: [{key:'1',value:'草船借箭'},{key:'2',value:'大富翁'},{key:'3',value:'测试数据'}],
selectValue: '',
selectKey: ''
};
},
methods:{
selectFunc(val,key) {
this.selectValue = val
this.selectKey = key
console.log(this.selectKey)
console.log(this.selectValue)
}
},
components:{
search
}
}
</script>
