other / mew-iview

Blame view

test/routers/carousel.vue 8.5 KB
Edit Raw Normal View History
6c9acb08   Rijn   initialize carousel 
1
 
  <template>
bfc11079   Rijn   updated autoplay ... 
2
3
4
5
6
7
8
9
10
11
12
13
 
      <Row>
          <i-col span="2">
              Current Index
              <p>{{ currentIndex }}</p>
          </i-col>
          <i-col span="2">
              <p>Autoplay</p>
              <Switch :checked.sync="autoplay" size="small"></Switch>
          </i-col>
          <i-col span="4">
              Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
          </i-col>
77d460e8   Rijn   added offset func... 
14
 
          <i-col span="4">
62808b2b   Rijn   reset autoplay ti... 
15
16
17
18
19
20
21
 
              <p>Direction</p>
              <Button-group>
                  <i-button @click="autoplayDirection = 'left'">Left</i-button>
                  <i-button @click="autoplayDirection = 'right'">Right</i-button>
              </Button-group>
          </i-col>
          <i-col span="4">
77d460e8   Rijn   added offset func... 
22
23
24
25
26
27
28
 
              Switch To
              <Button-group>
                  <i-button @click="currentIndex = 0">0</i-button>
                  <i-button @click="currentIndex = 1">1</i-button>
                  <i-button @click="currentIndex = 2">2</i-button>
              </Button-group>
          </i-col>
5e8be9b3   Rijn   fixed add bug. ad... 
29
30
 
          <i-col span="4">
              <i-button @click="push">Push</i-button>
e9989f2b   Rijn   added horizontal ... 
31
32
 
              <i-button @click="remove = true">Remove Front</i-button>
          </i-col>
9cd69375   Rijn   added height props 
33
34
 
      </Row>
      <Row>
e9989f2b   Rijn   added horizontal ... 
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
          <i-col span="4">
              <p>Dots</p>
              <Button-group>
                  <i-button @click="dots = 'inside'">Inside</i-button>
                  <i-button @click="dots = 'outside'">Outside</i-button>
                  <i-button @click="dots = 'none'">None</i-button>
              </Button-group>
          </i-col>
          <i-col span="4">
              <p>Trigger</p>
              <Button-group>
                  <i-button @click="trigger = 'click'">Click</i-button>
                  <i-button @click="trigger = 'hover'">Hover</i-button>
              </Button-group>
          </i-col>
          <i-col span="4">
              Arrow
              <Button-group>
                  <i-button @click="arrow = 'hover'">Hover</i-button>
                  <i-button @click="arrow = 'always'">Always</i-button>
                  <i-button @click="arrow = 'never'">Never</i-button>
              </Button-group>
5e8be9b3   Rijn   fixed add bug. ad... 
57
 
          </i-col>
9cd69375   Rijn   added height props 
58
59
60
61
62
63
 
          <i-col span="4">
              Height
              <i-button @click="height = 'auto'">Auto</i-button>
              <i-button @click="height = 80">Manual</i-button>
              <Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>
          </i-col>
bfc11079   Rijn   updated autoplay ... 
64
 
      </Row>
9cd69375   Rijn   added height props 
65
 
      <Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
bfc11079   Rijn   updated autoplay ... 
66
67
 
          :current-index.sync="currentIndex"
          :autoplay="autoplay"
90f77e40   Rijn   updated carousel ... 
68
 
          :autoplay-speed="autoplaySpeed"
62808b2b   Rijn   reset autoplay ti... 
69
 
          :autoplay-direction="autoplayDirection"
e9989f2b   Rijn   added horizontal ... 
70
71
72
 
          :dots="dots"
          :trigger="trigger"
          :arrow="arrow"
9cd69375   Rijn   added height props 
73
 
          :height="height"
c1af3fac   Rijn   added on-change e... 
74
 
          @on-change="slideChange"
90f77e40   Rijn   updated carousel ... 
75
 
          easing="linear">
8f4e2cf0   Rijn   update pos when s... 
76
 
          <Carousel-item v-if="!remove">
bfc11079   Rijn   updated autoplay ... 
77
78
79
80
81
82
83
 
              <Alert type="warning" show-icon>
                  警告提示文案
                  <template slot="desc">
                      警告的提示描述文案警告的提示描述文案警告的提示描述文案
                  </template>
              </Alert>
          </Carousel-item>
9cd69375   Rijn   added height props 
84
 
          <Carousel-item>
2171f454   Rijn   added many test 
85
 
              <div style="height: 150px; background: #f50; position: relative">
9cd69375   Rijn   added height props 
86
87
88
 
                  <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
              </div>
          </Carousel-item>
