成功部署，但首页部分元素出现异常

tchangeme commented 5 years ago

您好非常感谢，通过npm 安装后成功在自己已有网站的app.vue页面上添加如下代码，实现悬浮菜单功能； //- app-fab //- app-fab

    </vue-fab>
        <vue-fab   :mainBtnColor="'#ff9900'" :icon="'face'" @clickMainBtn='showAvatar("backgrounds", "2019")' :menu="[]" style="right: 80%;transition: all .5s cubic-bezier(.18,.89,.58,1.26)">
    </vue-fab>
    </vue-fab>
        <vue-fab   :mainBtnColor="'#dc3545'" :icon="'swap_horiz'" @clickMainBtn="clickMainBtnB" :menu="[]" style="right: 30%;transition: all .5s cubic-bezier(.18,.89,.58,1.26)">
    </vue-fab>`

但是存在以下2个问题： 1、首页部分元素，出现错位。如下图所示：元素出现错误将上述代码注释掉后，恢复正常 https://snag.gy/julgKh.jpg 2、首页出现双滚动条，如下图所示首页双滚动条将上述代码注释掉后，恢复正常 https://snag.gy/ZdXP6U.jpg

a62527776a commented 5 years ago

感谢反馈元素错误应该是css样式污染我处理下双滚动条暂时无法复现能否给个链接我查看下具体场景

a62527776a commented 5 years ago

您好非常感谢，通过npm 安装后成功在自己已有网站的app.vue页面上添加如下代码，实现悬浮菜单功能； //- app-fab //- app-fab

<fab-item @clickItem="clickItemA" :idx="0" titleColor="#FFF" title="任务" titleBgColor="#6c757d" color='#fd7e14' icon="done" /> <fab-item @clickItem="clickItemB" :idx="1" titleColor="#FFF" title="团队" titleBgColor="#6c757d" color='#e83e8c' icon="group" /> <fab-item @clickItem="clickItemC" :idx="2" titleColor="#FFF" title="公会" titleBgColor="#6c757d" color='#6610f2' icon="public" /> <fab-item @clickItem="clickItemD" :idx="3" titleColor="#FFF" title="挑战" titleBgColor="#6c757d" color='#007bff' icon="score" />

<vue-fab :mainBtnColor="'#ff9900'" :icon="'face'" @clickMainBtn='showAvatar("backgrounds", "2019")' :menu="[]" style="right: 80%;transition: all .5s cubic-bezier(.18,.89,.58,1.26)">

<vue-fab :mainBtnColor="'#dc3545'" :icon="'swap_horiz'" @clickMainBtn="clickMainBtnB" :menu="[]" style="right: 30%;transition: all .5s cubic-bezier(.18,.89,.58,1.26)"> `

但是存在以下2个问题： 1、首页部分元素，出现错位。如下图所示：元素出现错误将上述代码注释掉后，恢复正常 https://snag.gy/julgKh.jpg 2、首页出现双滚动条，如下图所示首页双滚动条将上述代码注释掉后，恢复正常 https://snag.gy/ZdXP6U.jpg

最新的0.4.3版本处理了css样式污染的问题

tchangeme commented 5 years ago

感谢反馈元素错误应该是css样式污染我处理下双滚动条暂时无法复现能否给个链接我查看下具体场景

你好地址为https://2change.club，需要麻烦您自己创建个账号，试下。另外还想咨询个问题：如何让悬浮按钮在页面上居中显示呢？通过跳转right 的百分比，无法确保100%居中；

a62527776a commented 5 years ago

感谢反馈元素错误应该是css样式污染我处理下双滚动条暂时无法复现能否给个链接我查看下具体场景

你好地址为https://2change.club，需要麻烦您自己创建个账号，试下。另外还想咨询个问题：如何让悬浮按钮在页面上居中显示呢？通过跳转right 的百分比，无法确保100%居中；

关于如何居中 right: 50%; margin-right: 24px; margin-right的值是节点宽度 / 2 我看贵应用展示在中间的fab为48px的宽度所以margin-right应为24px 并且right为50%

a62527776a commented 5 years ago

居中处理 https://i.loli.net/2019/02/23/5c7100e06ad76.png

tchangeme commented 5 years ago

非常感谢，样式错位，双滚动条的问题已经解决了，不过按钮显示在中间，我加了margin-right:-24px; 之后没起作用；

` //- app-fab

`

tchangeme commented 5 years ago

不好意思，是我的问题，我写错了；非常感谢，完美解决了我的问题；

a62527776a commented 5 years ago

感谢您的支持

tchangeme commented 5 years ago

方便在帮我看个其他问题吗，我的导航菜单，点击下拉菜单后，页面刷新，但是菜单不会自动收回去，需要调整哪里呢；这个是我的网站的问题；

a62527776a commented 5 years ago

方便在帮我看个其他问题吗，我的导航菜单，点击下拉菜单后，页面刷新，但是菜单不会自动收回去，需要调整哪里呢；这个是我的网站的问题；

你的意思是？鼠标滑倒商店 => 任务点击之后路由跳转了菜单还是展示着吗？

tchangeme commented 5 years ago

嗯，是的

tchangeme commented 5 years ago

嗯，是的

tchangeme commented 5 years ago

嗯，是的

tchangeme commented 5 years ago

方便在帮我看个其他问题吗，我的导航菜单，点击下拉菜单后，页面刷新，但是菜单不会自动收回去，需要调整哪里呢；这个是我的网站的问题；

你的意思是？鼠标滑倒商店 => 任务点击之后路由跳转了菜单还是展示着吗？

嗯，是的，就是这个问题；

a62527776a commented 5 years ago

方便在帮我看个其他问题吗，我的导航菜单，点击下拉菜单后，页面刷新，但是菜单不会自动收回去，需要调整哪里呢；这个是我的网站的问题；

你的意思是？鼠标滑倒商店 => 任务点击之后路由跳转了菜单还是展示着吗？

嗯，是的，就是这个问题；

贵应用为单页面应用跳转到不同的路由之后看似是刷新了页面实际上并没有刷新

而css ::hover的又不好控制我推荐使用js去控制菜单栏的隐藏和展示

tchangeme commented 5 years ago

好的多谢指导

a62527776a / vue-floating-action-button

成功部署，但首页部分元素出现异常 #2