Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
vue-ztree
Advanced tools
Readme
通过以下demo来实现
<template>
<div id="app">
<h1>{{ msg }}</h1>
<div style='width:280px;'>
<vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='true'></vue-ztree>
</div>
</div>
</template>
<script>
import vueZtree from './components/vue-ztree.vue'
export default {
data () {
return {
msg: 'Hello Vue-Ztree-2.0!',
ztreeDataSource:[{
id:1,
name:"音乐",
children:[],
url:"http://www.baidu.com"
},{
id:2,
name:"视频",
children:[{
id:3,
name:"电影",
children:[{
id:4,
name:"国产电影",
url:""
},{
id:5,
name:"好莱坞电影",
url:""
},{
id:6,
name:"小语种电影",
url:""
}]
},{
id:7,
name:"短片",
children:[{
id:9,
name:"电视剧",
url:""
},{
id:10,
name:"短片",
url:""
}]
}]
}]
}
},
methods:{
// 点击节点
nodeClick:function(m){
console.log(JSON.parse(JSON.stringify(m)));
},
// 右击事件
contextmenuClick:function(m){
console.log(m)
console.log("触发了自定义的contextmenuClick事件");
},
// 点击展开收起
expandClick:function(m){
console.log(JSON.parse(JSON.stringify(m)));
// 点击异步加载
if(m.isExpand) {
// 动态加载子节点, 模拟ajax请求数据
// 请注意 id 不能重复哦。
if(m.hasOwnProperty("children")){
m.loadNode = 1; // 正在加载节点
setTimeout(()=>{
m.loadNode = 2; // 节点加载完毕
m.isFolder = !m.isFolder;
m.children.push({
id:+new Date(),
name:"动态加载节点1",
path:"",
clickNode:false,
isFolder:false,
isExpand:false,
loadNode:0,
children:[{
id:+new Date()+1,
name:"动态加载末节点",
path:"",
clickNode:false,
isExpand:false,
isFolder:false,
loadNode:0
}]
})
},1000)
}
}
}
},
components:{
vueZtree
}
}
</script>
<style>
body {font-family: Helvetica, sans-serif;}
</style>
###vue-ztree/初始化参数
参数 | 类型 | 默认值 | 描述 |
list | Array | - | 树的结构数据源 |
func | Function | - | 点击节点事件 |
contextmenu | Function | - | 右击节点事件 |
expand | Function | - | 点击展开/收起的方法(一般在异步加载的时候使用, 非异步加载传null) |
is-open | Bealoon | true | 是否展开树 |
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
For detailed explanation on how things work, consult the docs for vue-loader.
FAQs
A Vue.js project
We found that vue-ztree demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.