chenhaodong / mew-iview

Blame view

test/routers/carousel.vue 8.13 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
15
16
17
18
19
20
21
 
          <i-col span="4">
              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... 
22
23
 
          <i-col span="4">
              <i-button @click="push">Push</i-button>
e9989f2b   Rijn   added horizontal ... 
24
25
 
              <i-button @click="remove = true">Remove Front</i-button>
          </i-col>
9cd69375   Rijn   added height props 
26
27
 
      </Row>
      <Row>
e9989f2b   Rijn   added horizontal ... 
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
          <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... 
50
 
          </i-col>
9cd69375   Rijn   added height props 
51
52
53
54
55
56
 
          <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 ... 
57
 
      </Row>
9cd69375   Rijn   added height props 
58
 
      <Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
bfc11079   Rijn   updated autoplay ... 
59
60
 
          :current-index.sync="currentIndex"
          :autoplay="autoplay"
90f77e40   Rijn   updated carousel ... 
61
 
          :autoplay-speed="autoplaySpeed"
e9989f2b   Rijn   added horizontal ... 
62
63
64
 
          :dots="dots"
          :trigger="trigger"
          :arrow="arrow"
9cd69375   Rijn   added height props 
65
 
          :height="height"
c1af3fac   Rijn   added on-change e... 
66
 
          @on-change="slideChange"
90f77e40   Rijn   updated carousel ... 
67
 
          easing="linear">
8f4e2cf0   Rijn   update pos when s... 
68
 
          <Carousel-item v-if="!remove">
bfc11079   Rijn   updated autoplay ... 
69
70
71
72
73
74
75
 
              <Alert type="warning" show-icon>
                  警告提示文案
                  <template slot="desc">
                      警告的提示描述文案警告的提示描述文案警告的提示描述文案
                  </template>
              </Alert>
          </Carousel-item>
9cd69375   Rijn   added height props 
76
 
          <Carousel-item>
2171f454   Rijn   added many test 
77
 
              <div style="height: 150px; background: #f50; position: relative">
9cd69375   Rijn   added height props 
78
79
80
 
                  <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 
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
          <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 ... 
101
102
103
 
          <Carousel-item style="text-align: center">
              <Icon type="checkmark" style="font-size: 5em"></Icon>
          </Carousel-item>
41f83010   Rijn   update props and ... 
104
 
          <Carousel-item>test3</Carousel-item>
5e8be9b3   Rijn   fixed add bug. ad... 
105
106
107
 
          <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 ... 
108
 
      </Carousel>
2171f454   Rijn   added many test 
109
 
      <div style="max-height: 200px; overflow: scroll">
9cd69375   Rijn   added height props 
110
 
          <p v-for="item in log" track-by="$index">{{item}}</p>
c1af3fac   Rijn   added on-change e... 
111
 
      </div>
2171f454   Rijn   added many test 
112
113
114
115
116
117
118
119
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
 
  
      <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 
180
181
182
 
  </template>
  <script>
      export default {
bfc11079   Rijn   updated autoplay ... 
183
184
185
186
 
          data () {
              return {
                  currentIndex: 0,
                  autoplay: true,
5e8be9b3   Rijn   fixed add bug. ad... 
187
 
                  autoplaySpeed: 2000,
8f4e2cf0   Rijn   update pos when s... 
188
 
                  remove: false,
e9989f2b   Rijn   added horizontal ... 
189
190
191
 
                  pushItem: [],
                  arrow: 'hover',
                  trigger: 'click',
c1af3fac   Rijn   added on-change e... 
192
 
                  dots: 'inside',
9cd69375   Rijn   added height props 
193
 
                  height: 'auto',
c1af3fac   Rijn   added on-change e... 
194
 
                  log: []
5e8be9b3   Rijn   fixed add bug. ad... 
195
196
197
198
199
 
              }
          },
          methods: {
              push () {
                  this.pushItem.push('test');
c1af3fac   Rijn   added on-change e... 
200
201
202
 
              },
              slideChange (from, to) {
                  this.log.push(`From ${from} To ${to}`);
bfc11079   Rijn   updated autoplay ... 
203
204
 
              }
          }
6c9acb08   Rijn   initialize carousel 
205
206
 
      }
  </script>