chenhaodong / mew-iview

Commit 50f4ac7088019db5d86271bc5607f9bb10fc1989

Authored by Rijn
2 parents 2171f454 6bfdf8f8

Merge branch 'master' of https://github.com/iview/iview into carousel 

Conflicts:
	src/styles/components/index.less
	test/app.vue
	test/main.js
Showing 27 changed files with 463 additions and 249 deletions   Show diff stats
Inline Side-by-side
assets/iview.png
View file @50f4ac7

163 KB | W: | H:

162 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
package.json
  Show/Hide comments   View file @50f4ac7
1 1 {
2 2 "name": "iview",
3   - "version": "0.9.15",
  3 + "version": "0.9.16",
4 4 "title": "iView",
5 5 "description": "A high quality UI components Library with Vue.js",
6 6 "homepage": "http://www.iviewui.com",
... ...
src/components/carousel/carousel-item.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -21,7 +21,7 @@
21 21 width: `${this.width}px`,
22 22 height: `${this.height}`,
23 23 left: `${this.left}px`
24   - }
  24 + };
25 25 }
26 26 },
27 27 compiled () {
... ...
src/components/carousel/carousel.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -24,12 +24,13 @@
24 24 </template>
25 25 <script>
26 26 import Icon from '../icon/icon.vue';
27   - import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
  27 + import { getStyle } from '../../utils/assist';
28 28  
29 29 const prefixCls = 'ivu-carousel';
30 30  
31 31 export default {
32 32 name: 'Carousel',
  33 + components: { Icon },
33 34 props: {
34 35 arrow: {
35 36 type: String,
... ... @@ -74,7 +75,7 @@
74 75 slideInstances: [],
75 76 timer: null,
76 77 ready: false
77   - }
  78 + };
78 79 },
79 80 computed: {
80 81 classes () {
... ... @@ -93,13 +94,13 @@
93 94 return [
94 95 `${prefixCls}-arrow`,
95 96 `${prefixCls}-arrow-${this.arrow}`
96   - ]
  97 + ];
97 98 },
98 99 dotsClasses () {
99 100 return [
100 101 `${prefixCls}-dots`,
101 102 `${prefixCls}-dots-${this.dots}`
102   - ]
  103 + ];
103 104 }
104 105 },
105 106 methods: {
... ... @@ -127,7 +128,7 @@
127 128 });
128 129 }
129 130 },
130   - updateSlides (init, slot = false) {
  131 + updateSlides (init ) {
131 132 let slides = [];
132 133 let index = 1;
133 134  
... ... @@ -173,12 +174,10 @@
173 174 index += offset;
174 175 while (index < 0) index += this.slides.length;
175 176 index = index % this.slides.length;
176   - this.$emit('on-change', this.currentIndex, index);
177 177 this.currentIndex = index;
178 178 },
179 179 dotsEvent (event, n) {
180 180 if (event === this.trigger && this.currentIndex !== n) {
181   - this.$emit('on-change', this.currentIndex, n);
182 181 this.currentIndex = n;
183 182 }
184 183 },
... ... @@ -208,6 +207,7 @@
208 207 this.setAutoplay();
209 208 },
210 209 currentIndex (val, oldVal) {
  210 + this.$emit('on-change', oldVal, val);
211 211 this.updateOffset();
212 212 },
213 213 height () {
... ...
src/components/form/form-item.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -3,7 +3,7 @@
3 3 <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
4 4 <div :class="[prefixCls + '-content']" :style="contentStyles">
5 5 <slot></slot>
6   - <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error'">{{ validateMessage }}</div>
  6 + <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
7 7 </div>
8 8 </div>
9 9 </template>
... ... @@ -61,6 +61,10 @@
61 61 },
62 62 validateStatus: {
63 63 type: Boolean
  64 + },
  65 + showMessage: {
  66 + type: Boolean,
  67 + default: true
64 68 }
65 69 },
66 70 data () {
... ...
src/components/form/form.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -28,6 +28,10 @@
28 28 inline: {
29 29 type: Boolean,
30 30 default: false
  31 + },
  32 + showMessage: {
  33 + type: Boolean,
  34 + default: true
31 35 }
32 36 },
33 37 data () {
... ...
src/components/input-number/input-number.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -144,32 +144,52 @@
144 144 preventDefault (e) {
145 145 e.preventDefault();
146 146 },
147   - up () {
148   - if (this.upDisabled) {
  147 + up (e) {
  148 + const targetVal = Number(e.target.value);
  149 + if (this.upDisabled && isNaN(targetVal)) {
149 150 return false;
150 151 }
151   - this.changeStep('up');
  152 + this.changeStep('up', e);
152 153 },
153   - down () {
154   - if (this.downDisabled) {
  154 + down (e) {
  155 + const targetVal = Number(e.target.value);
  156 + if (this.downDisabled && isNaN(targetVal)) {
155 157 return false;
156 158 }
157   - this.changeStep('down');
  159 + this.changeStep('down', e);
158 160 },
159   - changeStep (type) {
  161 + changeStep (type, e) {
160 162 if (this.disabled) {
161 163 return false;
162 164 }
163 165  
  166 + const targetVal = Number(e.target.value);
164 167 let val = Number(this.value);
165 168 const step = Number(this.step);
166 169 if (isNaN(val)) {
167 170 return false;
168 171 }
169 172  
170   - if (type == 'up') {
  173 + // input a number, and key up or down
  174 + if (!isNaN(targetVal)) {
  175 + if (type === 'up') {
  176 + if (addNum(targetVal, step) <= this.max) {
  177 + val = targetVal;
  178 + } else {
  179 + return false;
  180 + }
  181 + } else if (type === 'down') {
  182 + if (addNum(targetVal, -step) >= this.min) {
  183 + val = targetVal;
  184 + } else {
  185 + return false;
  186 + }
  187 + }
  188 + }
  189 +
  190 + if (type === 'up') {
171 191 val = addNum(val, step);
172   - } else if (type == 'down') {
  192 + } else if (type === 'down') {
173 193 val = addNum(val, -step);
174 194 }
175 195 this.setValue(val);
... ... @@ -190,10 +210,10 @@
190 210 keyDown (e) {
191 211 if (e.keyCode === 38) {
192 212 e.preventDefault();
193   - this.up();
  213 + this.up(e);
194 214 } else if (e.keyCode === 40) {
195 215 e.preventDefault();
196   - this.down();
  216 + this.down(e);
197 217 }
198 218 },
199 219 change (event) {
... ... @@ -230,7 +250,7 @@
230 250 }
231 251 }
232 252 },
233   - ready () {
  253 + compiled () {
234 254 this.changeVal(this.value);
235 255 },
236 256 watch: {
... ...
src/components/menu/submenu.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -5,12 +5,20 @@
5 5 <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
6 6 </div>
7 7 <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
8   - <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
  8 + <Drop
  9 + v-else
  10 + v-show="opened"
  11 + placement="bottom"
  12 + transition="slide-up"
  13 + v-ref:drop
  14 + :style="dropStyle"><slot></slot></Drop>
9 15 </li>
10 16 </template>
11 17 <script>
12 18 import Drop from '../select/dropdown.vue';
13 19 import Icon from '../icon/icon.vue';
  20 + import { getStyle } from '../../utils/assist';
  21 +
14 22 const prefixCls = 'ivu-menu';
15 23  
16 24 export default {
... ... @@ -30,7 +38,8 @@
30 38 return {
31 39 prefixCls: prefixCls,
32 40 active: false,
33   - opened: false
  41 + opened: false,
  42 + dropWidth: parseFloat(getStyle(this.$el, 'width'))
34 43 };
35 44 },
36 45 computed: {
... ... @@ -49,6 +58,12 @@
49 58 },
50 59 accordion () {
51 60 return this.$parent.accordion;
  61 + },
  62 + dropStyle () {
  63 + let style = {};
  64 +
  65 + if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
  66 + return style;
52 67 }
53 68 },
54 69 methods: {
... ... @@ -94,6 +109,8 @@
94 109 opened (val) {
95 110 if (this.mode === 'vertical') return;
96 111 if (val) {
  112 + // set drop a width to fixed when menu has fixed position
  113 + this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
97 114 this.$refs.drop.update();
98 115 } else {
99 116 this.$refs.drop.destroy();
... ...
src/components/poptip/poptip.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -8,8 +8,8 @@
8 8 :class="[prefixCls + '-rel']"
9 9 v-el:reference
10 10 @click="handleClick"
11   - @mousedown="handleFocus"
12   - @mouseup="handleBlur">
  11 + @mousedown="handleFocus(false)"
  12 + @mouseup="handleBlur(false)">
13 13 <slot></slot>
14 14 </div>
15 15 <div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
... ... @@ -91,7 +91,8 @@
91 91 data () {
92 92 return {
93 93 prefixCls: prefixCls,
94   - showTitle: true
  94 + showTitle: true,
  95 + isInput: false
95 96 };
96 97 },
97 98 computed: {
... ... @@ -133,14 +134,14 @@
133 134 }
134 135 this.visible = false;
135 136 },
136   - handleFocus () {
137   - if (this.trigger !== 'focus' || this.confirm) {
  137 + handleFocus (fromInput = true) {
  138 + if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
138 139 return false;
139 140 }
140 141 this.visible = true;
141 142 },
142   - handleBlur () {
143   - if (this.trigger !== 'focus' || this.confirm) {
  143 + handleBlur (fromInput = true) {
  144 + if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
144 145 return false;
145 146 }
146 147 this.visible = false;
... ... @@ -164,12 +165,41 @@
164 165 ok () {
165 166 this.visible = false;
166 167 this.$emit('on-ok');
  168 + },
  169 + getInputChildren () {
  170 + const $input = this.$els.reference.querySelectorAll('input');
  171 + const $textarea = this.$els.reference.querySelectorAll('textarea');
  172 + let $children = null;
  173 +
  174 + if ($input.length) {
  175 + $children = $input[0];
  176 + } else if ($textarea.length) {
  177 + $children = $textarea[0];
  178 + }
  179 +
  180 + return $children;
167 181 }
168 182 },
169   - ready () {
  183 + compiled () {
170 184 if (!this.confirm) {
171 185 this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
172 186 }
  187 + // if trigger and children is input or textarea,listen focus & blur event
  188 + if (this.trigger === 'focus') {
  189 + const $children = this.getInputChildren();
  190 + if ($children) {
  191 + $children.addEventListener('focus', this.handleFocus, false);
  192 + $children.addEventListener('blur', this.handleBlur, false);
  193 + this.isInput = true;
  194 + }
  195 + }
  196 + },
  197 + beforeDestroy () {
  198 + const $children = this.getInputChildren();
  199 + if ($children) {
  200 + $children.removeEventListener('focus', this.handleFocus, false);
  201 + $children.removeEventListener('blur', this.handleBlur, false);
  202 + }
173 203 }
174 204 };
175 205 </script>
... ...
src/components/rate/index.js 0 → 100644
  Show/Hide comments   View file @50f4ac7
  1 +import Rate from './rate.vue';
  2 +export default Rate;
0 3 \ No newline at end of file
... ...
src/components/rate/rate.vue 0 → 100644
  Show/Hide comments   View file @50f4ac7
  1 +<template>
  2 + <div :class="classes" @mouseleave="handleMouseleave">
  3 + <div
  4 + v-for="item in count"
  5 + :class="starCls(item)"
  6 + @mousemove="handleMousemove(item, $event)"
  7 + @click="handleClick(item)">
  8 + <span :class="[prefixCls + '-star-content']" type="half"></span>
  9 + </div>
  10 + <div :class="[prefixCls + '-text']" v-if="showText" v-show="value > 0">
  11 + <slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
  12 + </div>
  13 + </div>
  14 +</template>
  15 +<script>
  16 + import Locale from '../../mixins/locale';
  17 +
  18 + const prefixCls = 'ivu-rate';
  19 +
  20 + export default {
  21 + mixins: [ Locale ],
  22 + props: {
  23 + count: {
  24 + type: Number,
  25 + default: 5
  26 + },
  27 + value: {
  28 + type: Number,
  29 + default: 0
  30 + },
  31 + allowHalf: {
  32 + type: Boolean,
  33 + default: false
  34 + },
  35 + disabled: {
  36 + type: Boolean,
  37 + default: false
  38 + },
  39 + showText: {
  40 + type: Boolean,
  41 + default: false
  42 + }
  43 + },
  44 + data () {
  45 + return {
  46 + prefixCls: prefixCls,
  47 + hoverIndex: -1,
  48 + isHover: false,
  49 + isHalf: false
  50 + };
  51 + },
  52 + computed: {
  53 + classes () {
  54 + return [
  55 + `${prefixCls}`,
  56 + {
  57 + [`${prefixCls}-disabled`]: this.disabled
  58 + }
  59 + ];
  60 + }
  61 + },
  62 + watch: {
  63 + value: {
  64 + immediate: true,
  65 + handler (val) {
  66 + this.setHalf(val);
  67 + }
  68 + }
  69 + },
  70 + methods: {
  71 + starCls (value) {
  72 + const hoverIndex = this.hoverIndex;
  73 + const currentIndex = this.isHover ? hoverIndex : this.value;
  74 +
  75 + let full = false;
  76 + let isLast = false;
  77 +
  78 + if (currentIndex > value) full = true;
  79 +
  80 + if (this.isHover) {
  81 + isLast = currentIndex === value + 1;
  82 + } else {
  83 + isLast = Math.ceil(this.value) === value + 1;
  84 + }
  85 +
  86 + return [
  87 + `${prefixCls}-star`,
  88 + {
  89 + [`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
  90 + [`${prefixCls}-star-half`]: isLast && this.isHalf,
  91 + [`${prefixCls}-star-zero`]: !full
  92 + }
  93 + ];
  94 + },
  95 + handleMousemove(value, event) {
  96 + if (this.disabled) return;
  97 +
  98 + this.isHover = true;
  99 + if (this.allowHalf) {
  100 + const type = event.target.getAttribute('type') || false;
  101 + this.isHalf = type === 'half';
  102 + } else {
  103 + this.isHalf = false;
  104 + }
  105 + this.hoverIndex = value + 1;
  106 + },
  107 + handleMouseleave () {
  108 + if (this.disabled) return;
  109 +
  110 + this.isHover = false;
  111 + this.setHalf(this.value);
  112 + this.hoverIndex = -1;
  113 + },
  114 + setHalf (val) {
  115 + this.isHalf = val.toString().indexOf('.') >= 0;
  116 + },
  117 + handleClick (value) {
  118 + if (this.disabled) return;
  119 + value++;
  120 + if (this.isHalf) value -= 0.5;
  121 + this.value = value;
  122 + this.$emit('on-change', value);
  123 + this.$dispatch('on-form-change', value);
  124 + }
  125 + }
  126 + };
  127 +</script>
0 128 \ No newline at end of file
... ...
src/components/select/option.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -55,7 +55,8 @@
55 55 this.isFocus = false;
56 56 },
57 57 queryChange (val) {
58   - this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
  58 + const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
  59 + this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
59 60 }
60 61 },
61 62 compiled () {
... ...
src/index.js
  Show/Hide comments   View file @50f4ac7
... ... @@ -28,6 +28,7 @@ import Page from &#39;./components/page&#39;;
28 28 import Poptip from './components/poptip';
29 29 import Progress from './components/progress';
30 30 import Radio from './components/radio';
  31 +import Rate from './components/rate';
31 32 import Slider from './components/slider';
32 33 import Spin from './components/spin';
33 34 import Steps from './components/steps';
... ... @@ -86,6 +87,7 @@ const iview = {
86 87 Progress,
87 88 Radio,
88 89 RadioGroup: Radio.Group,
  90 + Rate,
89 91 Row,
90 92 iSelect: Select,
91 93 Slider,
... ...
src/locale/lang/en-US.js
  Show/Hide comments   View file @50f4ac7
... ... @@ -83,6 +83,10 @@ export default {
83 83 page: '/page',
84 84 goto: 'Goto',
85 85 p: ''
  86 + },
  87 + rate: {
  88 + star: 'Star',
  89 + stars: 'Stars'
86 90 }
87 91 }
88 92 };
89 93 \ No newline at end of file
... ...
src/locale/lang/zh-CN.js
  Show/Hide comments   View file @50f4ac7
... ... @@ -83,6 +83,10 @@ export default {
83 83 page: '条/页',
84 84 goto: '跳至',
85 85 p: '页'
  86 + },
  87 + rate: {
  88 + star: '星',
  89 + stars: '星'
86 90 }
87 91 }
88 92 };
89 93 \ No newline at end of file
... ...
src/locale/lang/zh-TW.js
  Show/Hide comments   View file @50f4ac7
... ... @@ -83,6 +83,10 @@ export default {
83 83 page: '條/頁',
84 84 goto: '跳至',
85 85 p: '頁'
  86 + },
  87 + rate: {
  88 + star: '星',
  89 + stars: '星'
86 90 }
87 91 }
88 92 };
89 93 \ No newline at end of file
... ...
src/styles/components/index.less
  Show/Hide comments   View file @50f4ac7
... ... @@ -35,4 +35,5 @@
35 35 @import "date-picker";
36 36 @import "time-picker";
37 37 @import "form";
38   -@import "carousel";
39 38 \ No newline at end of file
  39 +@import "carousel";
  40 +@import "rate";
... ...
src/styles/components/rate.less 0 → 100644
  Show/Hide comments   View file @50f4ac7
  1 +@rate-prefix-cls: ~"@{css-prefix}rate";
  2 +
  3 +.@{rate-prefix-cls} {
  4 + display: inline-block;
  5 + margin: 0;
  6 + padding: 0;
  7 + font-size: 20px;
  8 + vertical-align: middle;
  9 + font-weight: normal;
  10 + font-style: normal;
  11 +
  12 + &-disabled &-star {
  13 + &:before,
  14 + &-content:before {
  15 + cursor: default;
  16 + }
  17 + &:hover {
  18 + transform: scale(1);
  19 + }
  20 + }
  21 +
  22 + &-star {
  23 + display: inline-block;
  24 + margin: 0;
  25 + padding: 0;
  26 + margin-right: 8px;
  27 + position: relative;
  28 + font-family: 'Ionicons';
  29 + transition: all 0.3s ease;
  30 +
  31 + &:hover {
  32 + transform: scale(1.1);
  33 + }
  34 +
  35 + &:before,
  36 + &-content:before {
  37 + color: #e9e9e9;
  38 + cursor: pointer;
  39 + content: "\F4B3";
  40 + transition: all @transition-time @ease-in-out;
  41 + display: block;
  42 + }
  43 +
  44 + &-content {
  45 + position: absolute;
  46 + left: 0;
  47 + top: 0;
  48 + width: 50%;
  49 + height: 100%;
  50 + overflow: hidden;
  51 + &:before {
  52 + color: transparent;
  53 + }
  54 + }
  55 +
  56 + &-half &-content:before,
  57 + &-full:before {
  58 + color: @rate-star-color;
  59 + }
  60 +
  61 + &-half:hover &-content:before,
  62 + &-full:hover:before {
  63 + color: tint(@rate-star-color, 20%);
  64 + }
  65 + }
  66 + &-text {
  67 + margin-left: 8px;
  68 + vertical-align: middle;
  69 + display: inline-block;
  70 + font-size: @font-size-small;
  71 + }
  72 +}
0 73 \ No newline at end of file
... ...
src/styles/themes/default/custom.less
  Show/Hide comments   View file @50f4ac7
... ... @@ -14,6 +14,7 @@
14 14 @selected-color : fade(@primary-color, 90%);
15 15 @tooltip-color : #fff;
16 16 @subsidiary-color : #9ea7b4;
  17 +@rate-star-color : #f5a623;
17 18  
18 19 // Base
19 20 @body-background : #fff;
... ...
test/app.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -48,6 +48,7 @@ li + li {
48 48 <li><a v-link="'/date'">Date</a></li>
49 49 <li><a v-link="'/form'">Form</a></li>
50 50 <li><a v-link="'/carousel'">Carousel</a></li>
  51 + <li><a v-link="'/rate'">Rate</a></li>
51 52 </ul>
52 53 </nav>
53 54 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @50f4ac7
... ... @@ -6,9 +6,10 @@ import VueRouter from &#39;vue-router&#39;;
6 6 import App from './app.vue';
7 7 import iView from '../src/index';
8 8 // import locale from '../src/locale/lang/en-US';
  9 +import locale from '../src/locale/lang/zh-CN';
9 10  
10 11 Vue.use(VueRouter);
11   -Vue.use(iView);
  12 +Vue.use(iView, { locale });
12 13  
13 14 // 开启debug模式
14 15 Vue.config.debug = true;
... ... @@ -139,6 +140,11 @@ router.map({
139 140 require(['./routers/carousel.vue'], resolve);
140 141 }
141 142 },
  143 + '/rate': {
  144 + component: function (resolve) {
  145 + require(['./routers/rate.vue'], resolve);
  146 + }
  147 + },
142 148 });
143 149  
144 150 router.beforeEach(function () {
... ...
test/routers/form.vue
  Show/Hide comments   View file @50f4ac7
... ... @@ -5,7 +5,7 @@
5 5 <Icon type="ios-person-outline" slot="prepend"></Icon>
6 6 </i-input>
7 7 </Form-item>
8   - <Form-item prop="password">
  8 + <Form-item prop="password" :show-message="false">
9 9 <i-input type="password" :value.sync="formInline.password" placeholder="Password">
10 10 <Icon type="ios-locked-outline" slot="prepend"></Icon>
11 11 </i-input>
... ...
test/routers/input.vue
  Show/Hide comments   View file @50f4ac7
1 1 <template>
  2 + <Input-number :max="10" :min="1" :value="1"></Input-number>
  3 + <br><br>
2 4 <i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
3 5 <i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
4 6 <i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
... ...
test/routers/menu.vue
  Show/Hide comments   View file @50f4ac7
1 1 <template>
2   - <Menu mode="horizontal" theme="primary" active-key="1">
3   - <Submenu key="1">
4   - <template slot="title">
5   - <Icon type="soup-can-outline"></Icon>
6   - 数据管理
7   - </template>
8   - <Menu-group title="使用">
9   - <Menu-item key="1-1">新增和启动新增和启动</Menu-item>
10   - <Menu-item key="1-2">活跃分析</Menu-item>
11   - <Menu-item key="1-3">时段分析</Menu-item>
12   - </Menu-group>
13   - <Menu-group title="留存">
14   - <Menu-item key="1-4">用户留存</Menu-item>
15   - <Menu-item key="1-5">流失用户</Menu-item>
16   - </Menu-group>
17   - </Submenu>
18   - </Menu>
19   - <br>
20   - <p>切换主题</p>
21   - <Radio-group :model.sync="theme1">
22   - <Radio value="light"></Radio>
23   - <Radio value="dark"></Radio>
24   - <Radio value="primary"></Radio>
25   - </Radio-group>
  2 + <div style="margin: 50px;position:relative;top: 0;left: 0;">
  3 + <Menu mode="horizontal" :theme="theme1" active-key="1">
  4 + <Menu-item key="1">
  5 + <Icon type="ios-paper"></Icon>
  6 + 内容管理
  7 + </Menu-item>
  8 + <Menu-item key="2">
  9 + <Icon type="ios-people"></Icon>
  10 + 用户管理
  11 + </Menu-item>
  12 + <Menu-item key="1">
  13 + <Icon type="ios-paper"></Icon>
  14 + 内容管理
  15 + </Menu-item>
  16 + <Menu-item key="2">
  17 + <Icon type="ios-people"></Icon>
  18 + 用户管理
  19 + </Menu-item>
  20 + <Menu-item key="1">
  21 + <Icon type="ios-paper"></Icon>
  22 + 内容管理
  23 + </Menu-item>
  24 + <Menu-item key="2">
  25 + <Icon type="ios-people"></Icon>
  26 + 用户管理
  27 + </Menu-item>
  28 + <Submenu key="3">
  29 + <template slot="title">
  30 + <Icon type="stats-bars"></Icon>
  31 + 统计分析
  32 + </template>
  33 + <Menu-group title="使用">
  34 + <Menu-item key="3-1">新增和新</Menu-item>
  35 + <Menu-item key="3-2">活跃分析</Menu-item>
  36 + <Menu-item key="3-3">时段分析</Menu-item>
  37 + </Menu-group>
  38 + <Menu-group title="留存">
  39 + <Menu-item key="3-4">用户留存</Menu-item>
  40 + <Menu-item key="3-5">流失用户</Menu-item>
  41 + </Menu-group>
  42 + </Submenu>
  43 + <Menu-item key="4">
  44 + <Icon type="settings"></Icon>
  45 + 综合设置
  46 + </Menu-item>
  47 + </Menu>
  48 + </div>
26 49 </template>
27 50 <script>
28 51 export default {
... ...
test/routers/poptip.vue
  Show/Hide comments   View file @50f4ac7
1   -<style>
2   - .tooltip_out{
3   - padding: 150px;
4   - }
5   - body{
6   - height: 1000px;
7   - padding: 10px;
8   - }
9   - .api table{
10   - font-family: Consolas,Menlo,Courier,monospace;
11   - font-size: 13px;
12   - border-collapse: collapse;
13   - border-spacing: 0;
14   - empty-cells: show;
15   - border: 1px solid #e9e9e9;
16   - width: 100%;
17   - margin-bottom: 24px;
18   - }
19   - .api table th{
20   - background: #f7f7f7;
21   - white-space: nowrap;
22   - color: #5c6b77;
23   - font-weight: 600;
24   - }
25   - .api table td, .api table th{
26   - border: 1px solid #e9e9e9;
27   - padding: 8px 16px;
28   - text-align: left;
29   - }
30   - .tip{
31   - width: 24px;
32   - position: fixed;
33   - top: 10px;
34   - right: 10px;
35   - }
36   - .tip-inner{
37   - width: 24px;
38   - height: 24px;
39   - line-height: 22px;
40   - text-align: center;
41   - background: #fff;
42   - border: 1px solid #3399ff;
43   - color: #3399ff;
44   - border-radius: 50%;
45   - cursor: pointer;
46   - }
47   - .tip-content{
48   - width: 200px;
49   - height: 100px;
50   - white-space: normal;
51   - }
52   -</style>
53 1 <template>
54   - <Tooltip content="这里是提示文字">
55   - 当鼠标经过这段文字时，会显示一个气泡框
56   - </Tooltip>
57   - <div class="tooltip_out">
58   - <!--<Tooltip placement="top" content="Tooltip 文字提示">-->
59   - <!--<strong>-->
60   - <!--<a>Link</a>-->
61   - <!--</strong>-->
62   - <!--</Tooltip>-->
63   - <!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
64   - <!--<i-button>hover 激活</i-button>-->
65   - <!--</Poptip>-->
66   - <!--<Poptip content="提示内容" title="tip">-->
67   - <!--<i-button>click 激活</i-button>-->
68   - <!--</Poptip>-->
69   - <!--<Poptip content="提示内容">-->
70   - <!--<div slot="title"><i>自定义标题</i></div>-->
71   - <!--<i-button>click 激活</i-button>-->
72   - <!--</Poptip>-->
73   - <!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
74   - <!--<div class="tip-inner">-->
75   - <!--<Icon type="information"></Icon>-->
76   - <!--</div>-->
77   - <!--<div class="tip-content" slot="content">-->
78   - <!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
79   - <!--</div>-->
80   - <!--</Tooltip>-->
81   - <!--<Poptip>-->
82   - <!--<a>click 激活</a>-->
83   - <!--<div slot="title"><i>自定义标题</i></div>-->
84   - <!--<div slot="content">-->
85   - <!--<a>关闭提示框</a>-->
86   - <!--</div>-->
87   - <!--</Poptip>-->
88   - <!--<Poptip placement="right" width="300">-->
89   - <!--<i-button type="ghost">click 激活</i-button>-->
90   - <!--<div class="api" slot="content">-->
91   - <!--<table>-->
92   - <!--<thead>-->
93   - <!--<tr>-->
94   - <!--<th>属性</th>-->
95   - <!--<th>说明</th>-->
96   - <!--<th>类型</th>-->
97   - <!--<th>默认值</th>-->
98   - <!--</tr>-->
99   - <!--</thead>-->
100   - <!--<tbody>-->
101   - <!--<tr>-->
102   - <!--<td>content</td>-->
103   - <!--<td>显示的内容</td>-->
104   - <!--<td>String | Number</td>-->
105   - <!--<td>空</td>-->
106   - <!--</tr>-->
107   - <!--<tr>-->
108   - <!--<td>placement</td>-->
109   - <!--<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->
110   - <!--<td>String</td>-->
111   - <!--<td>bottom</td>-->
112   - <!--</tr>-->
113   - <!--<tr>-->
114   - <!--<td>disabled</td>-->
115   - <!--<td>是否禁用提示框</td>-->
116   - <!--<td>Boolean</td>-->
117   - <!--<td>false</td>-->
118   - <!--</tr>-->
119   - <!--<tr>-->
120   - <!--<td>delay</td>-->
121   - <!--<td>延迟显示，单位毫秒</td>-->
122   - <!--<td>Number</td>-->
123   - <!--<td>0</td>-->
124   - <!--</tr>-->
125   - <!--</tbody>-->
126   - <!--</table>-->
127   - <!--</div>-->
128   - <!--</Poptip>-->
129   - <!--<Poptip title="标题" content="内容">-->
130   - <!--<Button>click 触发</Button>-->
131   - <!--</Poptip>-->
132   - <!--<Poptip title="标题" content="内容" trigger="hover">-->
133   - <!--<Button>hover 触发</Button>-->
134   - <!--</Poptip>-->
135   - <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" @on-popper-hide="hide">
136   - <a><strong>Delete</strong></a>
  2 + <div style="margin: 100px">
  3 + <Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
  4 + <i-button>hover 激活</i-button>
  5 + </Poptip>
  6 + <Poptip title="提示标题" placement="bottom" content="提示内容">
  7 + <i-button>click 激活</i-button>
  8 + </Poptip>
  9 + <Poptip trigger="focus" title="提示标题" content="提示内容">
  10 + <i-input type="textarea"></i-input>
  11 + <!--<i-button>focus 激活</i-button>-->
  12 + </Poptip>
  13 + <Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
  14 + <i-input></i-input>
137 15 </Poptip>
138   - <!--<Poptip title="标题" content="内容" trigger="focus">-->
139   - <!--<input type="text">-->
140   - <!--</Poptip>-->
141   - <!--<Poptip title="标题" content="内容" trigger="focus">-->
142   - <!--<Button>focus 触发</Button>-->
143   - <!--</Poptip>-->
144   - <!--<Tooltip content="这里是提示文字">-->
145   - <!--当鼠标经过这段文字时，会显示一个气泡框-->
146   - <!--</Tooltip>-->
147   - <!--<Poptip>-->
148   - <!--<a>click 激活</a>-->
149   - <!--<div slot="content">-->
150   - <!--<a>关闭提示框</a>-->
151   - <!--</div>-->
152   - <!--</Poptip>-->
153 16 </div>
154 17 </template>
155 18 <script>
156   - import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
157   -
158 19 export default {
159   - components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
160   - props: {
161   -
162   - },
163   - data () {
164   - return {
165   -
166   - }
167   - },
168   - computed: {
169 20  
170   - },
171   - methods: {
172   - ok () {
173   - Message.info('ok');
174   - },
175   - cancel () {
176   - Message.info('cancel');
177   - },
178   - hide () {
179   - Message.info('hide')
180   - }
181   - }
182 21 }
183 22 </script>
... ...
test/routers/rate.vue 0 → 100644
  Show/Hide comments   View file @50f4ac7
  1 +<template>
  2 + <Row>
  3 + <i-col span="12">
  4 + <Rate show-text :value.sync="valueText"></Rate>
  5 + </i-col>
  6 + <i-col span="12">
  7 + <Rate show-text :value.sync="valueCustomText">
  8 + <span style="color: #f5a623">{{ valueCustomText }}</span>
  9 + </Rate>
  10 + </i-col>
  11 + </Row>
  12 +</template>
  13 +<script>
  14 + export default {
  15 + props: {},
  16 + data () {
  17 + return {
  18 + valueText: 3,
  19 + valueCustomText: 3.8
  20 + };
  21 + },
  22 + computed: {},
  23 + methods: {}
  24 + };
  25 +</script>
0 26 \ No newline at end of file
... ...
test/routers/select.vue
  Show/Hide comments   View file @50f4ac7
1 1 <template>
2   - <i-select :model.sync="model9" style="width:200px">
3   - <i-option value="beijing" label="北京市">
4   - <span>北京</span>
5   - <span style="float:right;color:#ccc">Beiing</span>
6   - </i-option>
7   - <i-option value="shanghai" label="上海市">
8   - <span>上海</span>
9   - <span style="float:right;color:#ccc">ShangHai</span>
10   - </i-option>
11   - <i-option value="shenzhen" label="深圳市">
12   - <span>深圳</span>
13   - <span style="float:right;color:#ccc">ShenZhen</span>
14   - </i-option>
15   - </i-select>
  2 + <Row>
  3 + <i-col span="12" style="padding-right:10px">
  4 + <i-select :model.sync="model11" filterable>
  5 + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  6 + </i-select>
  7 + </i-col>
  8 + <i-col span="12">
  9 + <i-select :model.sync="model12" filterable multiple>
  10 + <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
  11 + </i-select>
  12 + </i-col>
  13 + </Row>
16 14 </template>
17 15 <script>
18 16 export default {
19 17 data () {
20 18 return {
21   - model9: 'shanghai'
  19 + cityList: [
  20 + {
  21 + value: 'beijing',
  22 + label: '北京市'
  23 + },
  24 + {
  25 + value: 'shanghai',
  26 + label: '上海市'
  27 + },
  28 + {
  29 + value: 'shenzhen',
  30 + label: '深圳市'
  31 + },
  32 + {
  33 + value: 'hangzhou',
  34 + label: '杭州市'
  35 + },
  36 + {
  37 + value: 'nanjing',
  38 + label: '南京市'
  39 + },
  40 + {
  41 + value: 'chongqing',
  42 + label: '重庆市'
  43 + }
  44 + ],
  45 + model11: '',
  46 + model12: []
22 47 }
23 48 }
24 49 }
... ...