没有合适的资源?快使用搜索试试~ 我知道了~
下载地址: https://github.com/imxiaoer/FloatToolBar 因为是个常见的功能,所以写个组件。效果图如下: 组件具体代码如下: tool.vue <template> <ul class=float-tool> <li class=hasChild> <span class=tool-icon></span> <span>联系电话</span> <div class=txtbox> <span>请拨 102-0012-9242</span> </div> </li> <li>
资源详情
资源评论
资源推荐
Vue实现底部侧边工具栏的实例代码实现底部侧边工具栏的实例代码
下载地址: https://github.com/imxiaoer/FloatToolBar
因为是个常见的功能,所以写个组件。效果图如下:
组件具体代码如下: tool.vue
<template>
<ul class="float-tool">
<li class="hasChild">
<span class="tool-icon icon0"></span>
<span>联系电话</span>
<div class="txtbox">
<span>请拨 102-0012-9242</span>
</div>
</li>
<li>
<span class="tool-icon icon1"></span>
<span>QQ 客服</span>
</li>
<li class="hasChild">
<span class="tool-icon icon2"></span>
<span>APP下载</span>
<div class="picbox">
<img src="./wechat.jpg" alt="微信二维码">
</div>
</li>
<li class="hasChild">
<span class="tool-icon icon3"></span>
<span>关注微信</span>
<div class="picbox">
<img src="./wechat.jpg" alt="微信二维码">
</div>
</li>
<li onclick="window.scrollTo(0, 0)">
<span class="tool-icon icon4"></span>
<span>返回顶部</span>
</li>
</ul>
</template>
<script type="text/ecmascript-6">
export default {
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.float-tool
position: fixed
right: 10px
bottom: 10px
z-index: 99
width: 55px
weixin_38576922
- 粉丝: 6
- 资源: 904
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0