vue上下滚动效果,vue弹窗可拖动
这篇文章主要为大家详细介绍了某视频剪辑软件实现内容可滚动的弹窗效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现内容可滚动的弹窗效果具体代码，供大家参考，具体内容如下
这是第一种实现方式
效果图：
弹窗代码：
Popup.vue
模板语言=html
div v-if= show class= modal-BG @ click= closeModal
div class=modal_con
div class=modal_content
div class=模态容器
div class=modal_main
p class= modal-header"{ datalist。title } }/p
div class=" rules _ text "
p
数据列表.规则中的v-for=(项目，索引
class=rules_txt
:key=index
{{ item }}
/p
/div
/div
/div
div class=footer_rules
div class=tips/div
div class=rules_button
div class= button @ click= closeModal
按钮_文本我知道了/p
/div
/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称：弹出式菜单，
道具：{
显示：{
类型：布尔型，
默认值：错误
},
},
data () {
返回{
数据列表：{
规则：[
1.这是第一条数据啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，
2.这是第二条数据啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，
3.这是第三条数据啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，
4.这是第四条数据啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
],
奖励：[
1.活动规则第一条数据数据数据数据，
2.活动规则第二条数据数据数据，
2.活动规则第三条数据数据数据
]
}
}
},
方法：{
closeModal () {
这个emit(closeModal )
},
}
}
/脚本
style lang=css 范围。modal_con {
宽度：80%;
高度：287像素
背景：# ffffff
溢出：隐藏；
边距：0自动；
位置：固定；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
边框半径：8px
}。模态内容{
身高：100%;
背景色：# fff
}。modal-bg {
宽度：100%;
身高：100%;
背景色：rgba(0，0，0，0.6)；
位置：固定；
top:0；
左：0;
z指数：999;
}。模态-容器{
身高：78%;
文本对齐：居中；
显示器：flex
伸缩方向：列；
溢出-y:滚动；
/* ios需要下面这个属性*/
-网络工具包-溢出-滚动：触摸；
}。规则_文本{
字号：15px
font-family: PingFangSC，ping fangsc-Regular；
字体粗细：400;
文本对齐：对齐；
颜色：# 666666;
填充：0 20像素
边距-顶部：8px
边距-底部：0;
}。规则_文本：最后一个孩子{
填充-底部：40px
}。模态标题{
字体大小：17px
字体系列：方平，方平-SC；
字体粗细：粗体；
文本对齐：居中；
颜色：# 333333;
边距：0;
padding-top:20px；
}。reward_title {
字体大小：17px
字体系列：方平，方平-SC；
字体粗细：粗体；
文本对齐：居中；
颜色：# 333333;
填充：0;
边距-顶部：14px
边距-底部：6px
}。页脚_规则{
宽度：100%;
身高：22%;
位置：绝对；
底部：0;
}。提示{
/*宽度：100%;
不透明度：0.6;
高度：49px
背景：线性渐变(180deg，rgba(255，255，255，0.5)，# ffffff)；
文本对齐：居中；
行高：49px
字体大小：18px*/
}。规则按钮{
宽度：100%;
背景：# ffffff
填充-底部：20px
边框-底部-右侧-半径：8px
边框-底部-左侧-半径：8px
}。按钮{
宽度：90%;
显示器：flex
对齐-内容：居中；
对齐内容：居中；
背景：线性梯度(270度、#1283ff、# 50 a3 ff)；
边框-半径：4px
文本对齐：居中；
边距：0自动；
}。button_text {
字号：15px
字体系列：方平，方平-SC；
font-weight:SC；
颜色：# ffffff
显示器：flex
对齐-内容：居中；
对齐内容：居中；
边距：0;
填充：12px 0；
}。规则_con {
填充-底部：80px
}
/风格
在Home.vue页面使用弹窗：
！-活动规则弹窗-
模板
差异
div @click=clickPopup
跨度点击弹出弹窗/span
/div
弹出
v-show=isRulesShow
@closeModal=isRulesShow=false
:show=isRulesShow
/Popup
/div
/模板
脚本
从导入弹出窗口弹出窗口
导出默认值{
姓名：家，
组件：{
弹出
},
data () {
返回{
isRulesShow:flase
}
},
观察：{
isRulesShow (v) {
如果{
//禁止主页面滑动方法在主页。射流研究…
this.noScroll()
}否则{
//主页面可滑动
this.canScroll()
}
},
},
方法：{
//活动规则弹窗
单击Popup () {
this.isRulesShow=true
},
}
}
/脚本
样式lang=scss 范围
* {
触摸-动作：泛y；
}
/风格
解决弹窗滚动，里面的身体也跟着滚动问题
在主页。射流研究…中
//弹出框禁止滑动
vue。原型。no scroll=function(){
var mo=function(e){ e .防止违约()}
文档。身体。风格。溢出=隐藏
文档。addevent侦听器( touch move ，mo，false，{ passive: false })//禁止页面滑动
}
//弹出框可以滑动
vue。原型。can scroll=function(){
var mo=函数(e) {
预防默认()
}
文档。身体。风格。溢出= //出现滚动条
文档。removeeventlistener( touch move ，mo，false，{ passive: false })
}
在页面使用时：
//禁止主页面滑动
this.noScroll()
//主页面可滑动
this.canScroll()
//还要加上样式：
* {
触摸-动作：泛y；
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。