chenhaodong / mew-iview

Blame view

examples/routers/split.vue 2.14 KB
Edit Raw Normal View History
8979c734   zhigang.li   add split components 
1
 
  <template>
39fc24dc   梁灏   update Split 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
      <div>
          <div class="demo-split">
              <Split v-model="split1">
                  <div slot="left" class="demo-split-pane">
                      左边面板
                  </div>
                  <div slot="right" class="demo-split-pane">
                      右边面板
                  </div>
              </Split>
          </div>
          <div class="demo-split">
              <Split v-model="split1" mode="vertical">
                  <div slot="left" class="demo-split-pane">
                      左边面板
                  </div>
                  <div slot="right" class="demo-split-pane">
                      右边面板
                  </div>
              </Split>
          </div>
cd397a6f   梁灏   Split code format 
23
 
      </div>
8979c734   zhigang.li   add split components 
24
25
26
 
  </template>
  
  <script>
cd397a6f   梁灏   Split code format 
27
28
29
30
31
 
      export default {
          name: 'split_pane_page',
          data () {
              return {
                  offset: 0.6,
1e9bece0   梁灏   update Split 
32
33
 
                  offsetVertical: '250px',
                  split1: 0.5
cd397a6f   梁灏   Split code format 
34
35
36
37
38
39
40
 
              }
          },
          methods: {
              handleMoving (e) {
                  console.log(e.atMin, e.atMax)
              }
          }
8979c734   zhigang.li   add split components 
41
 
      }
8979c734   zhigang.li   add split components 
42
43
44
 
  </script>
  
  <style lang="less">
cd397a6f   梁灏   Split code format 
45
46
47
48
49
 
      .center-middle {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
8979c734   zhigang.li   add split components 
50
 
      }
cd397a6f   梁灏   Split code format 
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
  
      .split-pane-page-wrapper {
          height: 600px;
          .pane {
              width: 100%;
              height: 100%;
              &.left-pane {
                  background: sandybrown;
              }
              &.right-pane {
                  background: palevioletred;
              }
              &.top-pane {
                  background: sandybrown;
              }
              &.bottom-pane {
                  background: palevioletred;
              }
          }
          .custom-trigger {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: #fff;
              position: absolute;
              .center-middle;
              box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
              cursor: row-resize;
              i.trigger-icon {
                  .center-middle;
              }
          }
8979c734   zhigang.li   add split components 
83
 
      }
8979c734   zhigang.li   add split components 
84
 
  </style>
1e9bece0   梁灏   update Split 
85
86
87
88
89
90
 
  <style>
      .demo-split{
          height: 300px;
          border: 1px solid #dddee1;
      }
  </style>