Vue实现底部侧边工具栏的实例代码

下载地址：https://github.com/imxiaoer/float toolbar

因为是个常见的功能，所以写个组件。效果图如下：

组件具体代码如下：tool.vue

模板ul class=' float-tool ' Li class=' HasChild ' span class=' tool-icon icon 0 '/span联系电话/span div class='txtbox' span请拨102-0012-9242/span/div/Li Li span class='工具图标图标1 '/span SPanQQ客服/SPan/Li Li class=' HasChild ' SPan class='工具-图标图标2 '/span SPan app下载/span div class=' picbox ' img src=' http :/微信。jpg' alt='微信二维码/div/Li Li class=' HasChild ' span class='工具-图标图标3 '/span span关注微信/span div class=' picbox ' img src=' http :/微信。jpg' alt='微信二维码/div/Li Li单击='窗口。滚动到(0，0)“span class=”工具图标图标4”/span span返回顶部/span/Li/ul/template脚本类型=' text/ecmascript-6 '导出默认{ }/脚本样式lang='手写笔rel='样式表/手写笔。浮动工具位置：固定右侧： 10px底部： 10px z-index: 99宽度： 55px字体大小： 12px li位置：相对边距-底部： 5px宽度： 55px高度： 55px文本-对齐：中心颜色： #FFF背景-颜色3360 #6b4ec2光标330不重复。图标0背景-位置：中心-153像素。图标1背景-位置：中心5px。图标2背景-位置：中心-50px。图标3背景-位置：中心-102像素。图标4背景-位置：中心-312像素。txt框显示33:无位置33:绝对顶部33: 0px右侧3: 65 px宽度333 100%高度： 100%高度：显示后：块位置：绝对右侧： -5px顶部： 50px内容：英寸宽度： 0 0高度： 0 0边框-宽度： 7px 0 7px边框-样式：纯色边框-颜色：透明透明# 6b4ec 2/样式下载地址：https://github.com/imxiaoer/float toolbar

补充：下面看下某视频剪辑软件侧边导航栏递归显示的实例代码。

从“axios”导入axios从导入表1 './tab _ content/tab 1。vue '；从""导入我的树./items。vue '；导出默认{ data() { return { theModel: []，}；prop s :[' tab ']}，components: { myTree }，methods: { tabsvalue(数据){ console.log(数据)这个.$emit('get-data '，data) } }，watch: {}，created() { axios .' get('./././static/nav.json') //.' get('.然后(函数(响应){ var arr=response。数据。dactionlistvar Znodes=[]；var farternode=[]；for (var i in arr) { if (arr[i]).desktop=='0' arr[i].parentId！=null){ farternode。推动；如果.父母身份.desktop==' 1 '){ znodes。推动；} } var childNodes=函数getChildNodes(parentId，zNodes，Nodes，child，parentItem ) { if(！parentId ||！返回节点；var子节点=[]；for(Znodes中的var k){ if(Znodes[k]).父id==父id){ if(子节点){子节点。push(znode[k])；} else { nodes。push(Znodes[k])；}儿童节点(zNodes[k]).id，zNodes，Nodes，true，Znodes[k])；} } if(子节点。长度0个子){ parentitem。children=子节点；}返回节点；};for(farternode中的var j){ farternode[j][' children ']=[]；var nodes=[]；nodes=childNodes(farternode[j]).id，zNodes，Nodes，false，null)；farternode[j].子节点=节点；}控制台。log(farternode)；console.log(节点);this.theModel=farternode }。绑定（这个))。捕捉(函数)(错误){ console.log(错误);});console.log(这参考文献。tabsdata)} }；

父组件的射流研究…

template div id=' nav to ' my-tree v-for=' MenuItem in MoDEL ' : key=' MenuItem。id ' : model=' MenuItem ' @ data-tabsvalue=' tabsvalue '/my-tree/div/template

父组件的节点

从导入选项卡./component/tab。vue ' export default { name : ' tree menu '，prop :[' model ']，data(){ return { folderic : ' folder '，isDynamicFolder: false，isOpen: false，} }，computed : { is folder(){ return！(这个。模特。孩子们喜欢这个。模特。孩子们。长度)}，watch : { is dynamic folder(){ this。isopen=真。foldericon=' folder-open ' } }，方法： { tabsvalue(data){ this .$emit('data-tabsvalue '，data) }，run(data){ if(！data.children){ this.tabsvalue(数据)console.log(数据。文本)；console.log(data.url) } }，toggle () { this.isOpen=！'这。同相线这。folderIcon=这。“isOpen”文件夹-打开' : '文件夹' } }}子组件的射流研究…

模板Li span @ click=' toggle ' I : class='[' icon '，(isFolder || isDynamicFolder)？folderIcon : ' file-text ']'/I span class='鼠标样式' { model。text } }/span/span！-转换名称=' my box '-ul v-if=' IsoPen ' span v-for='模型中的项目。儿童' :键='项目。id ' @ click。stop=' run(item)' tree-menu : model=' item ' @ data-tabsvalue=' tabsvalue '/tree-menu/span/ul！-/过渡-/李/模板子组件的节点

总结

以上所述是小编给大家介绍的某视频剪辑软件实现底部侧边工具栏的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！