vue嵌套组件 $children和this.$parent
例如：<s-select v-model="value" ><s-option value="11" label="1"></s-option><s-option value="22"label="2"></s-option><s-option value="33" label="3">...
·
例如：
<s-select v-model="value" >
<s-option value="11" label="1"></s-option>
<s-option value="22" label="2"></s-option>
<s-option value="33" label="3"></s-option>
<s-option value="44" label="4"></s-option>
<s-option value="55" label="5"></s-option>
<s-option value="66" label="6"></s-option>
<s-option value="77" label="7"></s-option>
<s-option value="88" label="8"></s-option>
<s-option value="99" label="9"></s-option>
<s-option value="00" label="0"></s-option>
</s-select>
简单得实现了下下拉框得功能 具体得一些额外功能后期会完善
如何联动起来？ 利用
c
h
i
l
d
r
e
n
和
t
h
i
s
.
children和this.
children和this.parent
组件1：s-option 选中
<li @click="handleChooseLi($event)"
:class="{
'is-select':isSelelct===value
}"
>{{label}}</li>
methods:{
handleChooseLi(event){
this.$parent.$emit('handleOptionClick',[this.label,this.value]) //this.$parent 父组件 触发handleOptionClick自定义事件
},
handleOptionSelect(data){
this.isSelelct=data
},
removeClassSelect(){
this.isSelelct=null;
}
},
created(){
this.$on('chooseOption', this.handleOptionSelect); //接受父组件发出得自定义事件
this.$on('removeClass', this.removeClassSelect);//接受父组件发出得自定义事件
}
组件2：s-select
绑定一个自定义事件
mounted(){
this.$on('handleOptionClick', this.handleOptionSelect); //组件一中点击选项 这边事件就i会触发
}
handleOptionSelect(option, byClick) {
this.model=option[0];
this.$emit("input",option[1]);
// 触发子组件选中
this.$children.forEach(item=>{
item.$emit('removeClass',option[1]) //这个是所有子组件都触发得事件 主要作用是去除选中状态
if(option[1]==item.value){
item.$emit('chooseOption',option[1])
}
})
},
再加上 自定义指令 v-clickOutSide=“handleCloseThis” 具体见我前面得博客
这样就可以做出select 得效过了
具体代码如下：
组件1： s-option
<template>
<li @click="handleChooseLi($event)"
:class="{
'is-select':isSelelct===value
}"
>{{label}}</li>
</template>
<script>
export default {
name:"sOption",
data(){
return {
curValue(val){
// if(this.value&&this.value!=""){
// this.model=this.value;
// return this.value
// }else{
// return val
// }
},
model:[],
isSelelct:null,
}
},
props:{
value:{
default:""
},
label:{
default:""
},
},
computed:{
isDisabled(){
return this.disabled
},
},
watch: {
},
methods:{
handleChooseLi(event){
this.$parent.$emit('handleOptionClick',[this.label,this.value])
},
handleOptionSelect(data){
this.isSelelct=data
},
removeClassSelect(){
this.isSelelct=null;
}
},
created(){
this.$on('chooseOption', this.handleOptionSelect);
this.$on('removeClass', this.removeClassSelect);
}
}
</script>
<style scoped>
li{
padding: 0px 10px;
cursor: pointer;
}
li:hover{
background: #F5F7FA
}
.is-select{
color:#008dff;
font-weight: 800
}
</style>
组件2：s-select
<template>
<div style="position: relative;">
<div class="s-select-box" @click="sSelectFocus" :class="{'is-focus':isFocus}" v-clickOutSide="handleCloseThis">
<input class="s-select" type="text" readonly v-model="model" >
<i class="icon-down1 iconfont"></i>
</div>
<div class="s-select-down-box" :class="{'is-focus':isFocus}">
<div class="jiao"></div>
<ul class="s-select-down"
>
<slot></slot>
</ul>
</div>
</div>
</template>
<script>
import { setTimeout } from 'timers';
import clickOutSide from './clickOutSide';
export default {
name:"sSelect",
data(){
return {
isFocus:false,
model:"",
}
},
directives:{clickOutSide},
props:{
value:{
type:[Number,String],
default:""
},
},
computed:{
isDisabled(){
},
},
watch: {
},
methods:{
sSelectFocus(){
this.isFocus=true;
},
sSelectBlur(){
setTimeout(()=>{
this.handleCloseThis()
this.isFocus=false;
},100)
},
handleCloseThis(){
console.log("dasd")
this.isFocus=false;
},
handleOptionSelect(option, byClick) {
this.model=option[0];
this.$emit("input",option[1]);
// 触发子组件选中
this.$children.forEach(item=>{
item.$emit('removeClass',option[1])
if(option[1]==item.value){
item.$emit('chooseOption',option[1])
}
})
},
},
mounted(){
this.$on('handleOptionClick', this.handleOptionSelect);
this.$children.forEach(item=>{
if(this.value==item.value){
item.$emit('chooseOption',this.value)
}
})
}
}
</script>
<style scoped>
.s-select-box{
display: inline-block;
width: 250px;
position: relative;
}
.icon-down1{
position: absolute;
right:10px;
top: 13px;
color:#c0c4cc;
transition: transform .3s;
transform: rotate(0deg);
cursor: pointer;
}
.s-select{
width: 100%;
line-height: 40px;
height: 40px;
box-sizing: border-box;
padding-left:10px;
border-radius: 4px;
border: 1px solid #dcdfe6;
cursor: pointer;
padding-right:26px;
}
.s-select:hover{
border-color: #c0c4cc;
}
.s-select:focus{
border-color: #409EFF;
}
.s-select-down-box{
-moz-transition: height .2s; /* Firefox 4 */
-webkit-transition: height .2s; /* Safari 和 Chrome */
-o-transition: height .2s; /* Opera */
transition: height .2s; /* Opera */
position: absolute;
top: 36px;
left: 0px;
height: 0;
min-width: 250px;
overflow: hidden;
box-sizing: border-box;
}
.s-select-down{
list-style: none;
padding: 6px 0px;
line-height: 30px;
margin: 0;
box-sizing: border-box;
border: 1px solid #e4e7ed;
border-radius: 4px;
background-color: #fff;
margin: 5px 0;
width: 100%;
max-height:200px;
box-shadow: 0 1px 14px 0 rgba(0,0,0,.1);
overflow-y: auto;
}
.is-focus.s-select-down-box{
height: 220px
}
.jiao{
width:8px;
height: 8px;
position: relative;
top:10px;
left: 70px;
background: #fff;
border-left:1px solid #E4E7ED;
border-top:1px solid #E4E7ED;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
z-index: 102;
}
.is-focus .icon-down1{
transform: rotate(180deg);
}
</style>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献23条内容
所有评论(0)