drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Conflicts:
	src/styles/components/index.less
	test/app.vue
	test/main.js
This commit is contained in:
Rijn 2017-01-17 17:31:51 -06:00
commit 50f4ac7088
27 changed files with 463 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/iview.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 162 KiB

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.9.15",
"version": "0.9.16",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

2
src/components/carousel/carousel-item.vue
View file

@ -21,7 +21,7 @@
width: `${this.width}px`,
height: `${this.height}`,
left: `${this.left}px`
}
};
}
},
compiled () {

14
src/components/carousel/carousel.vue
View file

@ -24,12 +24,13 @@
</template>
<script>
import Icon from '../icon/icon.vue';
import { oneOf, getStyle, deepCopy, getScrollBarSize } from '../../utils/assist';
import { getStyle } from '../../utils/assist';
const prefixCls = 'ivu-carousel';
export default {
name: 'Carousel',
components: { Icon },
props: {
arrow: {
type: String,
@ -74,7 +75,7 @@
slideInstances: [],
timer: null,
ready: false
}
};
},
computed: {
classes () {
@ -93,13 +94,13 @@
return [
`${prefixCls}-arrow`,
`${prefixCls}-arrow-${this.arrow}`
]
];
},
dotsClasses () {
return [
`${prefixCls}-dots`,
`${prefixCls}-dots-${this.dots}`
]
];
}
},
methods: {
@ -127,7 +128,7 @@
});
}
},
updateSlides (init, slot = false) {
updateSlides (init ) {
let slides = [];
let index = 1;
@ -173,12 +174,10 @@
index += offset;
while (index < 0) index += this.slides.length;
index = index % this.slides.length;
this.$emit('on-change', this.currentIndex, index);
this.currentIndex = index;
},
dotsEvent (event, n) {
if (event === this.trigger && this.currentIndex !== n) {
this.$emit('on-change', this.currentIndex, n);
this.currentIndex = n;
}
},
@ -208,6 +207,7 @@
this.setAutoplay();
},
currentIndex (val, oldVal) {
this.$emit('on-change', oldVal, val);
this.updateOffset();
},
height () {

6
src/components/form/form-item.vue
View file

@ -3,7 +3,7 @@
<label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
<div :class="[prefixCls + '-content']" :style="contentStyles">
<slot></slot>
<div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error'">{{ validateMessage }}</div>
<div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error' && showMessage && form.showMessage">{{ validateMessage }}</div>
</div>
</div>
</template>
@ -61,6 +61,10 @@
},
validateStatus: {
type: Boolean
},
showMessage: {
type: Boolean,
default: true
}
},
data () {

4
src/components/form/form.vue
View file

@ -28,6 +28,10 @@
inline: {
type: Boolean,
default: false
},
showMessage: {
type: Boolean,
default: true
}
},
data () {

44
src/components/input-number/input-number.vue
View file

@ -144,32 +144,52 @@
preventDefault (e) {
e.preventDefault();
},
up () {
if (this.upDisabled) {
up (e) {
const targetVal = Number(e.target.value);
if (this.upDisabled && isNaN(targetVal)) {
return false;
}
this.changeStep('up');
this.changeStep('up', e);
},
down () {
if (this.downDisabled) {
down (e) {
const targetVal = Number(e.target.value);
if (this.downDisabled && isNaN(targetVal)) {
return false;
}
this.changeStep('down');
this.changeStep('down', e);
},
changeStep (type) {
changeStep (type, e) {
if (this.disabled) {
return false;
}
const targetVal = Number(e.target.value);
let val = Number(this.value);
const step = Number(this.step);
if (isNaN(val)) {
return false;
}
if (type == 'up') {
// input a number, and key up or down
if (!isNaN(targetVal)) {
if (type === 'up') {
if (addNum(targetVal, step) <= this.max) {
val = targetVal;
} else {
return false;
}
} else if (type === 'down') {
if (addNum(targetVal, -step) >= this.min) {
val = targetVal;
} else {
return false;
}
}
}
if (type === 'up') {
val = addNum(val, step);
} else if (type == 'down') {
} else if (type === 'down') {
val = addNum(val, -step);
}
this.setValue(val);
@ -190,10 +210,10 @@
keyDown (e) {
if (e.keyCode === 38) {
e.preventDefault();
this.up();
this.up(e);
} else if (e.keyCode === 40) {
e.preventDefault();
this.down();
this.down(e);
}
},
change (event) {
@ -230,7 +250,7 @@
}
}
},
ready () {
compiled () {
this.changeVal(this.value);
},
watch: {

21
src/components/menu/submenu.vue
View file

@ -5,12 +5,20 @@
<Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
</div>
<ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
<Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
<Drop
v-else
v-show="opened"
placement="bottom"
transition="slide-up"
v-ref:drop
:style="dropStyle"><slot></slot></Drop>
</li>
</template>
<script>
import Drop from '../select/dropdown.vue';
import Icon from '../icon/icon.vue';
import { getStyle } from '../../utils/assist';
const prefixCls = 'ivu-menu';
export default {
@ -30,7 +38,8 @@
return {
prefixCls: prefixCls,
active: false,
opened: false
opened: false,
dropWidth: parseFloat(getStyle(this.$el, 'width'))
};
},
computed: {
@ -49,6 +58,12 @@
},
accordion () {
return this.$parent.accordion;
},
dropStyle () {
let style = {};
if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
return style;
}
},
methods: {
@ -94,6 +109,8 @@
opened (val) {
if (this.mode === 'vertical') return;
if (val) {
// set drop a width to fixed when menu has fixed position
this.dropWidth = parseFloat(getStyle(this.$el, 'width'));
this.$refs.drop.update();
} else {
this.$refs.drop.destroy();

46
src/components/poptip/poptip.vue
View file

@ -8,8 +8,8 @@
:class="[prefixCls + '-rel']"
v-el:reference
@click="handleClick"
@mousedown="handleFocus"
@mouseup="handleBlur">
@mousedown="handleFocus(false)"
@mouseup="handleBlur(false)">
<slot></slot>
</div>
<div :class="[prefixCls + '-popper']" :style="styles" transition="fade" v-el:popper v-show="visible">
@ -91,7 +91,8 @@
data () {
return {
prefixCls: prefixCls,
showTitle: true
showTitle: true,
isInput: false
};
},
computed: {
@ -133,14 +134,14 @@
}
this.visible = false;
},
handleFocus () {
if (this.trigger !== 'focus' || this.confirm) {
handleFocus (fromInput = true) {
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = true;
},
handleBlur () {
if (this.trigger !== 'focus' || this.confirm) {
handleBlur (fromInput = true) {
if (this.trigger !== 'focus' || this.confirm || (this.isInput && !fromInput)) {
return false;
}
this.visible = false;
@ -164,12 +165,41 @@
ok () {
this.visible = false;
this.$emit('on-ok');
},
getInputChildren () {
const $input = this.$els.reference.querySelectorAll('input');
const $textarea = this.$els.reference.querySelectorAll('textarea');
let $children = null;
if ($input.length) {
$children = $input[0];
} else if ($textarea.length) {
$children = $textarea[0];
}
return $children;
}
},
ready () {
compiled () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
// if trigger and children is input or textarea,listen focus & blur event
if (this.trigger === 'focus') {
const $children = this.getInputChildren();
if ($children) {
$children.addEventListener('focus', this.handleFocus, false);
$children.addEventListener('blur', this.handleBlur, false);
this.isInput = true;
}
}
},
beforeDestroy () {
const $children = this.getInputChildren();
if ($children) {
$children.removeEventListener('focus', this.handleFocus, false);
$children.removeEventListener('blur', this.handleBlur, false);
}
}
};
</script>

2
src/components/rate/index.js Normal file
View file

@ -0,0 +1,2 @@
import Rate from './rate.vue';
export default Rate;

127
src/components/rate/rate.vue Normal file
View file

@ -0,0 +1,127 @@
<template>
<div :class="classes" @mouseleave="handleMouseleave">
<div
v-for="item in count"
:class="starCls(item)"
@mousemove="handleMousemove(item, $event)"
@click="handleClick(item)">
<span :class="[prefixCls + '-star-content']" type="half"></span>
</div>
<div :class="[prefixCls + '-text']" v-if="showText" v-show="value > 0">
<slot>{{ value }} <template v-if="value <= 1">{{ t('i.rate.star') }}</template><template v-else>{{ t('i.rate.stars') }}</template></slot>
</div>
</div>
</template>
<script>
import Locale from '../../mixins/locale';
const prefixCls = 'ivu-rate';
export default {
mixins: [ Locale ],
props: {
count: {
type: Number,
default: 5
},
value: {
type: Number,
default: 0
},
allowHalf: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
},
showText: {
type: Boolean,
default: false
}
},
data () {
return {
prefixCls: prefixCls,
hoverIndex: -1,
isHover: false,
isHalf: false
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled
}
];
}
},
watch: {
value: {
immediate: true,
handler (val) {
this.setHalf(val);
}
}
},
methods: {
starCls (value) {
const hoverIndex = this.hoverIndex;
const currentIndex = this.isHover ? hoverIndex : this.value;
let full = false;
let isLast = false;
if (currentIndex > value) full = true;
if (this.isHover) {
isLast = currentIndex === value + 1;
} else {
isLast = Math.ceil(this.value) === value + 1;
}
return [
`${prefixCls}-star`,
{
[`${prefixCls}-star-full`]: (!isLast && full) || (isLast && !this.isHalf),
[`${prefixCls}-star-half`]: isLast && this.isHalf,
[`${prefixCls}-star-zero`]: !full
}
];
},
handleMousemove(value, event) {
if (this.disabled) return;
this.isHover = true;
if (this.allowHalf) {
const type = event.target.getAttribute('type') || false;
this.isHalf = type === 'half';
} else {
this.isHalf = false;
}
this.hoverIndex = value + 1;
},
handleMouseleave () {
if (this.disabled) return;
this.isHover = false;
this.setHalf(this.value);
this.hoverIndex = -1;
},
setHalf (val) {
this.isHalf = val.toString().indexOf('.') >= 0;
},
handleClick (value) {
if (this.disabled) return;
value++;
if (this.isHalf) value -= 0.5;
this.value = value;
this.$emit('on-change', value);
this.$dispatch('on-form-change', value);
}
}
};
</script>

3
src/components/select/option.vue
View file

@ -55,7 +55,8 @@
this.isFocus = false;
},
queryChange (val) {
this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
}
},
compiled () {

2
src/index.js
View file

@ -28,6 +28,7 @@ import Page from './components/page';
import Poptip from './components/poptip';
import Progress from './components/progress';
import Radio from './components/radio';
import Rate from './components/rate';
import Slider from './components/slider';
import Spin from './components/spin';
import Steps from './components/steps';
@ -86,6 +87,7 @@ const iview = {
Progress,
Radio,
RadioGroup: Radio.Group,
Rate,
Row,
iSelect: Select,
Slider,

4
src/locale/lang/en-US.js
View file

@ -83,6 +83,10 @@ export default {
page: '/page',
goto: 'Goto',
p: ''
},
rate: {
star: 'Star',
stars: 'Stars'
}
}
};

4
src/locale/lang/zh-CN.js
View file

@ -83,6 +83,10 @@ export default {
page: '条/页',
goto: '跳至',
p: '页'
},
rate: {
star: '星',
stars: '星'
}
}
};

4
src/locale/lang/zh-TW.js
View file

@ -83,6 +83,10 @@ export default {
page: '條/頁',
goto: '跳至',
p: '頁'
},
rate: {
star: '星',
stars: '星'
}
}
};

3
src/styles/components/index.less
View file

@ -35,4 +35,5 @@
@import "date-picker";
@import "time-picker";
@import "form";
@import "carousel";
@import "carousel";
@import "rate";

72
src/styles/components/rate.less Normal file
View file

@ -0,0 +1,72 @@
@rate-prefix-cls: ~"@{css-prefix}rate";
.@{rate-prefix-cls} {
display: inline-block;
margin: 0;
padding: 0;
font-size: 20px;
vertical-align: middle;
font-weight: normal;
font-style: normal;
&-disabled &-star {
&:before,
&-content:before {
cursor: default;
}
&:hover {
transform: scale(1);
}
}
&-star {
display: inline-block;
margin: 0;
padding: 0;
margin-right: 8px;
position: relative;
font-family: 'Ionicons';
transition: all 0.3s ease;
&:hover {
transform: scale(1.1);
}
&:before,
&-content:before {
color: #e9e9e9;
cursor: pointer;
content: "\F4B3";
transition: all @transition-time @ease-in-out;
display: block;
}
&-content {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
&:before {
color: transparent;
}
}
&-half &-content:before,
&-full:before {
color: @rate-star-color;
}
&-half:hover &-content:before,
&-full:hover:before {
color: tint(@rate-star-color, 20%);
}
}
&-text {
margin-left: 8px;
vertical-align: middle;
display: inline-block;
font-size: @font-size-small;
}
}

1
src/styles/themes/default/custom.less
View file

@ -14,6 +14,7 @@
@selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff;
@subsidiary-color : #9ea7b4;
@rate-star-color : #f5a623;
// Base
@body-background : #fff;

1
test/app.vue
View file

@ -48,6 +48,7 @@ li + li {
<li><a v-link="'/date'">Date</a></li>
<li><a v-link="'/form'">Form</a></li>
<li><a v-link="'/carousel'">Carousel</a></li>
<li><a v-link="'/rate'">Rate</a></li>
</ul>
</nav>
<router-view></router-view>

8
test/main.js
View file

@ -6,9 +6,10 @@ import VueRouter from 'vue-router';
import App from './app.vue';
import iView from '../src/index';
// import locale from '../src/locale/lang/en-US';
import locale from '../src/locale/lang/zh-CN';
Vue.use(VueRouter);
Vue.use(iView);
Vue.use(iView, { locale });
// 开启debug模式
Vue.config.debug = true;
@ -139,6 +140,11 @@ router.map({
require(['./routers/carousel.vue'], resolve);
}
},
'/rate': {
component: function (resolve) {
require(['./routers/rate.vue'], resolve);
}
},
});
router.beforeEach(function () {

2
test/routers/form.vue
View file

@ -5,7 +5,7 @@
<Icon type="ios-person-outline" slot="prepend"></Icon>
</i-input>
</Form-item>
<Form-item prop="password">
<Form-item prop="password" :show-message="false">
<i-input type="password" :value.sync="formInline.password" placeholder="Password">
<Icon type="ios-locked-outline" slot="prepend"></Icon>
</i-input>

2
test/routers/input.vue
View file

@ -1,4 +1,6 @@
<template>
<Input-number :max="10" :min="1" :value="1"></Input-number>
<br><br>
<i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
<i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
<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>

71
test/routers/menu.vue
View file

@ -1,28 +1,51 @@
<template>
<Menu mode="horizontal" theme="primary" active-key="1">
<Submenu key="1">
<template slot="title">
<Icon type="soup-can-outline"></Icon>
数据管理
</template>
<Menu-group title="使用">
<Menu-item key="1-1">新增和启动新增和启动</Menu-item>
<Menu-item key="1-2">活跃分析</Menu-item>
<Menu-item key="1-3">时段分析</Menu-item>
</Menu-group>
<Menu-group title="留存">
<Menu-item key="1-4">用户留存</Menu-item>
<Menu-item key="1-5">流失用户</Menu-item>
</Menu-group>
</Submenu>
</Menu>
<br>
<p>切换主题</p>
<Radio-group :model.sync="theme1">
<Radio value="light"></Radio>
<Radio value="dark"></Radio>
<Radio value="primary"></Radio>
</Radio-group>
<div style="margin: 50px;position:relative;top: 0;left: 0;">
<Menu mode="horizontal" :theme="theme1" active-key="1">
<Menu-item key="1">
<Icon type="ios-paper"></Icon>
内容管理
</Menu-item>
<Menu-item key="2">
<Icon type="ios-people"></Icon>
用户管理
</Menu-item>
<Menu-item key="1">
<Icon type="ios-paper"></Icon>
内容管理
</Menu-item>
<Menu-item key="2">
<Icon type="ios-people"></Icon>
用户管理
</Menu-item>
<Menu-item key="1">
<Icon type="ios-paper"></Icon>
内容管理
</Menu-item>
<Menu-item key="2">
<Icon type="ios-people"></Icon>
用户管理
</Menu-item>
<Submenu key="3">
<template slot="title">
<Icon type="stats-bars"></Icon>
统计分析
</template>
<Menu-group title="使用">
<Menu-item key="3-1">新增和新</Menu-item>
<Menu-item key="3-2">活跃分析</Menu-item>
<Menu-item key="3-3">时段分析</Menu-item>
</Menu-group>
<Menu-group title="留存">
<Menu-item key="3-4">用户留存</Menu-item>
<Menu-item key="3-5">流失用户</Menu-item>
</Menu-group>
</Submenu>
<Menu-item key="4">
<Icon type="settings"></Icon>
综合设置
</Menu-item>
</Menu>
</div>
</template>
<script>
export default {

187
test/routers/poptip.vue
View file

@ -1,183 +1,22 @@
<style>
.tooltip_out{
padding: 150px;
}
body{
height: 1000px;
padding: 10px;
}
.api table{
font-family: Consolas,Menlo,Courier,monospace;
font-size: 13px;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 100%;
margin-bottom: 24px;
}
.api table th{
background: #f7f7f7;
white-space: nowrap;
color: #5c6b77;
font-weight: 600;
}
.api table td, .api table th{
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.tip{
width: 24px;
position: fixed;
top: 10px;
right: 10px;
}
.tip-inner{
width: 24px;
height: 24px;
line-height: 22px;
text-align: center;
background: #fff;
border: 1px solid #3399ff;
color: #3399ff;
border-radius: 50%;
cursor: pointer;
}
.tip-content{
width: 200px;
height: 100px;
white-space: normal;
}
</style>
<template>
<Tooltip content="这里是提示文字">
当鼠标经过这段文字时，会显示一个气泡框
</Tooltip>
<div class="tooltip_out">
<!--<Tooltip placement="top" content="Tooltip 文字提示">-->
<!--<strong>-->
<!--<a>Link</a>-->
<!--</strong>-->
<!--</Tooltip>-->
<!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
<!--<i-button>hover 激活</i-button>-->
<!--</Poptip>-->
<!--<Poptip content="提示内容" title="tip">-->
<!--<i-button>click 激活</i-button>-->
<!--</Poptip>-->
<!--<Poptip content="提示内容">-->
<!--<div slot="title"><i>自定义标题</i></div>-->
<!--<i-button>click 激活</i-button>-->
<!--</Poptip>-->
<!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
<!--<div class="tip-inner">-->
<!--<Icon type="information"></Icon>-->
<!--</div>-->
<!--<div class="tip-content" slot="content">-->
<!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
<!--</div>-->
<!--</Tooltip>-->
<!--<Poptip>-->
<!--<a>click 激活</a>-->
<!--<div slot="title"><i>自定义标题</i></div>-->
<!--<div slot="content">-->
<!--<a>关闭提示框</a>-->
<!--</div>-->
<!--</Poptip>-->
<!--<Poptip placement="right" width="300">-->
<!--<i-button type="ghost">click 激活</i-button>-->
<!--<div class="api" slot="content">-->
<!--<table>-->
<!--<thead>-->
<!--<tr>-->
<!--<th>属性</th>-->
<!--<th>说明</th>-->
<!--<th>类型</th>-->
<!--<th>默认值</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr>-->
<!--<td>content</td>-->
<!--<td>显示的内容</td>-->
<!--<td>String | Number</td>-->
<!--<td>空</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>placement</td>-->
<!--<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>-->
<!--<td>String</td>-->
<!--<td>bottom</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>disabled</td>-->
<!--<td>是否禁用提示框</td>-->
<!--<td>Boolean</td>-->
<!--<td>false</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>delay</td>-->
<!--<td>延迟显示，单位毫秒</td>-->
<!--<td>Number</td>-->
<!--<td>0</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</div>-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容">-->
<!--<Button>click 触发</Button>-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容" trigger="hover">-->
<!--<Button>hover 触发</Button>-->
<!--</Poptip>-->
<Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel" @on-popper-hide="hide">
<a><strong>Delete</strong></a>
<div style="margin: 100px">
<Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
<i-button>hover 激活</i-button>
</Poptip>
<Poptip title="提示标题" placement="bottom" content="提示内容">
<i-button>click 激活</i-button>
</Poptip>
<Poptip trigger="focus" title="提示标题" content="提示内容">
<i-input type="textarea"></i-input>
<!--<i-button>focus 激活</i-button>-->
</Poptip>
<Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
<i-input></i-input>
</Poptip>
<!--<Poptip title="标题" content="内容" trigger="focus">-->
<!--<input type="text">-->
<!--</Poptip>-->
<!--<Poptip title="标题" content="内容" trigger="focus">-->
<!--<Button>focus 触发</Button>-->
<!--</Poptip>-->
<!--<Tooltip content="这里是提示文字">-->
<!--当鼠标经过这段文字时，会显示一个气泡框-->
<!--</Tooltip>-->
<!--<Poptip>-->
<!--<a>click 激活</a>-->
<!--<div slot="content">-->
<!--<a>关闭提示框</a>-->
<!--</div>-->
<!--</Poptip>-->
</div>
</template>
<script>
import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
export default {
components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
props: {
},
data () {
return {
}
},
computed: {
},
methods: {
ok () {
Message.info('ok');
},
cancel () {
Message.info('cancel');
},
hide () {
Message.info('hide')
}
}
}
</script>

25
test/routers/rate.vue Normal file
View file

@ -0,0 +1,25 @@
<template>
<Row>
<i-col span="12">
<Rate show-text :value.sync="valueText"></Rate>
</i-col>
<i-col span="12">
<Rate show-text :value.sync="valueCustomText">
<span style="color: #f5a623">{{ valueCustomText }}</span>
</Rate>
</i-col>
</Row>
</template>
<script>
export default {
props: {},
data () {
return {
valueText: 3,
valueCustomText: 3.8
};
},
computed: {},
methods: {}
};
</script>

55
test/routers/select.vue
View file

@ -1,24 +1,49 @@
<template>
<i-select :model.sync="model9" style="width:200px">
<i-option value="beijing" label="北京市">
<span>北京</span>
<span style="float:right;color:#ccc">Beiing</span>
</i-option>
<i-option value="shanghai" label="上海市">
<span>上海</span>
<span style="float:right;color:#ccc">ShangHai</span>
</i-option>
<i-option value="shenzhen" label="深圳市">
<span>深圳</span>
<span style="float:right;color:#ccc">ShenZhen</span>
</i-option>
</i-select>
<Row>
<i-col span="12" style="padding-right:10px">
<i-select :model.sync="model11" filterable>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
</i-col>
<i-col span="12">
<i-select :model.sync="model12" filterable multiple>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
</i-col>
</Row>
</template>
<script>
export default {
data () {
return {
model9: 'shanghai'
cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
{
value: 'hangzhou',
label: '杭州市'
},
{
value: 'nanjing',
label: '南京市'
},
{
value: 'chongqing',
label: '重庆市'
}
],
model11: '',
model12: []
}
}
}