插件使用

Waves

引入css和js配置

wavesList中配置相关类名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//按钮 配置点击水纹
( function(){
	setTimeout(function () {
		var config = {
			duration: 1000,
			delay: 100,
		};
		Waves.init(config);
		var wavesList = [
			"he_tr_add ",
			"he_tr_btn_info",
			"he_btn_info",
		]
		for(let i = 0; i < wavesList.length; i++){
			wavesList[i]  = '.'+wavesList[i]
			Waves.attach(wavesList[i], 'waves-light');
			// Waves.attach(wavesList[i], 'waves-black');
		}
		// console.log("waves！初始化完毕！")
	}, 1000);
})()

jsmind 思维导图

引入 ../js/jsmind-master/style/jsmind.css 和 ../js/jsmind-master/js/jsmind.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// js 思维导图
      jsMind: function () {
          var _this = this;
          var mind = {
              /* 元数据，定义思维导图的名称、作者、版本等信息 */
              "meta": {
                  "name": "",
                  "author": "",
                  "version": ""
              },
              /* 数据格式声明 */
              "format": "node_tree",
              /* 数据内容 */
              "data": this.data

          };
          var options = { // options 
              container: 'main', // [必选] 容器的ID，或者为容器的对象
              editable: true, // [可选] 是否启用编辑
              theme: 'belizehole', // [可选] 主题
              support_html: false,
              view: {
                  engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
                  hmargin: 100, // 思维导图距容器外框的最小水平距离
                  vmargin: 50, // 思维导图距容器外框的最小垂直距离
                  line_width: 2, // 思维导图线条的粗细
                  line_color: '#cccccc' // 思维导图线条的颜色
              },
          };
          var jm = new jsMind(options);
          jm.show(mind);
      },


      // 数据渲染完成之后 再更新
         this.jsMind();
         this.jm = jsMind.current;

      // 获取当前选择的节点
      get_selected_nodeid: function () {
          var selected_node = this.jm.get_selected_node();
          if (!!selected_node) {
              return selected_node.id;
          } else {
              return null;
          }
      },

      // 删除
      jm_del: function () {
          var _this = this;
          var selected_node = this.jm.get_selected_node();
          var selected_id = this.get_selected_nodeid();
          if (!selected_id) {
              alert('请选中一个节点来进行添加操作');
              return;
          }
          console.log(selected_id, selected_node.data.u_id);
          this.jm.remove_node(selected_id);
      },

      // 新增子级
      jm_add_child: function () {
          var _this = this
          var selected_node = this.jm.get_selected_node(); // as parent of new node
          if (!selected_node) {
              alert('请选中一个节点来进行添加操作');
              return;
          }
          var nodeid = jsMind.util.uuid.newid();
          var topic = '请输入名称';
          console.log(selected_node);
      },

notyf 轻提示

引入min.css和min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
  this.notyf = new Notyf({
//  持续时间
 duration:2000,
//  是否显示关闭
 dismissible:true,
//  位置
 position:{
	x:'center',
	y:'top'
 },
//  自定义框的颜色图标
types:[
	{	duration:0,
		type:'a',
		dismissible:true,
		background:'#f99',
		color:'#fff',
		icon:{
			className:'',
			tagName:'i'
		}
	}
]
      });
      
     //  用法
this.notyf.open({
 type:'a',
 message:'sssssssssssssssssssssssss'
      })
      this.notyf.success({
 message:'sssssssssssssssssssssssss'
      })
      this.notyf.error({
 message:'sssssssssssssssssssssssss'
})