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

Merge remote-tracking branch 'upstream/master'

Browse source
This commit is contained in:
jingsam 2016-10-28 18:51:01 +08:00
commit 072cd25b16
10 changed files with 171 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/modal/confirm.js
View file

@ -1,7 +1,7 @@
import Vue from 'vue';
import Modal from './modal.vue';
import Icon from '../icon/icon.vue';
import Button from '../button/button.vue';
import iButton from '../button/button.vue';
import { camelcaseToHyphen } from '../../utils/assist';
const prefixCls = 'ivu-modal-confirm';
@ -26,8 +26,8 @@ Modal.newInstance = properties => {
{{{ body }}}
</div>
<div class="${prefixCls}-footer">
<Button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</Button>
<Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button>
<i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</div>
</div>
</Modal>
@ -36,7 +36,7 @@ Modal.newInstance = properties => {
const modal = new Vue({
el: div,
components: { Modal, Button, Icon },
components: { Modal, iButton, Icon },
data: Object.assign(_props, {
visible: false,
width: 416,

8
src/components/modal/modal.vue
View file

@ -12,8 +12,8 @@
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<Button type="ghost" size="large" @click="cancel">{{ cancelText }}</Button>
<Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button>
<i-button type="ghost" size="large" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</slot>
</div>
</div>
@ -22,13 +22,13 @@
</template>
<script>
import Icon from '../icon';
import Button from '../button';
import iButton from '../button/button.vue';
import { getScrollBarSize } from '../../utils/assist';
const prefixCls = 'ivu-modal';
export default {
components: { Icon, Button },
components: { Icon, iButton },
props: {
visible: {
type: Boolean,

8
src/components/page/page.vue
View file

@ -145,7 +145,7 @@
return [
`${prefixCls}-prev`,
{
[`${prefixCls}-disabled`]: this.current == 1
[`${prefixCls}-disabled`]: this.current === 1
}
]
},
@ -153,7 +153,7 @@
return [
`${prefixCls}-next`,
{
[`${prefixCls}-disabled`]: this.current == this.allPages
[`${prefixCls}-disabled`]: this.current === this.allPages
}
]
},
@ -161,7 +161,7 @@
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.current == 1
[`${prefixCls}-item-active`]: this.current === 1
}
]
},
@ -169,7 +169,7 @@
return [
`${prefixCls}-item`,
{
[`${prefixCls}-item-active`]: this.current == this.allPages
[`${prefixCls}-item-active`]: this.current === this.allPages
}
]
}

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

@ -37,7 +37,7 @@
</template>
<script>
import Popper from '../base/popper';
import Button from '../button/button.vue';
import iButton from '../button/button.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
@ -46,7 +46,7 @@
export default {
mixins: [Popper],
directives: { clickoutside },
components: { iButton: Button },
components: { iButton },
props: {
trigger: {
validator (value) {
@ -92,9 +92,9 @@
computed: {
classes () {
return [
prefixCls + '',
`${prefixCls}`,
{
[prefixCls + '-confirm']: this.confirm
[`${prefixCls}-confirm`]: this.confirm
}
]
},
@ -102,7 +102,7 @@
let style = {};
if (!!this.width) {
style.width = '${this.width}px';
style.width = `${this.width}px`;
}
return style;
}

16
src/components/select/select.vue
View file

@ -100,14 +100,14 @@
computed: {
classes () {
return [
prefixCls + '',
`${prefixCls}`,
{
[prefixCls + '-visible']: this.visible,
[prefixCls + '-disabled']: this.disabled,
[prefixCls + '-multiple']: this.multiple,
[prefixCls + '-single']: !this.multiple,
[prefixCls + '-show-clear']: this.showCloseIcon,
[prefixCls + '-${this.size}']: !!this.size
[`${prefixCls}-visible`]: this.visible,
[`${prefixCls}-disabled`]: this.disabled,
[`${prefixCls}-multiple`]: this.multiple,
[`${prefixCls}-single`]: !this.multiple,
[`${prefixCls}-show-clear`]: this.showCloseIcon,
[`${prefixCls}-${this.size}`]: !!this.size
}
]
},
@ -136,7 +136,7 @@
if (this.showPlaceholder) {
style.width = '100%';
} else {
style.width = '${this.inputLength}px';
style.width = `${this.inputLength}px`;
}
}

3
src/components/slider/index.js Normal file
View file

@ -0,0 +1,3 @@
import Slider from './slider.vue';
export default Slider;

116
src/components/slider/slider.vue Normal file
View file

@ -0,0 +1,116 @@
<template>
<div :class="classes">
<Input-number v-if="!range && showInput" :min="min" :max="max" :step="step" :value.sync="value" :disabled="disabled"></Input-number>
<div :class="[prefixCls + '-wrap']" @click="sliderClick">
<template v-if="showStops">
<div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }"></div>
</template>
<div :class="[prefixCls + '-bar']" :style="barStyle"></div>
<div :class="[prefixCls + '-button-wrap']" v-if="!range">
<Tooltip placement="top" :content="tipFormat(value)">
<div :class="[prefixCls + '-button']"></div>
</Tooltip>
</div>
</div>
</div>
</template>
<script>
import InputNumber from '../../components/input-number/input-number.vue';
import Tooltip from '../../components/tooltip/tooltip.vue';
const prefixCls = 'ivu-slider';
export default {
components: { InputNumber, Tooltip },
props: {
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
range: {
type: Boolean,
default: false
},
value: {
type: [Number, Array],
default: 0
},
disabled: {
type: Boolean,
default: false
},
showInput: {
type: Boolean,
default: false
},
showStops: {
type: Boolean,
default: false
},
tipFormat: {
type: Function,
default (val) {
return val;
}
}
},
data () {
return {
prefixCls: prefixCls
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-input`]: this.showInput,
[`${prefixCls}-range`]: this.range,
[`${prefixCls}-disabled`]: this.disabled
}
]
},
barStyle () {
let style;
if (this.range) {
style = {
width: (this.value[1] - this.value[0]) / (this.max - this.min) * 100 + '%',
left: (this.value[0] - this.min) / (this.max - this.min) * 100 + '%'
}
} else {
style = {
width: (this.value - this.min) / (this.max - this.min) * 100 + '%'
}
}
return style;
},
stops() {
return this.max / this.step;
}
},
methods: {
sliderClick () {
}
},
ready () {
if (this.range) {
const isArray = Array.isArray(this.value);
if (!isArray || (isArray && this.value.length != 2) || (isArray && (!isNaN(this.value[0]) || !isNaN(this.value[1])))) {
this.value = [0, 0];
}
}
}
}
</script>

12
src/components/tooltip/tooltip.vue
View file

@ -1,12 +1,12 @@
<template>
<div :class="[prefix]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
<div :class="[prefix + '-rel']" v-el:reference>
<div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
<div :class="[prefixCls + '-rel']" v-el:reference>
<slot></slot>
</div>
<div :class="[prefix + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
<div :class="[prefix + '-content']">
<div :class="[prefix + '-arrow']"></div>
<div :class="[prefix + '-inner']"><slot name="content">{{ content }}</slot></div>
<div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
<div :class="[prefixCls + '-content']">
<div :class="[prefixCls + '-arrow']"></div>
<div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
</div>
</div>
</div>

5
src/index.js
View file

@ -27,9 +27,11 @@ import Modal from './components/modal';
import { Select, Option, OptionGroup } from './components/select';
import Tooltip from './components/tooltip';
import Poptip from './components/poptip';
import Slider from './components/slider';
const iview = {
Button,
iButton: Button,
ButtonGroup: Button.Group,
Icon,
Input,
@ -67,7 +69,8 @@ const iview = {
iOption: Option,
iOptionGroup: OptionGroup,
Tooltip,
Poptip
Poptip,
Slider
};
module.exports = iview;

38
test/routers/tag.vue
View file

@ -1,29 +1,25 @@
<style>
body{
padding: 50px;
}
</style>
<template>
<Collapse active-key="1">
<Panel key="1">
史蒂夫·乔布斯
<p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
</Panel>
<Panel key="2">
斯蒂夫·盖瑞·沃兹尼亚克
<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
</Panel>
<Panel key="3">
乔纳森·伊夫
<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
</Panel>
</Collapse>
<Input-number :max="10" :min="1" :value="1" @on-change="change"></Input-number>
<Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
<Slider :value="10" :tip-format="format">
</Slider>
</template>
<script>
import { Collapse, InputNumber } from 'iview';
const Panel = Collapse.Panel;
import { Slider } from 'iview';
export default {
components: { Collapse, Panel, InputNumber },
components: { Slider },
data () {
return {
}
},
methods: {
change (data) {
console.log(data);
format (val) {
return `进度：${val}%`
}
}
}