elementUI在手机端使用遇到的问题

引用博客用vue2+elementUI封装手机端选择器picker组件,支持单选、多选、远程搜索多选
,最终真机调试的时候发现有很多细节样式需要调整。此篇博客记录下我调试过程中遇到的问题和解决方法。
一、手机真机怎么连电脑本地代码调试?
1.确保手机和电脑处于同一个局域网下
2.找到电脑的ip地址。
可以在终端输入以下命令:

ifconfig

找到en0里的IP地址:

3.将本地的localhost替换成电脑的IP地址

4.用手机打开上述替换好的链接,就可以实现真机调试

二、elementUI中的el-select下拉框在手机端ios上,点击两次才能选中的问题?
需要在项目的App.vue文件中加入一下代码,通过全局作用域css解决

<style lang="scss">
// 解决el-select下拉框在ios上 点击两次才能选中的问题
.el-scrollbar {
  > .el-scrollbar__bar {
    opacity: 1 !important;
  }
}
</style>

三、解决滚动条穿透问题
弹框滑动时,不希望弹框滑动的同时也影响弹框底层页面的滑动

 // 弹层显示时隐藏滚动条,解决滚动条穿透问题
 document.body.style.overflow = 'hidden';
 document.body.style.position = 'relative';
 // 弹层不显示时显示滚动条,解决滚动条穿透问题
 document.body.style.overflow = 'auto';
 document.body.style.position = 'static';

四、elementUI中的el-button样式在电脑端生效,手机端不生效?
加了::v-deep,手机端就生效啦

Vue自定义指令与Vue插槽学习 :学习博客Vue自定义指令与Vue插槽学习
Web前端:HTML篇(二)元素属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值