2171f454   Rijn   added many test 
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
          <Carousel-item>
              <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
                  <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 居中测试</p>
              </div>
          </Carousel-item>
          <Carousel-item>
              <Card style="width:350px">
                  <p slot="title">
                      <Icon type="ios-film-outline"></Icon>
                      经典电影
                  </p>
                  <a href="#" slot="extra">
                      <Icon type="ios-loop-strong"></Icon>
                      换一换
                  </a>
                  <ul>
  
                  </ul>
              </Card>
          </Carousel-item>
90f77e40   Rijn   updated carousel ... 
109
110
111
 
          <Carousel-item style="text-align: center">
              <Icon type="checkmark" style="font-size: 5em"></Icon>
          </Carousel-item>
41f83010   Rijn   update props and ... 
112
 
          <Carousel-item>test3</Carousel-item>
5e8be9b3   Rijn   fixed add bug. ad... 
113
114
115
 
          <Carousel-item v-for="item in pushItem" track-by="$index">
              <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
          </Carousel-item>
41f83010   Rijn   update props and ... 
116
 
      </Carousel>
2171f454   Rijn   added many test 
117
 
      <div style="max-height: 200px; overflow: scroll">
9cd69375   Rijn   added height props 
118
 
          <p v-for="item in log" track-by="$index">{{item}}</p>
c1af3fac   Rijn   added on-change e... 
119
 
      </div>
2171f454   Rijn   added many test 
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
  
      <Card style="width:350px">
          <p slot="title">
              <Icon type="ios-film-outline"></Icon>
              经典电影
          </p>
          <Carousel>
              <Carousel-item v-if="!remove">
                  <Alert type="warning" show-icon>
                      警告提示文案
                      <template slot="desc">
                          警告的提示描述文案警告的提示描述文案警告的提示描述文案
                      </template>
                  </Alert>
              </Carousel-item>
              <Carousel-item>
                  <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
                      <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
                  </div>
              </Carousel-item>
              <Carousel-item style="text-align: center">
                  <Icon type="checkmark" style="font-size: 5em"></Icon>
              </Carousel-item>
          </Carousel>
      </Card>
      <Tabs>
          <Tab-pane label="标签一">
              <Carousel>
                  <Carousel-item v-if="!remove">
                      <Alert type="warning" show-icon>
                          警告提示文案
                          <template slot="desc">
                              警告的提示描述文案警告的提示描述文案警告的提示描述文案
                          </template>
                      </Alert>
                  </Carousel-item>
                  <Carousel-item>
                      <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
                          <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
                      </div>
                  </Carousel-item>
                  <Carousel-item style="text-align: center">
                      <Icon type="checkmark" style="font-size: 5em"></Icon>
                  </Carousel-item>
              </Carousel>
          </Tab-pane>
          <Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>
          <Tab-pane label="标签三">
              <Carousel>
                  <Carousel-item v-if="!remove">
                      <Alert type="warning" show-icon>
                          警告提示文案
                          <template slot="desc">
                              警告的提示描述文案警告的提示描述文案警告的提示描述文案
                          </template>
                      </Alert>
                  </Carousel-item>
                  <Carousel-item>
                      <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
                          <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
                      </div>
                  </Carousel-item>
                  <Carousel-item style="text-align: center">
                      <Icon type="checkmark" style="font-size: 5em"></Icon>
                  </Carousel-item>
              </Carousel>
          </Tab-pane>
      </Tabs>
6c9acb08   Rijn   initialize carousel 
188
189
190
 
  </template>
  <script>
      export default {
bfc11079   Rijn   updated autoplay ... 
191
192
193
194
 
          data () {
              return {
                  currentIndex: 0,
                  autoplay: true,
5e8be9b3   Rijn   fixed add bug. ad... 
195
 
                  autoplaySpeed: 2000,
62808b2b   Rijn   reset autoplay ti... 
196
 
                  autoplayDirection: 'left',
8f4e2cf0   Rijn   update pos when s... 
197
 
                  remove: false,
e9989f2b   Rijn   added horizontal ... 
198
199
200
 
                  pushItem: [],
                  arrow: 'hover',
                  trigger: 'click',
c1af3fac   Rijn   added on-change e... 
201
 
                  dots: 'inside',
9cd69375   Rijn   added height props 
202
 
                  height: 'auto',
c1af3fac   Rijn   added on-change e... 
203
 
                  log: []
5e8be9b3   Rijn   fixed add bug. ad... 
204
205
206
207
208
 
              }
          },
          methods: {
              push () {
                  this.pushItem.push('test');
c1af3fac   Rijn   added on-change e... 
209
210
211
 
              },
              slideChange (from, to) {
                  this.log.push(`From ${from} To ${to}`);
bfc11079   Rijn   updated autoplay ... 
212
213
 
              }
          }
6c9acb08   Rijn   initialize carousel 
214
215
 
      }
  </script>