一，封装蒙层Popup 框---带淡入淡出渐变效果的
<template>
<transition name="rytpopup-transition">
<div class="rytPopup" v-show="visible" @click="closeRytpopup">
<slot></slot>
</div>
</transition>
</template>
<!-- slot 意为插槽 里面可以放任何标签 -->
<script>
export default {
name:"rytPopup",
props:{
center:{
type: Boolean,
default:false
}
},
data(){
return{
visible:false,
}
},
methods:{
closeRytpopup(){
this.visible = false
},
},
watch:{
visible(val){
this.$emit('input',val) //当visible的值发生改变的时候，把val（viaible的值）传给父组件的v-model属性
},
center(val){ //当center的值发生改变的时候，把center的val值传给this.viaible
this.visible = val
}
},
}
</script>
<style scoped>
.rytPopup {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-color: #000
}
/*利用vue 的transition 中的过渡实现背景色的opacity 的值在0 和1之间的过渡*/
.rytpopup-transition-enter-active, .rytpopup-transition-leave-active {
transition: opacity .5s;
}
.rytpopup-transition-enter, .rytpopup-transition-leave-to /* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
</style>
二，封装 dropdown下拉选择框
<template>
<div>
<!-- 蒙层组件，此处是父组件开始 -->
<ryt-popup :center="currentValue" v-model="currentValue">
</ryt-popup>
<!-- 蒙层组件，此处是父组件结束 -->
<!-- 下拉选择弹框组建封装 开始 -->
<transition name="ryt-transition">
<div class="ryt-actionsheet" v-show="currentValue">
<p class="rytTitle parent">{
{title}}</p>
<ul style="border-bottom-right-radius: 12px;border-bottom-left-radius:12px;background-color: #fff">
<li class="ryt-mint-actionsheet-listitem parent" @click="clickItem(item,index)" v-for="(item,index) in actions">{
{item}}</li>
</ul>
<button class="ryt-mint-actionsheet-button parent" @click="closeRytDropdown" :style="{color:cancenTextColor}">{
{cancelText}}</button>
</div>
</transition>
<!-- 下拉选择弹框组建封装 结束 -->
</div>
</template>
<script>
import rytPopup from './rytPopup.vue'; //popup蒙层框
export default {
name:"rytDropdown",
components:{
rytPopup
},
props:{
title:{
type:String,
default:'请选择您将进行的操作'
},
actions:{
type:[Array,String,Object], //传过来的参数可以为对象，字符串，数组
default:() => []
},
cancelText:{
type:String,
default:'取消'
},
center:{ //接受父组件给子组件的center属性的传值
type:Boolean,
default:false
},
cancenTextColor:{ //取消按钮的文字颜色
type:String,
default:'rgb(255, 130, 0)'
}
},
data(){
return {
currentValue:false,
}
},
methods:{
closeRytDropdown(){ //关闭子组件
this.currentValue = false
},
clickItem(item,index){ //选择下拉框选项
this.$emit('clickOption',{
item:item,
index:index
})
this.currentValue = false
}
},
watch: {
currentValue(val) { //监听currentValue的值传给父组件，父组件没有Input事件为什么还传值给父组件了？解释： v-model 绑定的是input事件
this.$emit('input', val);
},
center(val){ //监听父组件通过props传过来的center的布尔值打开子组件下拉框
this.currentValue = val
}
},
mounted() {
},
}
</script>
<style scoped>
.ryt-actionsheet{
position: fixed;
width: 355px;
border-radius: 12px;
text-align: center;
bottom: 0;
left: 50%;
max-height: 100%;
overflow-y: auto;
transform: translate3d(-50%, 0, 0);
backface-visibility: hidden;
transition: transform .3s ease-out;
}
.rytTitle{
color:#999999;
font-size: 16px;
height:44px;
line-height: 44px;
background-color: #fff;
}
.parent{
position: relative;
}
.parent::after { /*利用缩放和伪元素解决1px在不同手机有粗有细问题*/
margin:auto auto;
width:355px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
content: "";
box-sizing: border-box;
height: 1px;
border-bottom: 1px solid #e8e8e8;
transform: scaleY(0.5);
transform-origin: 0 0;
}
.ryt-mint-actionsheet-listitem, .ryt-mint-actionsheet-button{
display: block;
width: 100%;
height: 44px;
line-height: 44px;
font-size: 18px;
color: #333;
}
.ryt-mint-actionsheet-button{
margin-top:11px;
border-radius: 12px;
background-color: #fff;
}
/*弹窗动画*/
.ryt-transition-enter,
.ryt-transition-leave-active {
transform: translate3d(-50%, 100%, 0);
}
</style>
三，具体页面中的引用dropdown组件
<template>
<div class="about marquee">
<!-- 自定义dropDown组件 -->
<ryt-dropdown
v-model="rytDropdown"
:actions="actions"
:center="rytDropdown"
@clickOption="chooseOption"
title="请选择您的提示语"
cancelText="关闭/取消"
cancenTextColor="rgb(255, 130, 0)"
>
</ryt-dropdown>
<button @click="clickRyt">点击Rytdropdown</button>
</div>
</template>
<script>
import rytDropdown from '../../components/dropDown/rytDropdown.vue'; //下拉框带popup蒙层
export default {
name:'cece',
components: { //注册组件
rytDropdown,
},
data() {
return {
actions: { //下拉框选项
"1": "半年以内",
"2": "半年至一年",
"3": "一年至上",
},
rytDropdown:false,
};
},
methods: {
//rytdropdown
clickRyt(){
this.rytDropdown = true
},
chooseOption(e){ //选中下拉框中的某一项出发的事件
console.log(e,'chooseOption')
}
},
mounted(){
},
watch:{
}
}
</script>
<style scoped>
</style>
四，大概效果如下
五，需要掌握知识点
父子组件之间的传值 slot 插槽
---------------------------------------------------------------------------------------------------------------------------------------------------------------------
不够完善，未完待续