drip-public/iview
5
0
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-11-10 14:51:50 +08:00
commit 1722d7d30d
73 changed files with 2234 additions and 843 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitattributes vendored Normal file
View file

@ -0,0 +1,2 @@
src/styles/**/* linguist-vendored=false
dist/styles/* linguist-vendored=false

3
README.md
View file

@ -43,8 +43,7 @@ npm install iview --save
```js
module: {
loaders: [
{ test: /iview\/.*?js$/, loader: 'babel' },// for Mac
{ test: /iview\\.*?js$/, loader: 'babel' },// for Windows
{ test: /iview.src.*?js$/, loader: 'babel' },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}

BIN
assets/iview.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 150 KiB

After

Width:  |  Height:  |  Size: 160 KiB

2
dist/styles/article.css
View file

@ -1 +1 @@
.ivu-article h1{font-size:28px}.ivu-article h2{font-size:22px}.ivu-article h3{font-size:18px}.ivu-article h4{font-size:14px}.ivu-article h5,.ivu-article h6{font-size:12px}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px}
.ivu-article h1{font-size:26px;font-weight:400}.ivu-article h2{font-size:20px;font-weight:400}.ivu-article h3{font-size:16px;font-weight:400}.ivu-article h4{font-size:14px;font-weight:400}.ivu-article h5,.ivu-article h6{font-size:12px;font-weight:400}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px;font-size:14px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px;font-size:14px}

2
dist/styles/iview.all.css
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css
View file

File diff suppressed because one or more lines are too long

3
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.9.7-rc-1",
"version": "0.9.7",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",
@ -57,6 +57,7 @@
"less-loader": "^2.2.3",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^1.0.26",
"vue-hot-reload-api": "^1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.3",

13
src/components/base/notification/notice.vue
View file

@ -47,6 +47,11 @@
type: String
}
},
data () {
return {
withDesc: false
}
},
computed: {
baseClass () {
return `${this.prefixCls}-notice`;
@ -56,7 +61,8 @@
this.baseClass,
{
[`${this.className}`]: !!this.className,
[`${this.baseClass}-closable`]: this.closable
[`${this.baseClass}-closable`]: this.closable,
[`${this.baseClass}-with-desc`]: this.withDesc
}
]
},
@ -85,6 +91,11 @@
this.close();
}, this.duration * 1000)
}
// check if with desc in Notice component
if (this.prefixCls === 'ivu-notice') {
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
}
},
beforeDestroy () {
this.clearCloseTimer();

8
src/components/button/button-group.vue
View file

@ -15,13 +15,19 @@
return oneOf(value, ['small', 'large']);
}
},
shape: {
validator (value) {
return oneOf(value, ['circle', 'circle-outline']);
}
}
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-${this.shape}`]: !!this.shape
}
]
}

15
src/components/button/button.vue
View file

@ -2,7 +2,7 @@
<button :type="htmlType" :class="classes" :disabled="disabled">
<i :class="loadingIconClasses" v-if="loading"></i>
<i :class="typeIconClasses" v-if="icon && !loading"></i>
<slot></slot>
<span v-if="showSlot" v-el:slot><slot></slot></span>
</button>
</template>
<script>
@ -17,7 +17,7 @@
props: {
type: {
validator (value) {
return oneOf(value, ['primary', 'ghost']);
return oneOf(value, ['primary', 'ghost', 'dashed', 'text']);
}
},
shape: {
@ -40,6 +40,11 @@
},
icon: String
},
data () {
return {
showSlot: true
}
},
computed: {
classes () {
return [
@ -48,7 +53,8 @@
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading
[`${prefixCls}-loading`]: this.loading != null && this.loading,
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
}
]
},
@ -63,6 +69,9 @@
}
]
}
},
ready () {
this.showSlot = this.$els.slot.innerHTML !== '';
}
}
</script>

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

@ -18,7 +18,7 @@
v-model="checked"
@change="change">
</span>
<slot><span>{{ value }}</span></slot>
<slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
</label>
</template>
<script>
@ -42,7 +42,8 @@
return {
model: [],
selected: false,
group: false
group: false,
showSlot: true
}
},
computed: {
@ -75,6 +76,9 @@
ready () {
if (!this.group) {
this.updateModel();
if (this.$els.slot && this.$els.slot.innerHTML === '') {
this.showSlot = false;
}
}
},
methods: {

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

@ -18,7 +18,7 @@
<input
:class="inputClasses"
:disabled="disabled"
autoComplete="off"
autocomplete="off"
@focus="focus"
@blur="blur"
@keydown.stop="keyDown"
@ -239,4 +239,4 @@
}
}
}
</script>
</script>

125
src/components/input/input.vue
View file

@ -1,20 +1,44 @@
<template>
<input
:class="classes"
:type="type"
:placeholder="placeholder"
:name="name"
v-model="value">
<div :class="wrapClasses">
<template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-el:prepend><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
<input
type="text"
:class="inputClasses"
:placeholder="placeholder"
:disabled="disabled"
:maxlength="maxlength"
v-model="value"
@keyup.enter="handleEnter">
<div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
</template>
<textarea
v-else
v-el:textarea
:class="textareaClasses"
:style="textareaStyles"
:placeholder="placeholder"
:disabled="disabled"
:rows="rows"
:maxlength="maxlength"
v-model="value"
@keyup.enter="handleEnter">
</textarea>
</div>
</template>
<script>
import { oneOf } from '../../utils/assist';
import calcTextareaHeight from '../../utils/calcTextareaHeight';
const prefixCls = 'ivu-input';
export default {
props: {
type: {
type: String,
validator (value) {
return oneOf(value, ['text', 'textarea']);
},
default: 'text'
},
value: {
@ -22,28 +46,105 @@
default: '',
twoWay: true
},
placeholder: String,
name: String,
size: {
validator (value) {
return oneOf(value, ['small', 'large']);
}
},
placeholder: {
type: String,
default: ''
},
maxlength: {
type: Number
},
disabled: {
type: Boolean,
default: false
},
icon: String,
autosize: {
type: [Boolean, Object],
default: false
},
rows: {
type: Number,
default: 2
}
},
data () {
return {
prefixCls: prefixCls,
prepend: true,
append: true,
textareaStyles: {}
}
},
computed: {
classes () {
wrapClasses () {
return [
`${prefixCls}-wrapper`,
{
[`${prefixCls}-type`]: this.type,
[`${prefixCls}-group`]: this.prepend || this.append,
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
}
]
},
inputClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.size}`]: !!this.size
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-disabled`]: this.disabled
}
]
},
textareaClasses () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled
}
]
}
},
methods: {
handleEnter () {
this.$emit('on-enter');
},
handleIconClick () {
this.$emit('on-click');
},
resizeTextarea () {
const autosize = this.autosize;
if (!autosize || this.type !== 'textarea') {
return false;
}
const minRows = autosize.minRows;
const maxRows = autosize.maxRows;
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
}
},
watch: {
value (val) {
this.$nextTick(() => {
this.resizeTextarea();
});
this.$emit('on-change', val);
}
},
ready () {
if (this.type === 'text') {
this.prepend = this.$els.prepend.innerHTML !== '';
this.append = this.$els.append.innerHTML !== '';
} else {
this.prepend = false;
this.append = false;
}
this.resizeTextarea();
}
}
</script>

18
src/components/layout/col.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes">
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
@ -17,6 +17,11 @@
pull: [Number, String],
className: String
},
data () {
return {
gutter: 0
}
},
computed: {
classes () {
return [
@ -30,6 +35,17 @@
[`${this.className}`]: !!this.className
}
]
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
paddingLeft: this.gutter / 2 + 'px',
paddingRight: this.gutter / 2 + 'px'
}
}
return style;
}
}
}

34
src/components/layout/row.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="classes">
<div :class="classes" :style="styles">
<slot></slot>
</div>
</template>
@ -25,6 +25,10 @@
return oneOf(value, ['start', 'end', 'center', 'space-around', 'space-between']);
}
},
gutter: {
type: Number,
default: 0
},
className: String
},
computed: {
@ -38,7 +42,35 @@
[`${this.className}`]: !!this.className
}
]
},
styles () {
let style = {};
if (this.gutter !== 0) {
style = {
marginLeft: this.gutter / -2 + 'px',
marginRight: this.gutter / -2 + 'px'
}
}
return style;
}
},
methods: {
updateGutter (val) {
this.$children.forEach((child) => {
if (val !== 0) {
child.gutter = val;
}
});
}
},
watch: {
gutter (val) {
this.updateGutter(val);
}
},
ready () {
this.updateGutter(this.gutter);
}
}
</script>

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

@ -8,7 +8,7 @@
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
@ -175,7 +175,7 @@
let showHead = true;
if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
showHead = false;
}
@ -199,6 +199,11 @@
this.wrapShow = true;
this.addScrollEffect();
}
},
loading (val) {
if (!val) {
this.buttonLoading = false;
}
}
}
}

6
src/components/notice/index.js
View file

@ -42,9 +42,11 @@ function notice (type, options) {
let content;
const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
if (type == 'normal') {
content = `
<div class="${prefixCls}-custom-content">
<div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
<div class="${prefixCls}-title">${title}</div>
<div class="${prefixCls}-desc">${desc}</div>
</div>
@ -52,7 +54,7 @@ function notice (type, options) {
} else {
const iconType = iconTypes[type];
content = `
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
</span>

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

@ -26,9 +26,9 @@
</div>
</div>
<div :class="[prefixCls + '-inner']" v-if="!confirm">
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']">
<div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
</div>
</div>
</div>
@ -163,7 +163,7 @@
},
ready () {
if (!this.confirm) {
this.showTitle = this.$els.title.innerHTML != '';
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
}
}
}

3
src/components/radio/radio.vue
View file

@ -8,8 +8,7 @@
:disabled="disabled"
:checked="selected"
@change="change">
</span>
<slot>{{ value }}</slot>
</span><slot>{{ value }}</slot>
</label>
</template>
<script>

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

@ -22,7 +22,8 @@
gpuAcceleration: false,
placement: 'bottom-start',
boundariesPadding: 0,
forceAbsolute: true
forceAbsolute: true,
boundariesElement: 'body'
});
this.popper.onCreate(popper => {
this.resetTransformOrigin(popper);

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

@ -26,7 +26,7 @@
</div>
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
<ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
<ul v-else :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
<ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
</Dropdown>
</div>
</template>
@ -34,7 +34,7 @@
import Icon from '../icon';
import Dropdown from './dropdown.vue';
import clickoutside from '../../directives/clickoutside';
import { oneOf } from '../../utils/assist';
import { oneOf, MutationObserver } from '../../utils/assist';
const prefixCls = 'ivu-select';
@ -94,7 +94,8 @@
focusIndex: 0,
query: '',
inputLength: 20,
notFound: false
notFound: false,
slotChangeDuration: false // if slot change duration and in multiple, set true and after slot change, set false
}
},
computed: {
@ -180,7 +181,7 @@
});
}
},
updateOptions (init) {
updateOptions (init, slot = false) {
let options = [];
let index = 1;
@ -199,20 +200,28 @@
this.options = options;
if (init) {
this.updateSingleSelected(true);
this.updateMultipleSelected(true);
this.updateSingleSelected(true, slot);
this.updateMultipleSelected(true, slot);
}
},
updateSingleSelected (init = false) {
updateSingleSelected (init = false, slot = false) {
const type = typeof this.model;
if (type === 'string' || type === 'number') {
let findModel = false;
for (let i = 0; i < this.options.length; i++) {
if (this.model === this.options[i].value) {
this.selectedSingle = this.options[i].label;
findModel = true;
break;
}
}
if (slot && !findModel) {
this.model = '';
this.query = '';
}
}
this.toggleSingleSelected(this.model, init);
@ -229,7 +238,7 @@
}
}
},
updateMultipleSelected (init = false) {
updateMultipleSelected (init = false, slot = false) {
if (this.multiple && Array.isArray(this.model)) {
let selected = [];
@ -249,8 +258,22 @@
}
this.selectedMultiple = selected;
}
if (slot) {
let selectedModel = [];
for (let i = 0; i < selected.length; i++) {
selectedModel.push(selected[i].value);
}
// if slot change and remove a selected option, emit user
if (this.model.length === selectedModel.length) {
this.slotChangeDuration = true;
}
this.model = selectedModel;
}
}
this.toggleMultipleSelected(this.model, init);
},
removeTag (index) {
@ -431,19 +454,46 @@
if (this.multiple && this.model.length && this.query === '') {
this.removeTag(this.model.length - 1);
}
},
// use when slot changed
slotChange () {
this.options = [];
this.optionInstances = [];
}
},
ready () {
this.updateOptions(true);
document.addEventListener('keydown', this.handleKeydown);
// watch slot changed
if (MutationObserver) {
this.observer = new MutationObserver(() => {
this.slotChange();
this.updateOptions(true, true);
});
this.observer.observe(this.$els.options, {
// attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
},
beforeDestroy () {
document.removeEventListener('keydown', this.handleKeydown);
if (this.observer) {
this.observer.disconnect();
}
},
watch: {
model () {
if (this.multiple) {
this.updateMultipleSelected();
if (this.slotChangeDuration) {
this.slotChangeDuration = false;
} else {
this.updateMultipleSelected();
}
} else {
this.updateSingleSelected();
}

2
src/components/switch/switch.vue
View file

@ -23,7 +23,7 @@
},
size: {
validator (value) {
return oneOf(value, ['small']);
return oneOf(value, ['large', 'small']);
}
}
},

18
src/components/tag/tag.vue
View file

@ -1,7 +1,6 @@
<template>
<div v-if="!closed" :class="classes" transition="fade">
<span :class="textClasses"><slot></slot></span>
<Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
<span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click="close"></Icon>
</div>
</template>
<script>
@ -21,6 +20,11 @@
validator (value) {
return oneOf(value, ['blue', 'green', 'red', 'yellow']);
}
},
type: {
validator (value) {
return oneOf(value, ['border', 'dot']);
}
}
},
data () {
@ -33,12 +37,20 @@
return [
`${prefixCls}`,
{
[`${prefixCls}-${this.color}`]: !!this.color
[`${prefixCls}-${this.color}`]: !!this.color,
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-closable`]: this.closable
}
]
},
textClasses () {
return `${prefixCls}-text`;
},
dotClasses () {
return `${prefixCls}-dot-inner`;
},
showDot () {
return !!this.type && this.type === 'dot';
}
},
methods: {

114
src/index.js
View file

@ -1,76 +1,82 @@
import Affix from './components/affix';
import Alert from './components/alert';
import BackTop from './components/back-top';
import Badge from './components/badge';
import Breadcrumb from './components/breadcrumb';
import Button from './components/button';
import Card from './components/card';
import Checkbox from './components/checkbox';
import Circle from './components/circle';
import Collapse from './components/collapse';
import Icon from './components/icon';
import Input from './components/input';
import Switch from './components/switch';
import Radio from './components/radio';
import Checkbox from './components/checkbox';
import InputNumber from './components/input-number';
import { Row, Col } from './components/layout';
import LoadingBar from './components/loading-bar';
import Message from './components/message';
import Modal from './components/modal';
import Notice from './components/notice';
import Page from './components/page';
import Badge from './components/badge';
import Tag from './components/tag';
import Poptip from './components/poptip';
import Progress from './components/progress';
import Circle from './components/circle';
import Timeline from './components/timeline';
import Affix from './components/affix';
import BackTop from './components/back-top';
import Radio from './components/radio';
import Slider from './components/slider';
import Spin from './components/spin';
import Steps from './components/steps';
import Breadcrumb from './components/breadcrumb';
import Alert from './components/alert';
import Collapse from './components/collapse';
import Card from './components/card';
import Message from './components/message';
import Notice from './components/notice';
import LoadingBar from './components/loading-bar';
import Modal from './components/modal';
import { Select, Option, OptionGroup } from './components/select';
import Switch from './components/switch';
import Tag from './components/tag';
import Timeline from './components/timeline';
import Tooltip from './components/tooltip';
import Poptip from './components/poptip';
import Slider from './components/slider';
import { Row, Col } from './components/layout';
import { Select, Option, OptionGroup } from './components/select';
const iview = {
Button,
iButton: Button,
ButtonGroup: Button.Group,
Icon,
Input,
Switch,
Radio,
RadioGroup: Radio.Group,
Checkbox,
CheckboxGroup: Checkbox.Group,
InputNumber,
Row,
iCol: Col,
Page,
Badge,
Tag,
Progress,
Circle,
Timeline,
TimelineItem: Timeline.Item,
Affix,
Alert,
BackTop,
Spin,
Steps,
Step: Steps.Step,
Badge,
Breadcrumb,
BreadcrumbItem: Breadcrumb.Item,
Alert,
Collapse,
Panel: Collapse.Panel,
Button,
ButtonGroup: Button.Group,
Card,
Message,
Notice,
Checkbox,
CheckboxGroup: Checkbox.Group,
Circle,
Col,
Collapse,
Icon,
InputNumber,
LoadingBar,
Message,
Modal,
iSelect: Select,
Notice,
Option,
OptionGroup: OptionGroup,
Page,
Panel: Collapse.Panel,
Poptip,
Progress,
Radio,
RadioGroup: Radio.Group,
Row,
Select,
Slider,
Spin,
Step: Steps.Step,
Steps,
Switch,
Tag,
Timeline,
TimelineItem: Timeline.Item,
Tooltip,
iButton: Button,
iButtonGroup: Button.Group,
iCol: Col,
iInput: Input,
iOption: Option,
iOptionGroup: OptionGroup,
Tooltip,
Poptip,
Slider
iSelect: Select
};
module.exports = iview;
module.exports = iview;

14
src/styles/article/index.less
View file

@ -1,21 +1,27 @@
.ivu-article {
h1{
font-size: 28px;
font-size: 26px;
font-weight: normal;
}
h2{
font-size: 22px;
font-size: 20px;
font-weight: normal;
}
h3{
font-size: 18px;
font-size: 16px;
font-weight: normal;
}
h4{
font-size: 14px;
font-weight: normal;
}
h5{
font-size: 12px;
font-weight: normal;
}
h6{
font-size: 12px;
font-weight: normal;
}
blockquote{
@ -33,6 +39,7 @@
}
li{
margin-bottom: 5px;
font-size: 14px;
}
ul ul, ol ul{
list-style-type: circle;
@ -40,5 +47,6 @@
p{
margin: 5px;
font-size: 14px;
}
}

4
src/styles/common/base.less
View file

@ -12,7 +12,7 @@
body {
font-family: @font-family;
font-size: @font-size-base;
font-size: @font-size-small;
line-height: @line-height-base;
color: @text-color;
background-color: @body-background;
@ -64,7 +64,7 @@ a {
&[disabled] {
color: #ccc;
cursor: not-allowed;
cursor: @cursor-disabled;
pointer-events: none;
}
}

10
src/styles/components/alert.less
View file

@ -6,7 +6,7 @@
padding: 8px 48px 8px 16px;
border-radius: @border-radius-base;
color: @text-color;
font-size: 12px;
font-size: @font-size-small;
line-height: 16px;
margin-bottom: 10px;
@ -15,15 +15,15 @@
}
&-icon {
font-size: 14px;
font-size: @font-size-base;
top: 8px;
left: 16px;
position: absolute;
}
&-desc {
font-size: 12px;
color: @legend-color;
font-size: @font-size-small;
color: @text-color;
line-height: 21px;
display: none;
text-align: justify;
@ -84,7 +84,7 @@
&-with-desc &-message {
font-size: 14px;
color: @text-color;
color: @title-color;
display: block;
}

12
src/styles/components/button.less
View file

@ -4,6 +4,10 @@
.btn;
.btn-default;
& > .ivu-icon + span, & > span + .ivu-icon{
margin-left: 4px;
}
&-primary {
.btn-primary;
@ -34,6 +38,14 @@
.btn-ghost;
}
&-dashed{
.btn-dashed;
}
&-text{
.btn-text;
}
//&-dashed {
// .btn-dashed;
//}

2
src/styles/components/card.less
View file

@ -41,7 +41,7 @@
&-extra {
position: absolute;
right: 16px;
top: 10px;
top: 14px;
}
&-body {

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

@ -23,4 +23,5 @@
@import "select";
@import "select-dropdown";
@import "tooltip";
@import "poptip";
@import "poptip";
@import "input";

28
src/styles/components/input-number.less
View file

@ -13,8 +13,8 @@
margin: 0;
padding: 0;
width: 80px;
height: 28px;
line-height: 28px;
height: @input-height-base;
line-height: @input-height-base;
vertical-align: middle;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
@ -53,7 +53,7 @@
&-handler {
display: block;
width: 100%;
height: 14px;
height: @input-height-base / 2;
line-height: 0;
text-align: center;
overflow: hidden;
@ -93,13 +93,13 @@
&-input-wrap {
overflow: hidden;
height: 28px;
height: @input-height-base;
}
&-input {
width: 100%;
height: 28px;
line-height: 28px;
height: @input-height-base;
line-height: @input-height-base;
padding: 0 7px;
text-align: left;
outline: 0;
@ -117,15 +117,15 @@
&-large {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: 32px;
height: @input-height-large;
}
.@{input-number-prefix-cls}-handler {
height: 16px;
height: @input-height-large / 2;
}
input {
height: 32px;
line-height: 32px;
height: @input-height-large;
line-height: @input-height-large;
}
.@{input-number-prefix-cls}-handler-up-inner {
@ -139,15 +139,15 @@
&-small {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: 22px;
height: @input-height-small;
}
.@{input-number-prefix-cls}-handler {
height: 11px;
height: @input-height-small / 2;
}
input {
height: 22px;
line-height: 22px;
height: @input-height-small;
line-height: @input-height-small;
margin-top: -1px;
vertical-align: top;
}

35
src/styles/components/input.less Normal file
View file

@ -0,0 +1,35 @@
@input-prefix-cls: ~"@{css-prefix}input";
.@{input-prefix-cls} {
.input;
&-wrapper{
display: inline-block;
width: 100%;
position: relative;
}
&-icon {
width: 32px;
height: 100%;
font-size: 16px;
text-align: center;
color: @subsidiary-color;
position: absolute;
right: 0;
z-index: 1;
&:after{
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
}
&-icon + &{
padding-right: 32px;
}
}
.@{input-prefix-cls}-group{
.input-group(~"@{input-prefix-cls}");
}

6
src/styles/components/message.less
View file

@ -2,7 +2,7 @@
@icon-prefix-cls: ~"@{css-prefix}icon";
.@{message-prefix-cls} {
font-size: 12px;
font-size: @font-size-small;
position: fixed;
z-index: @zindex-message;
width: 100%;
@ -20,8 +20,8 @@
position: relative;
right: 50%;
padding: 8px 16px;
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
background: #fff;
display: block;

4
src/styles/components/modal.less
View file

@ -46,7 +46,7 @@
}
&-close {
.content-close;
.content-close(1px, 31px);
}
&-body {
@ -57,7 +57,7 @@
&-footer {
border-top: 1px solid @border-color-split;
padding: 10px 18px 10px 10px;
padding: 12px 18px 12px 10px;
text-align: right;
button + button {
margin-left: 8px;

97
src/styles/components/notice.less
View file

@ -6,26 +6,26 @@
@notice-margin-bottom: 10px;
.@{notice-prefix-cls} {
position: fixed;
z-index: @zindex-notification;
width: @notice-width;
margin-right: 24px;
position: fixed;
z-index: @zindex-notification;
&-notice {
padding: @notice-padding;
border-radius: @border-radius-base;
box-shadow: @shadow-base;
border: 1px solid @border-color-base;
background: #fff;
line-height: 1.5;
position: relative;
margin-bottom: @notice-margin-bottom;
padding: @notice-padding;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
background: #fff;
line-height: 1;
position: relative;
overflow: hidden;
&-close {
position: absolute;
right: 16px;
top: 10px;
top: 15px;
color: #999;
outline: none;
@ -33,35 +33,48 @@
.close-base(-3px);
}
}
&-with-desc{
.@{notice-prefix-cls}-notice-close{
top: 11px;
}
}
}
&-title {
font-size: @font-size-base;
color: @text-color;
margin-bottom: 4px;
color: @title-color;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-with-desc &-title{
margin-bottom: 8px;
}
&-with-desc&-with-icon &-title{
margin-left: 51px;
}
&-desc {
font-size: 12px;
color: @legend-color;
text-align: justify;
line-height: 1.5;
}
&-with-desc&-with-icon &-desc{
margin-left: 51px;
}
&-with-icon &-title{
margin-left: 51px;
margin-bottom: 4px;
}
&-with-icon &-desc {
margin-left: 51px;
margin-left: 26px;
}
&-icon {
position: absolute;
left: 21px;
top: 50%;
margin-top: -21px;
font-size: 28px;
left: 20px;
margin-top: -1px;
font-size: 16px;
&-success {
color: @success-color;
@ -76,4 +89,44 @@
color: @error-color;
}
}
&-with-desc &-icon{
font-size: 36px;
}
&-custom-content{
&:after{
content: "";
display: block;
width: 4px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
}
&-with-normal{
&:after{
background: @primary-color;
}
}
&-with-info{
&:after{
background: @primary-color;
}
}
&-with-success{
&:after{
background: @success-color;
}
}
&-with-warning{
&:after{
background: @warning-color;
}
}
&-with-error{
&:after{
background: @error-color;
}
}
}

73
src/styles/components/page.less
View file

@ -12,9 +12,9 @@
&-item {
float: left;
min-width: 28px;
height: 28px;
line-height: 28px;
min-width: @btn-circle-size;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin-right: 4px;
text-align: center;
list-style: none;
@ -54,7 +54,7 @@
&:after {
content: "•••";
display: block;
letter-spacing: 2px;
letter-spacing: 1px;
color: #ccc;
text-align: center;
}
@ -85,36 +85,45 @@
}
}
&-prev,
&-item-jump-prev,
&-item-jump-next {
&-prev{
margin-right: 8px;
}
&-item-jump-prev,
&-item-jump-next{
margin-right: 4px;
}
&-next{
margin-left: 4px;
}
&-prev,
&-next,
&-item-jump-prev,
&-item-jump-next {
display: inline-block;
float: left;
min-width: 28px;
height: 28px;
line-height: 28px;
min-width: @btn-circle-size;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
list-style: none;
text-align: center;
cursor: pointer;
color: #666;
font-family: Arial;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
.transition(all @transition-time @ease-in-out);
}
&-prev,
&-next {
border: 1px solid @border-color-base;
background-color: #fff;
a {
color: #666;
font-size: 14px;
}
&:hover {
@ -150,8 +159,8 @@
&-elevator {
float: left;
height: 28px;
line-height: 28px;
height: @btn-circle-size;
line-height: @btn-circle-size;
input {
.input;
@ -164,8 +173,8 @@
&-total {
float: left;
height: 30px;
line-height: 30px;
height: @btn-circle-size;
line-height: @btn-circle-size;
margin-right: 10px;
}
@ -199,51 +208,57 @@
border-color: @primary-color;
}
}
span{
padding: 0 8px 0 2px;
}
}
}
.@{page-prefix-cls} {
&.mini &-total {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
}
&.mini &-item {
border: 0;
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
min-width: @btn-circle-size-small;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border-radius: @btn-border-radius-small;
}
&.mini &-prev,
&.mini &-next {
margin: 0;
min-width: 20px;
height: 20px;
line-height: 20px;
min-width: @btn-circle-size-small;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border: 0;
a {
i:after {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
}
}
}
&.mini &-item-jump-prev,
&.mini &-item-jump-next {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
border: none;
margin-right: 0;
}
&.mini &-options {
margin-left: 8px;
&-elevator {
height: 20px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small;
input {
.input-small;

32
src/styles/components/poptip.less
View file

@ -17,11 +17,24 @@
&-title {
margin: 0;
padding: 0 16px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid @border-color-split;
color: #666;
padding: 8px 16px;
position: relative;
&:after{
content: '';
display: block;
height: 1px;
position: absolute;
left: 8px;
right: 8px;
bottom: 0;
background-color: @border-color-split;
}
&-inner{
color: @title-color;
font-size: @font-size-base;
}
}
&-body{
@ -29,6 +42,10 @@
&-content{
overflow: auto;
&-inner{
color: @text-color;
}
}
}
@ -36,7 +53,7 @@
width: 100%;
background-color: #fff;
background-clip: padding-box;
border: 1px solid @border-color-split;
//border: 1px solid @border-color-split;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space: nowrap;
@ -108,8 +125,9 @@
&-confirm &-body{
padding: 16px 16px 8px;
.ivu-icon{
font-size: 16px;
color: @warning-color;
line-height: 17px;
line-height: 18px;
position: absolute;
}

2
src/styles/components/progress.less
View file

@ -3,7 +3,7 @@
.@{progress-prefix-cls} {
display: inline-block;
width: 100%;
font-size: 14px;
font-size: @font-size-small;
position: relative;
&-outer {

68
src/styles/components/radio.less
View file

@ -5,12 +5,12 @@
.@{radio-group-prefix-cls} {
display: inline-block;
font-size: @font-size-base;
font-size: @font-size-small;
}
// 普通状态
.@{radio-prefix-cls}-wrapper {
font-size: @font-size-base;
font-size: @font-size-small;
vertical-align: middle;
display: inline-block;
position: relative;
@ -19,9 +19,10 @@
}
.@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap;
outline: none;
display: inline-block;
position: relative;
line-height: 1;
vertical-align: middle;
@ -33,8 +34,8 @@
}
&-inner {
display: inline-block;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
position: relative;
top: 0;
left: 0;
@ -45,8 +46,8 @@
&:after {
position: absolute;
width: 10px;
height: 10px;
width: 8px;
height: 8px;
left: 2px;
top: 2px;
border-radius: @border-radius-base;
@ -68,24 +69,34 @@
left: 0;
right: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
cursor: pointer;
}
}
// 选中状态
.@{radio-prefix-cls}-checked {
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
border-color: @primary-color;
&:after {
opacity: 1;
.transform(scale(1));
.transition(all @transition-time @ease-in-out);
}
}
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
}
}
}
.@{radio-prefix-cls}-disabled {
cursor: @cursor-disabled;
.@{radio-prefix-cls}-input {
cursor: @cursor-disabled;
}
&:hover {
.@{radio-inner-prefix-cls} {
border-color: @border-color-base;
@ -99,13 +110,8 @@
}
}
.@{radio-inner-prefix-cls}-input {
cursor: default;
}
.@{radio-prefix-cls}-disabled + span {
color: #ccc;
cursor: @cursor-disabled;
}
}
@ -119,19 +125,24 @@ span.@{radio-prefix-cls} + * {
font-size: 0;
-webkit-text-size-adjust:none;
.@{radio-prefix-cls}{
width: 0;
margin-right: 0;
}
.@{radio-prefix-cls}-wrapper {
font-size: 14px;
margin: 0;
height: 28px;
line-height: 26px;
color: @btn-default-color;
display: inline-block;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 16px;
font-size: @font-size-small;
color: @btn-default-color;
.transition(all @transition-time ease-in-out);
cursor: pointer;
border: 1px solid @border-color-base;
border-left: 0;
background: #fff;
padding: 0 16px;
> span {
margin-left: 0;
@ -203,7 +214,7 @@ span.@{radio-prefix-cls} + * {
&-disabled {
border-color: @border-color-base;
background-color: @background-color-base;
cursor: not-allowed;
cursor: @cursor-disabled;
color: #ccc;
&:first-child,
@ -227,19 +238,20 @@ span.@{radio-prefix-cls} + * {
}
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
height: 32px;
line-height: 30px;
height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base;
}
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
height: 22px;
line-height: 20px;
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
padding: 0 12px;
font-size: 12px;
font-size: @font-size-small;
&:first-child {
border-radius: @btn-border-radius 0 0 @btn-border-radius-small;
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
}
&:last-child {
border-radius: 0 @btn-border-radius-small @btn-border-radius 0;
border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
}
}

9
src/styles/components/select-dropdown.less
View file

@ -1,16 +1,17 @@
@select-dropdown-prefix-cls: ~"@{css-prefix}select-dropdown";
.@{select-dropdown-prefix-cls} {
width: 100%;
width: inherit;
max-height: 200px;
overflow: auto;
margin: 5px 0;
padding: 7px 0;
padding: 5px 0;
background-color: #fff;
box-sizing: border-box;
border: 1px solid @border-color-base;
//border: 1px solid @border-color-split;
border-radius: @btn-border-radius;
box-shadow: 0 1px 3px rgba(0,0,0,.2);
//box-shadow: 0 1px 3px rgba(0,0,0,.2);
box-shadow: @shadow-base;
position: absolute;
z-index: @zindex-select;
}

49
src/styles/components/select.less
View file

@ -80,7 +80,7 @@
}
&-single &-selection{
height: 28px;
height: @input-height-base;
position: relative;
.@{select-prefix-cls}-placeholder{
@ -89,8 +89,9 @@
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
display: block;
height: 26px;
line-height: 26px;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
font-size: @font-size-small;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -100,32 +101,33 @@
}
&-large&-single &-selection{
height: 32px;
height: @input-height-large;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: 30px;
line-height: 30px;
height: @input-height-large - 2px;
line-height: @input-height-large - 2px;
font-size: @font-size-base;
}
}
&-small&-single &-selection{
height: 22px;
height: @input-height-small;
border-radius: @btn-border-radius-small;
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
height: 20px;
line-height: 20px;
height: @input-height-small - 2px;
line-height: @input-height-small - 2px;
}
}
&-multiple &-selection{
padding: 0 24px 0 2px;
min-height: 28px;
padding: 0 24px 0 4px;
min-height: @input-height-base;
.@{select-prefix-cls}-placeholder{
display: block;
height: 26px;
line-height: 26px;
height: @input-height-base - 2px;
line-height: @input-height-base - 2px;
color: @input-placeholder-color;
overflow: hidden;
text-overflow: ellipsis;
@ -141,7 +143,7 @@
height: @input-height-base;
line-height: @input-height-base;
padding: 0 24px 0 8px;
font-size: @font-size-base;
font-size: @font-size-small;
outline: none;
border: none;
box-sizing: border-box;
@ -157,6 +159,7 @@
}
&-large &-input{
font-size: @font-size-base;
height: @input-height-large;
}
@ -165,8 +168,8 @@
}
&-multiple &-input{
height: 25px;
line-height: 28px;
height: @input-height-base - 3px;
line-height: @input-height-base;
padding: 0 0 0 6px;
}
@ -174,13 +177,18 @@
text-align: center;
color: @btn-disable-color;
}
&-multiple .@{css-prefix}tag{
margin: 3px 4px 2px 0;
}
}
.@{select-item-prefix-cls} {
margin: 0;
padding: 7px 15px;
padding: 7px 16px;
clear: both;
color: @text-color;
font-size: @font-size-small !important;
//border-radius: @btn-border-radius-small;
white-space: nowrap;
cursor: pointer;
@ -215,6 +223,11 @@
}
}
.@{select-prefix-cls}-large .@{select-item-prefix-cls}{
padding: 7px 16px 8px;
font-size: @font-size-base !important;
}
.@{select-prefix-cls}-multiple .@{select-item-prefix-cls} {
&-selected{
color: @selected-color;
@ -244,7 +257,7 @@
padding: 0;
&-title {
padding-left: 10px;
padding-left: 8px;
font-size: 12px;
color: @legend-color;
height: 30px;

59
src/styles/components/switch.less
View file

@ -2,10 +2,10 @@
.@{switch-prefix-cls} {
display: inline-block;
width: 44px;
width: 48px;
height: 24px;
line-height: 22px;
border-radius: 22px;
border-radius: 24px;
vertical-align: middle;
border: 1px solid #ccc;
background-color: #ccc;
@ -16,9 +16,9 @@
&-inner {
color: #fff;
font-size: 12px;
font-size: @font-size-small;
position: absolute;
left: 24px;
left: 25px;
i{
width: 12px;
@ -29,13 +29,13 @@
&:after {
content: '';
width: 22px;
height: 22px;
border-radius: 50%;
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
left: 1px;
top: 1px;
cursor: pointer;
.transition2(left @transition-time @ease-in-out, width @transition-time @ease-in-out);
}
@ -54,26 +54,45 @@
}
&-small {
height: 14px;
line-height: 12px;
width: 28px;
width: 24px;
height: 12px;
line-height: 10px;
&:after {
width: 12px;
height: 12px;
width: 10px;
height: 10px;
top: 0;
left: 0;
}
&:active:after {
width: 16px;
width: 14px;
}
}
&-small&-checked:after {
left: 14px;
left: 12px;
}
&-small:active&-checked:after {
left: 10px;
left: 8px;
}
&-large{
width: 60px;
&:active:after {
width: 26px;
}
}
&-large:active:after {
width: 32px;
}
&-large&-checked:after {
left: 37px;
}
&-large:active&-checked:after {
left: 25px;
}
&-checked {
@ -81,15 +100,15 @@
background-color: @primary-color;
.@{switch-prefix-cls}-inner {
left: 6px;
left: 8px;
}
&:after {
left: 20px;
left: 25px;
}
&:active:after {
left: 16px;
left: 19px;
}
}

129
src/styles/components/tag.less
View file

@ -7,8 +7,8 @@
line-height: 22px;
margin: 2px 4px 2px 0;
padding: 0 8px;
border-radius: @btn-border-radius-small;
border: 1px solid @border-color-split;
border-radius: @btn-border-radius-small;
background: @background-color-base;
font-size: @tag-font-size;
vertical-align: middle;
@ -17,6 +17,109 @@
cursor: pointer;
//.transition(all @transition-time @ease-in-out);
&-dot{
height: 32px;
line-height: 32px;
border: 1px solid @border-color-split !important;
color: @text-color !important;
background: #fff !important;
padding: 0 12px;
&-inner{
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 50%;
background: @border-color-split;
position: relative;
top: 1px;
}
.@{tag-close-prefix-cls} {
color: #666 !important;
margin-left: 12px !important;
}
}
&-border{
height: 24px;
line-height: 24px;
border: 1px solid @border-color-split !important;
color: @text-color !important;
background: #fff !important;
position: relative;
.@{tag-close-prefix-cls} {
color: #666 !important;
margin-left: 12px !important;
}
&:after{
content: "";
display: none;
width: 1px;
background: @border-color-split;
position: absolute;
top: 0;
bottom: 0;
right: 22px;
}
&.@{tag-prefix-cls}-closable {
&:after{
display: block;
}
.@{tag-close-prefix-cls} {
margin-left: 18px !important;
}
}
&.@{tag-prefix-cls}-blue {
color: @link-color !important;
border: 1px solid @link-color !important;
&:after{
background: @link-color;
}
.@{tag-close-prefix-cls}{
color: @link-color !important;
}
}
&.@{tag-prefix-cls}-green {
color: @success-color !important;
border: 1px solid @success-color !important;
&:after{
background: @success-color;
}
.@{tag-close-prefix-cls}{
color: @success-color !important;
}
}
&.@{tag-prefix-cls}-yellow {
color: @warning-color !important;
border: 1px solid @warning-color !important;
&:after{
background: @warning-color;
}
.@{tag-close-prefix-cls}{
color: @warning-color !important;
}
}
&.@{tag-prefix-cls}-red {
color: @error-color !important;
border: 1px solid @error-color !important;
&:after{
background: @error-color;
}
.@{tag-close-prefix-cls}{
color: @error-color !important;
}
}
}
&:hover {
opacity: 0.85;
}
@ -38,7 +141,7 @@
.@{tag-close-prefix-cls} {
.iconfont-size-under-12px(20px);
cursor: pointer;
margin-left: 3px;
margin-left: 8px;
color: #666;
opacity: 0.66;
position: relative;
@ -64,25 +167,27 @@
}
}
&-blue {
&-blue,
&-blue&-dot &-dot-inner
{
background: @link-color;
}
&-green {
&-green,
&-green&-dot &-dot-inner
{
background: @success-color;
}
&-yellow {
&-yellow,
&-yellow&-dot &-dot-inner
{
background: @warning-color;
}
&-red {
&-red,
&-red&-dot &-dot-inner
{
background: @error-color;
}
&-close {
width: 0 !important;
padding: 0;
margin: 0;
}
}

6
src/styles/components/timeline.less
View file

@ -55,7 +55,7 @@
line-height: 1;
border: 0;
border-radius: 0;
font-size: 14px;
font-size: @font-size-base;
position: absolute;
left: -14px;
.transform(translateY(-50%));
@ -63,9 +63,9 @@
&-content {
padding: 1px 1px 10px 24px;
font-size: @font-size-base;
font-size: @font-size-small;
position: relative;
top: -5px;
top: -4px;
}
&:last-child {

4
src/styles/components/tooltip.less
View file

@ -19,14 +19,14 @@
&-inner{
max-width: @tooltip-max-width;
min-height: 34px;
padding: 8px 10px;
padding: 8px 12px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-small;
box-shadow: @shadow-base;
white-space:nowrap;
white-space: nowrap;
}
&-arrow{

111
src/styles/mixins/button.less
View file

@ -65,15 +65,45 @@
}
}
// size
&-large > .@{btnClassName} {
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
& .@{btnClassName}-icon-only .ivu-icon {
font-size: 14px;
position: relative;
top: 1px;
}
&-small > .@{btnClassName} {
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
> .@{css-prefix-iconfont} {
font-size: @btn-font-size;
&-large .@{btnClassName}-icon-only .ivu-icon{
font-size: 16px;
top: 2px;
}
&-small .@{btnClassName}-icon-only .ivu-icon{
font-size: 12px;
top: 0;
}
&-circle .@{btnClassName} {
border-radius: @btn-circle-size;
}
// size
&-large&-circle .@{btnClassName} {
border-radius: @btn-circle-size-large;
}
&-large {
& > .@{btnClassName} {
.button-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
}
}
&-small&-circle .@{btnClassName} {
border-radius: @btn-circle-size-small;
}
&-small {
& > .@{btnClassName}{
.button-size(@btn-padding-small; @btn-font-size; @btn-border-radius-small);
> .@{css-prefix-iconfont} {
font-size: @btn-font-size;
}
}
}
}
@ -93,7 +123,8 @@
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
.transform(translate3d(0, 0, 0));
.transition(all @transition-time linear);
//.transition(all @transition-time linear);
.transition3(color @transition-time linear, background-color @transition-time linear, border @transition-time linear);
> .@{css-prefix-iconfont} {
line-height: 1;
@ -189,19 +220,59 @@
}
}
// Circle for Icon
.btn-circle(@btnClassName: ivu-btn) {
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
// Text
.btn-text() {
.button-variant(@link-color, @btn-ghost-bg, transparent);
&.@{btnClassName}-large {
.square(@btn-circle-size-large);
.button-size(0; @btn-font-size-large + 2; 50%);
// for disabled
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-ghost-bg; transparent);
}
}
&.@{btnClassName}-small {
.square(@btn-circle-size-small);
.button-size(0; @font-size-base; 50%);
&:hover
//&:focus
{
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
}
}
// Circle for Icon
.btn-circle(@btnClassName: ivu-btn) {
border-radius: @btn-circle-size;
&.@{btnClassName}-large{
border-radius: @btn-circle-size-large;
}
&.@{btnClassName}-size{
border-radius: @btn-circle-size-small;
}
&.@{btnClassName}-icon-only{
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
&.@{btnClassName}-large{
.square(@btn-circle-size-large);
.button-size(0; @btn-font-size-large + 2; 50%);
}
&.@{btnClassName}-small{
.square(@btn-circle-size-small);
.button-size(0; @font-size-base; 50%);
}
}
}
@ -218,8 +289,6 @@
.@{btnClassName}:not(:first-child):not(:last-child) {
border-radius: 0;
padding-left: 8px;
padding-right: 8px;
}
> .@{btnClassName}:first-child {
@ -227,14 +296,12 @@
&:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding-right: 8px;
}
}
> .@{btnClassName}:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
}
& > & {

18
src/styles/mixins/checkbox.less
View file

@ -19,23 +19,23 @@
&-inner {
display: inline-block;
width: 16px;
height: 16px;
width: 14px;
height: 14px;
position: relative;
top: 0;
left: 0;
border: 1px solid @border-color-base;
border-radius: 3px;
border-radius: 2px;
background-color: #fff;
.transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
&:after {
content: '';
display: table;
width: 5px;
width: 4px;
height: 8px;
position: absolute;
top: 2px;
top: 1px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
@ -75,10 +75,10 @@
&:after {
content: '';
display: table;
width: 5px;
width: 4px;
height: 8px;
position: absolute;
top: 2px;
top: 1px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
@ -136,7 +136,7 @@
.@{checkbox-prefix-cls}-wrapper {
cursor: pointer;
font-size: @font-size-base;
font-size: @font-size-small;
display: inline-block;
& + & {
margin-left: 8px;
@ -145,7 +145,7 @@
.@{checkbox-prefix-cls}-wrapper + span,
.@{checkbox-prefix-cls} + span {
margin-left: 4px;
//margin-left: 4px;
margin-right: 4px;
}

4
src/styles/mixins/close.less
View file

@ -1,5 +1,5 @@
.close-base(@top: 0) {
font-size: 22px;
.close-base(@top: 0, @icon-font-size: 22px) {
font-size: @icon-font-size;
color: @legend-color;
transition: color @transition-time ease;
position: relative;

15
src/styles/mixins/content.less
View file

@ -2,15 +2,18 @@
.content-header() {
border-bottom: 1px solid @border-color-split;
padding: 10px 16px;
padding: 14px 16px;
line-height: 1;
p {
p,
&-inner
{
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: 14px;
font-size: @font-size-base;
color: @title-color;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
@ -18,8 +21,8 @@
}
}
.content-close(@top: 0) {
font-size: 12px;
.content-close(@top: 0, @icon-font-size: 22px) {
font-size: @font-size-small;
position: absolute;
right: 16px;
top: 8px;
@ -27,6 +30,6 @@
cursor: pointer;
.@{icon-prefix-cls}-ios-close-empty {
.close-base(@top);
.close-base(@top, @icon-font-size);
}
}

143
src/styles/mixins/input.less
View file

@ -19,6 +19,7 @@
}
.input-large() {
font-size: @font-size-base;
padding: @input-padding-vertical-large @input-padding-horizontal;
height: @input-height-large;
}
@ -35,7 +36,7 @@
height: @input-height-base;
line-height: @line-height-base;
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: @font-size-base;
font-size: @font-size-small;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
color: @input-color;
@ -64,6 +65,7 @@
max-width: 100%;
height: auto;
vertical-align: bottom;
font-size: @font-size-base;
}
// Size
@ -74,4 +76,141 @@
&-small {
.input-small();
}
}
}
.input-group(@inputClass) {
display: table;
width: 100%;
border-collapse: separate;
position: relative;
font-size: @font-size-small;
&-large{
font-size: @font-size-base;
}
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
> [class*="col-"] {
padding-right: 8px;
}
&-prepend,
&-append,
> .@{inputClass} {
display: table-cell;
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
}
&-prepend .@{css-prefix}btn,
&-append .@{css-prefix}btn
{
border-color: transparent;
background-color: transparent;
color: inherit;
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
}
&-prepend,
&-append
{
width: 1px; // To make addon/wrap as small as possible
white-space: nowrap;
vertical-align: middle;
}
.@{inputClass} {
width: 100%;
float: left;
margin-bottom: 0;
position: relative;
z-index: 2;
}
&-prepend,
&-append
{
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: inherit;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: #eee;
border: 1px solid @input-border-color;
border-radius: @border-radius-base;
// Reset Select's style in addon
.@{css-prefix}select {
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false
&-selection {
background-color: inherit;
margin: -1px;
border: 1px solid transparent;
}
&-visible .@{css-prefix}select-selection{
box-shadow: none;
}
}
}
// Reset rounded corners
> span > .@{inputClass}:first-child,
> .@{inputClass}:first-child,
&-prepend
{
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
// Reset Select's style in addon
.@{css-prefix}-select .@{css-prefix}-select-selection {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
&-prepend {
border-right: 0;
}
&-append {
border-left: 0;
}
> .@{inputClass}:last-child,
&-append
{
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
// Reset Select's style in addon
.@{css-prefix}-select .@{css-prefix}-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
// Sizing options
&-large .@{inputClass},
&-large > &-prepend,
&-large > &-append
{
.input-large();
}
&-small .@{inputClass},
&-small > &-prepend,
&-small > &-append
{
.input-small();
}
}

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

@ -2,22 +2,24 @@
@css-prefix : ivu-;
@css-prefix-iconfont : ivu-icon;
// Color
@primary-color : #0099e5;
@primary-color : #3399ff;
@info-color : #2db7f5;
@success-color : #5cb85c;
@success-color : #00cc66;
@warning-color : #ff9900;
@error-color : #ff5500;
@warning-color : #f0ad4e;
@link-color : #0099e5;
@link-color : #3399ff;
@link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff;
@subsidiary-color : #9ea7b4;
// Base
@body-background : #fff;
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family : Consolas,Menlo,Courier,monospace;
@text-color : #525558;
@title-color : #464c5b;
@text-color : #657180;
@font-size-base : 14px;
@font-size-small : 12px;
@line-height-base : 1.5;
@ -27,16 +29,16 @@
@cursor-disabled : not-allowed;
// Border color
@border-color-base : #d9d9d9; // outside
@border-color-split : #e9e9e9; // inside
@border-color-base : #d7dde4; // outside
@border-color-split : #e3e8ee; // inside
// Background color
@background-color-base : #f7f7f7; // base
@background-color-select-hover: @input-disabled-bg;
@tooltip-bg : #373737;
@tooltip-bg : rgba(70, 76, 91, .9);
// Shadow
@shadow-color : rgba(100, 100, 100, .2);
@shadow-color : rgba(0, 0, 0, .2);
@shadow-base : @shadow-down;
@shadow-card : 0 1px 1px 0 rgba(0,0,0,.1);
@shadow-up : 0 -1px 6px @shadow-color;
@ -45,17 +47,17 @@
@shadow-right : 1px 0 6px @shadow-color;
// Button
@btn-font-weight : 400;
@btn-padding-base : 4px 15px;
@btn-padding-large : 4px 15px 5px 15px;
@btn-padding-small : 1px 7px;
@btn-font-weight : normal;
@btn-padding-base : 6px 15px;
@btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px;
@btn-font-size : 12px;
@btn-font-size-large : 14px;
@btn-border-radius : 4px;
@btn-border-radius-small: 3px;
@btn-group-border : shade(@primary-color, 5%);
@btn-disable-color : #ccc;
@btn-disable-color : #c3cbd6;
@btn-disable-bg : @background-color-base;
@btn-disable-border : @border-color-base;
@ -70,9 +72,9 @@
@btn-ghost-bg : transparent;
@btn-ghost-border : @border-color-base;
@btn-circle-size : 28px;
@btn-circle-size-large : 32px;
@btn-circle-size-small : 22px;
@btn-circle-size : 32px;
@btn-circle-size-large : 36px;
@btn-circle-size-small : 24px;
// Layout and Grid
@grid-columns : 24;
@ -82,9 +84,9 @@
@legend-color : #999;
// Input
@input-height-base : 28px;
@input-height-large : 32px;
@input-height-small : 22px;
@input-height-base : 32px;
@input-height-large : 36px;
@input-height-small : 24px;
@input-padding-horizontal : 7px;
@input-padding-vertical-base : 4px;

5
src/utils/assist.js
View file

@ -49,4 +49,7 @@ export function getScrollBarSize (fresh) {
cached = widthContained - widthScroll;
}
return cached;
}
}
// watch DOM change
export const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;

108
src/utils/calcTextareaHeight.js Normal file
View file

@ -0,0 +1,108 @@
// Thanks to
// https://github.com/andreypopp/react-textarea-autosize/
// https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
let hiddenTextarea;
const HIDDEN_STYLE = `
height:0 !important;
min-height:0 !important;
max-height:none !important;
visibility:hidden !important;
overflow:hidden !important;
position:absolute !important;
z-index:-1000 !important;
top:0 !important;
right:0 !important
`;
const CONTEXT_STYLE = [
'letter-spacing',
'line-height',
'padding-top',
'padding-bottom',
'font-family',
'font-weight',
'font-size',
'text-rendering',
'text-transform',
'width',
'text-indent',
'padding-left',
'padding-right',
'border-width',
'box-sizing'
];
function calculateNodeStyling(node) {
const style = window.getComputedStyle(node);
const boxSizing = style.getPropertyValue('box-sizing');
const paddingSize = (
parseFloat(style.getPropertyValue('padding-bottom')) +
parseFloat(style.getPropertyValue('padding-top'))
);
const borderSize = (
parseFloat(style.getPropertyValue('border-bottom-width')) +
parseFloat(style.getPropertyValue('border-top-width'))
);
const contextStyle = CONTEXT_STYLE
.map(name => `${name}:${style.getPropertyValue(name)}`)
.join(';');
return {contextStyle, paddingSize, borderSize, boxSizing};
}
export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
if (!hiddenTextarea) {
hiddenTextarea = document.createElement('textarea');
document.body.appendChild(hiddenTextarea);
}
let {
paddingSize,
borderSize,
boxSizing,
contextStyle
} = calculateNodeStyling(targetNode);
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
let height = hiddenTextarea.scrollHeight;
let minHeight = -Infinity;
let maxHeight = Infinity;
if (boxSizing === 'border-box') {
height = height + borderSize;
} else if (boxSizing === 'content-box') {
height = height - paddingSize;
}
hiddenTextarea.value = '';
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
if (minRows !== null) {
minHeight = singleRowHeight * minRows;
if (boxSizing === 'border-box') {
minHeight = minHeight + paddingSize + borderSize;
}
height = Math.max(minHeight, height);
}
if (maxRows !== null) {
maxHeight = singleRowHeight * maxRows;
if (boxSizing === 'border-box') {
maxHeight = maxHeight + paddingSize + borderSize;
}
height = Math.min(maxHeight, height);
}
return {
height: `${height}px`,
minHeight: `${minHeight}px`,
maxHeight: `${maxHeight}px`
};
};

38
test/app.vue
View file

@ -2,8 +2,46 @@
@import "../src/styles/index.less";
@import "../src/styles/package.less";
</style>
<style scoped>
nav {
margin-bottom: 40px;
}
li {
display: inline-block;
}
li + li {
border-left: solid 1px #bbb;
padding-left: 5px;
margin-left: 5px;
}
.v-link-active {
color: #bbb;
}
</style>
<template>
<div>
<nav>
<ul>
<li><a v-link="'/button'">Button</a></li>
<li><a v-link="'/card'">Card</a></li>
<li><a v-link="'/message'">Message</a></li>
<li><a v-link="'/more'">More</a></li>
<li><a v-link="'/page'">Page</a></li>
<li><a v-link="'/poptip'">Poptip</a></li>
<li><a v-link="'/tooltip'">Tooltip</a></li>
<li><a v-link="'/radio'">Radio</a></li>
<li><a v-link="'/select'">Select</a></li>
<li><a v-link="'/slider'">Slider</a></li>
<li><a v-link="'/step'">Step</a></li>
<li><a v-link="'/switch'">Switch</a></li>
<li><a v-link="'/alert'">Alert</a></li>
<li><a v-link="'/tag'">Tag</a></li>
<li><a v-link="'/input'">Input</a></li>
</ul>
</nav>
<router-view></router-view>
</div>
</template>

57
test/main.js
View file

@ -16,19 +16,19 @@ var router = new VueRouter({
});
router.map({
'/index': {
component: function (resolve) {
require(['./routers/index.vue'], resolve);
}
},
'/button': {
component: function (resolve) {
require(['./routers/button.vue'], resolve);
}
},
'/page': {
'/card': {
component: function (resolve) {
require(['./routers/page.vue'], resolve);
require(['./routers/card.vue'], resolve);
}
},
'/message': {
component: function (resolve) {
require(['./routers/message.vue'], resolve);
}
},
'/more': {
@ -36,9 +36,14 @@ router.map({
require(['./routers/more.vue'], resolve);
}
},
'/layout': {
'/page': {
component: function (resolve) {
require(['./routers/layout.vue'], resolve);
require(['./routers/page.vue'], resolve);
}
},
'/poptip': {
component: function (resolve) {
require(['./routers/poptip.vue'], resolve);
}
},
'/radio': {
@ -46,14 +51,29 @@ router.map({
require(['./routers/radio.vue'], resolve);
}
},
'/msg': {
'/select': {
component: function (resolve) {
require(['./routers/msg.vue'], resolve);
require(['./routers/select.vue'], resolve);
}
},
'/notice': {
'/slider': {
component: function (resolve) {
require(['./routers/notice.vue'], resolve);
require(['./routers/slider.vue'], resolve);
}
},
'/step': {
component: function (resolve) {
require(['./routers/step.vue'], resolve);
}
},
'/switch': {
component: function (resolve) {
require(['./routers/switch.vue'], resolve);
}
},
'/alert': {
component: function (resolve) {
require(['./routers/alert.vue'], resolve);
}
},
'/tag': {
@ -61,9 +81,14 @@ router.map({
require(['./routers/tag.vue'], resolve);
}
},
'/select': {
'/input': {
component: function (resolve) {
require(['./routers/select.vue'], resolve);
require(['./routers/input.vue'], resolve);
}
},
'/tooltip': {
component: function (resolve) {
require(['./routers/tooltip.vue'], resolve);
}
}
});
@ -77,6 +102,6 @@ router.afterEach(function (transition) {
});
router.redirect({
'*': "/index"
'*': "/button"
});
router.start(App, '#app');

37
test/routers/alert.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<Alert show-icon>消息提示文案</Alert>
<Alert type="success" show-icon>成功提示文案</Alert>
<Alert type="warning" show-icon>警告提示文案</Alert>
<Alert type="error" show-icon>错误提示文案</Alert>
<Alert show-icon>
消息提示文案
<template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
</Alert>
<Alert type="success" show-icon>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Alert type="warning" show-icon>
警告提示文案
<template slot="desc">
警告的提示描述文案警告的提示描述文案警告的提示描述文案
</template>
</Alert>
<Alert type="error" show-icon>
错误提示文案
<span slot="desc">
自定义错误描述文案。
</span>
</Alert>
<Alert show-icon>
自定义图标
<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
<template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
</Alert>
</template>
<script>
import { Alert, Icon } from 'iview';
export default {
components: { Alert, Icon }
}
</script>

101
test/routers/button.vue
View file

@ -1,7 +1,101 @@
<template>
<h4>基本</h4>
<br><br>
<Button-group>
<i-button>取消</i-button>
<i-button type="primary">确定</i-button>
</Button-group>
<Button-group>
<i-button disabled>昨日</i-button>
<i-button disabled>今日</i-button>
<i-button disabled>明日</i-button>
</Button-group>
<Button-group>
<i-button type="primary">L</i-button>
<i-button>M</i-button>
<i-button type="ghost">M</i-button>
<i-button type="dashed">R</i-button>
</Button-group>
<br><br>
<h4>配合图标</h4>
<br><br>
<Button-group>
<i-button type="primary">
<Icon type="chevron-left"></Icon>
前进
</i-button>
<i-button type="primary">
后退
<Icon type="chevron-right"></Icon>
</i-button>
</Button-group>
<Button-group>
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group>
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<br><br>
<h4>圆角</h4>
<br><br>
<Button-group shape="circle">
<i-button type="primary">
<Icon type="chevron-left"></Icon>
前进
</i-button>
<i-button type="primary">
后退
<Icon type="chevron-right"></Icon>
</i-button>
</Button-group>
<Button-group shape="circle">
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group shape="circle">
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<Button-group shape="circle" size="large">
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group shape="circle" size="large">
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<Button-group shape="circle" size="small">
<i-button type="primary" icon="ios-skipbackward"></i-button>
<i-button type="primary" icon="ios-skipforward"></i-button>
</Button-group>
<Button-group shape="circle" size="small">
<i-button type="ghost" icon="ios-color-wand-outline"></i-button>
<i-button type="ghost" icon="ios-sunny-outline"></i-button>
<i-button type="ghost" icon="ios-crop"></i-button>
<i-button type="ghost" icon="ios-color-filter-outline"></i-button>
</Button-group>
<br><br>
<i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
<i-button type="primary" icon="ios-search" shape="circle"></i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="small">搜索</i-button>
<i-button type="primary" icon="ios-search" shape="circle">搜索</i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="large">搜索</i-button>
<br><br>
<i-button>Default</i-button>
<i-button type="primary">Primary</i-button>
<i-button type="ghost">Ghost</i-button>
<i-button type="dashed">Dashed</i-button>
<i-button type="text">文字按钮</i-button>
<i-button type="text" disabled>文字按钮</i-button>
<br><br>
<i-button type="primary" size="large">Large</i-button>
<i-button type="primary">Default</i-button>
@ -16,6 +110,9 @@
<i-button type="ghost">Ghost</i-button>
<i-button type="ghost" disabled>Ghost(Disabled)</i-button>
<br><br>
<i-button type="dashed">dashed</i-button>
<i-button type="dashed" disabled>dashed(Disabled)</i-button>
<br><br>
<i-button type="primary" shape="circle" icon="ios-search"></i-button>
<i-button type="primary" icon="ios-search">搜索</i-button>
<br><br>
@ -53,6 +150,7 @@
<i-button type="primary">L</i-button>
<i-button>M</i-button>
<i-button type="ghost">R</i-button>
<i-button type="dashed">R</i-button>
</Button-group>
<h4>配合图标</h4>
<Button-group>
@ -98,7 +196,8 @@
data () {
return {
loading: false,
loading2: false
loading2: false,
model6: ''
}
},
methods: {

0
test/routers/layout.vue → test/routers/card.vue
View file

58
test/routers/index.vue
View file

@ -1,58 +0,0 @@
<style>
</style>
<template>
<Page :total="40" size="small"></Page>
<Page :total="40" size="small" show-elevator show-sizer></Page>
<Page :total="40" size="small" show-total></Page>
</template>
<script>
import { Modal, Button, Message, Page } from 'iview';
export default {
components: { Modal, Button, Page },
props: {
},
data () {
return {
}
},
methods: {
info () {
Modal.info({
title: '这是对话框标题',
content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
});
},
success () {
Modal.success();
},
warning () {
Modal.warning();
},
error () {
Modal.error();
},
confirm () {
Modal.confirm({
// okText: 'OK',
// cancelText: 'Cancel',
title: '删除提示',
content: '删除后将不可找回，您确定要删除吗？',
onCancel () {
Message.info('cancel it');
},
onOk () {
setTimeout(() => {
Modal.remove();
Message.success('OK!');
}, 2000);
},
loading: true
});
}
}
}
</script>

121
test/routers/input.vue Normal file
View file

@ -0,0 +1,121 @@
<template>
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
<br>
<br>
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" size="large" placeholder="请输入"></i-input>
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" @on-change="change" size="small" placeholder="请输入"></i-input>
{{ v }}
<br>
<br>
<i-input placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
{{ t }}
<br>
<br>
<div style="width: 400px">
<i-input :value.sync="v">
<span slot="prepend">http://</span>
<span slot="append">
<i-button icon="ios-search"></i-button>
</span>
</i-input>
<br>
<i-input :value.sync="v">
<span slot="prepend">http://</span>
<span slot="append"><Icon type="ios-search"></Icon></span>
</i-input>
<br>
<i-input :value.sync="v" size="small">
<span slot="prepend">http://</span>
<span slot="append"><Icon type="ios-search"></Icon></span>
</i-input>
<br>
<i-input :value.sync="v" size="large">
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
<i-option value="http">http://</i-option>
<i-option value="https">https://</i-option>
</i-select>
<i-select :model.sync="select2" slot="append" style="width: 70px">
<i-option value="com">.com</i-option>
<i-option value="cn">.cn</i-option>
<i-option value="net">.net</i-option>
<i-option value="io">.io</i-option>
</i-select>
</i-input>
<br>
<i-input :value.sync="v">
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
<i-option value="http">http://</i-option>
<i-option value="https">https://</i-option>
</i-select>
<i-select :model.sync="select2" slot="append" style="width: 70px">
<i-option value="com">.com</i-option>
<i-option value="cn">.cn</i-option>
<i-option value="net">.net</i-option>
<i-option value="io">.io</i-option>
</i-select>
</i-input>
<br>
<i-input :value.sync="v" size="small">
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
<i-option value="http">http://</i-option>
<i-option value="https">https://</i-option>
</i-select>
<i-select :model.sync="select2" slot="append" style="width: 70px">
<i-option value="com">.com</i-option>
<i-option value="cn">.cn</i-option>
<i-option value="net">.net</i-option>
<i-option value="io">.io</i-option>
</i-select>
</i-input>
<Input-number :value="2" size="small"></Input-number>
<Input-number :value="2"></Input-number>
<Input-number :value="2" size="large"></Input-number>
</div>
</template>
<script>
import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
export default {
components: {
iInput,
Icon,
iButton,
iSelect,
iOption,
InputNumber
},
props: {
},
data () {
return {
v: 'hello',
t: '',
autosize: {
minRows: 2,
maxRows: 5
},
select1: 'http',
select2: 'com'
}
},
computed: {
},
methods: {
enter () {
console.log(123)
},
iconclick () {
console.log('iconclicked')
},
change (val) {
console.log(val)
}
}
}
</script>

124
test/routers/message.vue Normal file
View file

@ -0,0 +1,124 @@
<template>
<i-button @click="mInfo">m信息</i-button>
<i-button @click="open">打开</i-button>
<i-button @click="info2">消息2</i-button>
<i-button @click="info">消息</i-button>
<i-button @click="success">成功</i-button>
<i-button @click="warning">警告</i-button>
<i-button @click="error">错误</i-button>
<i-button @click="modal1 = true"></i-button>
<Modal
:visible.sync="modal1"
title="普通的Modal对话框标题">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
</template>
<script>
import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
export default {
components: {
Message,
Button,
Alert,
Card,
Notice,
iButton,
Modal
},
props: {
},
data () {
return {
modal1: false
}
},
computed: {
},
methods: {
open () {
Notice.open({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
})
},
info () {
Notice.info({
duration: 1000,
title: '这是通知标题',
// desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
});
},
info2 () {
Notice.open({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
});
Notice.info({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
});
Notice.open({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.info({
duration: 1000,
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.success({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.warning({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
Notice.error({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
success () {
Notice.success({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
warning () {
Notice.warning({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
error () {
Notice.error({
duration: 1000,
title: '这是通知标题',
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
});
},
mInfo () {
Message.info('飞机飞士大夫', 1000);
}
},
ready () {
// Message.config({
// top: 50,
// duration: 8
// });
}
}
</script>

2
test/routers/more.vue
View file

@ -29,7 +29,7 @@
<Timeline pending>
<Timeline-item color="red">发布3.0版本</Timeline-item>
<Timeline-item color="green">
<Icon type="time" slot="dot"></Icon>
<Icon type="cloak" slot="dot"></Icon>
发布2.0版本
</Timeline-item>
<Timeline-item color="#ff6600">发布1.0版本</Timeline-item>

72
test/routers/msg.vue
View file

@ -1,72 +0,0 @@
<template>
<Button @click="info">info</Button>
<Button @click="success">success</Button>
<Button @click="error">error</Button>
<Button @click="warning">warning</Button>
<Button @click="loading">手动消失</Button>
<Button @click="destroy">destroy</Button>
<Alert closable>消息提示文案</Alert>
<Alert type="success" show-icon closable>
成功提示文案
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
</Alert>
<Card :bordered="false">
<p slot="title">无边框标题</p>
<p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
</Card>
</template>
<script>
import { Message, Button, Alert, Card } from 'iview';
export default {
components: {
Message,
Button,
Alert,
Card
},
props: {
},
data () {
return {
}
},
computed: {
},
methods: {
info () {
Message.info('欢迎来到iView', 3, () => {
console.log('close info');
});
},
success () {
Message.success('成功啦', 5, () => {
console.log('close successs');
});
},
error () {
Message.error('错误啦');
},
warning () {
Message.warning('来个警告');
},
loading () {
const hide = Message.loading('我是loading', 0);
setTimeout(hide, 5000);
},
destroy () {
Message.destroy();
}
},
ready () {
// Message.config({
// top: 50,
// duration: 8
// });
}
}
</script>

132
test/routers/notice.vue
View file

@ -1,132 +0,0 @@
<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;
}
</style>
<template>
<div class="tooltip_out">
<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">
<a><strong>Delete</strong></a>
</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, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
export default {
components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message },
props: {
},
data () {
return {
}
},
computed: {
},
methods: {
ok () {
Message.info('ok');
},
cancel () {
Message.info('cancel');
}
}
}
</script>

94
test/routers/page.vue
View file

@ -1,97 +1,13 @@
<style>
</style>
<template>
<Steps :current="1" size="small">
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<br>
<Steps :current="2">
<Step title="已完成"></Step>
<Step title="进行中"></Step>
<Step title="待进行"></Step>
<Step title="待进行"></Step>
</Steps>
<br>
<Steps :current="1" size="small">
<Step title="已完成"></Step>
<Step title="进行中"></Step>
<Step title="待进行"></Step>
<Step title="待进行"></Step>
</Steps>
<br>
<Steps :current="1" direction="vertical" size="small">
<Step title="注册" icon="person-add"></Step>
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="验证邮箱" icon="email"></Step>
</Steps>
<Steps :current="1" direction="vertical">
<Step title="注册" icon="person-add"></Step>
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="验证邮箱" icon="email"></Step>
</Steps>
<br>
<p>当前正在进行第 {{ current + 1 }} 步</p>
<Steps :current="current">
<Step title="步骤1"></Step>
<Step title="步骤2"></Step>
<Step title="步骤3"></Step>
<Step title="步骤4"></Step>
</Steps>
<i-button type="primary" @click="next">下一步</i-button>
<Page :total="1000" show-sizer show-elevator show-total></Page>
<br><br>
<Steps :current="1" direction="vertical" size="small">
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<Page :total="1000" show-sizer show-elevator show-total size="small"></Page>
<br><br>
<Steps :current="1" status="error">
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<Page :current="2" :total="50" simple></Page>
</template>
<script>
import { Page, Steps, Button } from 'iview';
const Step = Steps.Step;
import { Page } from 'iview';
export default {
components: {
Page,
Steps,
Step,
iButton: Button
},
props: {
},
data () {
return {
total: 512,
current: 0
}
},
computed: {
},
methods: {
setPage (page) {
console.log(page)
},
next () {
if (this.current == 3) {
this.current = 0;
} else {
this.current += 1;
}
}
}
components: { Page }
}
</script>

180
test/routers/poptip.vue Normal file
View file

@ -0,0 +1,180 @@
<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">
<a><strong>Delete</strong></a>
</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, Button, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
export default {
components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
props: {
},
data () {
return {
}
},
computed: {
},
methods: {
ok () {
Message.info('ok');
},
cancel () {
Message.info('cancel');
}
}
}
</script>

54
test/routers/radio.vue
View file

@ -1,32 +1,25 @@
<template>
<div>
<Collapse active-key="2">
<Panel key="1">
Header1
<Collapse active-key="2" slot="content">
<Panel key="1">
inHeader1
<p slot="content">inContent1</p>
</Panel>
<Panel key="2">
inHeader2
<p slot="content">inContent2</p>
</Panel>
<Panel key="3">
inHeader3
<p slot="content">inContent3</p>
</Panel>
</Collapse>
</Panel>
<Panel key="2">
Header2
<p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</Panel>
<Panel key="3">
Header3
<p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</Panel>
</Collapse>
<Radio-group :model.sync="phone">
<Radio value="apple">
<Icon type="social-apple"></Icon>
<span>Apple</span>
</Radio>
<Radio value="android" disabled>
<Icon type="social-android"></Icon>
<span>Android</span>
</Radio>
<Radio value="windows">
<Icon type="social-windows"></Icon>
<span>Windows</span>
</Radio>
</Radio-group>
<Radio-group :model.sync="animal">
<Radio value="金斑蝶"></Radio>
<Radio value="爪哇犀牛"></Radio>
<Radio value="印度黑羚"></Radio>
</Radio-group>
<br><br>
<Button @click="activeKey = '2'">换</Button>
</div>
<Radio :checked.sync="radio">Radio</Radio>
@ -148,6 +141,8 @@
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
</Breadcrumb>
<br><br>
<Checkbox :checked.sync="single"></Checkbox>
</template>
<script>
import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
@ -175,10 +170,11 @@
LoadingBar
},
props: {
},
data () {
return {
single: false,
radio: false,
radioGroup: '段模',
activeKey: [1,2],
@ -190,7 +186,7 @@
}
},
computed: {
},
methods: {
changeGroup (data) {

163
test/routers/select.vue
View file

@ -1,98 +1,89 @@
<template>
<div>
<br><br><br><br><br><br><br><br><br><br><br>
{{ city | json }}<br>
<Button @click="city = 'hangzhou'">切换城市</Button>
<br>
<i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
<i-option-group label="热门城市">
<i-option value="beijing">北京市</i-option>
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
<i-option value="shenzhen">深圳市</i-option>
</i-option-group>
<i-option-group label="二线城市">
<i-option value="nanjing">南京市</i-option>
<i-option value="hangzhou">杭州市</i-option>
<i-option value="heilongjiang" disabled>黑龙江市</i-option>
</i-option-group>
<i-option-group label="其它城市">
<i-option value="jyg">嘉峪关市</i-option>
<i-option value="lanzhou">兰州市</i-option>
<i-option value="beijingxi">北京西</i-option>
</i-option-group>
</i-select>
<i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
<i-option value="beijing">北京</i-option>
<i-option value="shanghai" label="上海市">上海市</i-option>
<i-option value="shenzhen" disabled>深圳市</i-option>
<i-option value="guangzhou" label="广州市">广州市2</i-option>
<i-option value="shijiazhuang" disabled>石家庄市</i-option>
<!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
<i-option value="a">a市</i-option>
<i-option value="b">b市</i-option>
<i-option value="c">c市</i-option>
<i-option value="d">d市</i-option>
<i-option value="e">e市</i-option>
</i-select>
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
<i-option value="beijing" label="北京市">北京2</i-option>
<i-option value="shanghai">上海市</i-option>
<i-option value="shenzhen" disabled>深圳市</i-option>
<i-option value="guangzhou">广州市</i-option>
<i-option value="shijiazhuang">石家庄市</i-option>
<i-option value="a">a1市</i-option>
<i-option value="b">b2市</i-option>
<i-option value="c">c1市</i-option>
<i-option value="d">d2市</i-option>
<i-option value="e">e1市</i-option>
</i-select>
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
<i-option value="beijing" label="北京市">北京2</i-option>
<i-option value="shanghai">上海市</i-option>
<i-option value="shenzhen" disabled>深圳市</i-option>
<i-option value="guangzhou">广州市</i-option>
<i-option value="shijiazhuang">石家庄市</i-option>
<i-option value="a">a市</i-option>
<i-option value="b">b市</i-option>
<i-option value="c">c市</i-option>
<i-option value="d">d市</i-option>
<i-option value="e">e市</i-option>
</i-select>
<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<i-select :model.sync="model1" style="width:200px" clearable>
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model1 | json }}
<i-button @click="change">修改数据</i-button>
<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model10 | json }}
<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model11 | json }}
<i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
{{ model12 | json }}
<br><br>
<i-select :model.sync="model2" size="small" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model3" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model4" size="large" style="width:100px">
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
</i-select>
<i-select :model.sync="model7" style="width:200px">
<i-option-group label="热门城市">
<i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
</i-option-group>
<i-option-group label="其它城市">
<i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
</i-option-group>
</i-select>
</template>
<script>
import { iSelect, iOption, iOptionGroup, Button } from 'iview';
import { iSelect, iOption, iButton, iOptionGroup } from 'iview';
export default {
components: {
iSelect,
iOption,
iOptionGroup,
Button
},
props: {
},
components: { iSelect, iOption, iButton, iOptionGroup },
data () {
return {
city: '',
focus: '',
focus2: ['beijing']
// focus2: []
cityList: [
{
value: 'beijing',
label: '北京市'
},
{
value: 'shanghai',
label: '上海市'
},
{
value: 'shenzhen',
label: '深圳市'
},
// {
// value: 'hangzhou',
// label: '杭州市'
// },
// {
// value: 'nanjing',
// label: '南京市'
// },
// {
// value: 'chongqing',
// label: '重庆市'
// }
],
model1: '',
model10: [],
model11: '',
model12: [],
model2: '',
model3: '',
model4: '',
model7: ''
}
},
computed: {
},
methods: {
change (data) {
console.log(data)
change () {
this.cityList.splice(2, 1);
},
datachange (data) {
console.log(data);
}
}
}
</script>
</script>

21
test/routers/slider.vue Normal file
View file

@ -0,0 +1,21 @@
<template>
<Slider :value="10" :tip-format="format">
</Slider>
</template>
<script>
import { Slider } from 'iview';
export default {
components: { Slider },
data () {
return {
}
},
methods: {
format (val) {
return `进度：${val}%`
}
}
}
</script>

97
test/routers/step.vue Normal file
View file

@ -0,0 +1,97 @@
<style>
</style>
<template>
<Steps :current="1" size="small">
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<br>
<Steps :current="2">
<Step title="已完成"></Step>
<Step title="进行中"></Step>
<Step title="待进行"></Step>
<Step title="待进行"></Step>
</Steps>
<br>
<Steps :current="1" size="small">
<Step title="已完成"></Step>
<Step title="进行中"></Step>
<Step title="待进行"></Step>
<Step title="待进行"></Step>
</Steps>
<br>
<Steps :current="1" direction="vertical" size="small">
<Step title="注册" icon="person-add"></Step>
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="验证邮箱" icon="email"></Step>
</Steps>
<Steps :current="1" direction="vertical">
<Step title="注册" icon="person-add"></Step>
<Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="验证邮箱" icon="email"></Step>
</Steps>
<br>
<p>当前正在进行第 {{ current + 1 }} 步</p>
<Steps :current="current">
<Step title="步骤1"></Step>
<Step title="步骤2"></Step>
<Step title="步骤3"></Step>
<Step title="步骤4"></Step>
</Steps>
<i-button type="primary" @click="next">下一步</i-button>
<br><br>
<Steps :current="1" direction="vertical" size="small">
<Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
<br><br>
<Steps :current="1" status="error">
<Step title="已完成" content="这里是该步骤的描述信息"></Step>
<Step title="进行中" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
<Step title="待进行" content="这里是该步骤的描述信息"></Step>
</Steps>
</template>
<script>
import { Page, Steps, Button } from 'iview';
const Step = Steps.Step;
export default {
components: {
Page,
Steps,
Step,
iButton: Button
},
props: {
},
data () {
return {
total: 512,
current: 0
}
},
computed: {
},
methods: {
setPage (page) {
console.log(page)
},
next () {
if (this.current == 3) {
this.current = 0;
} else {
this.current += 1;
}
}
}
}
</script>

34
test/routers/switch.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<Switch @on-change="change"></Switch>
<Switch>
<span slot="open">开</span>
<span slot="close">关</span>
</Switch>
<Switch size="large">
<span slot="open">ON</span>
<span slot="close">OFF</span>
</Switch>
<Switch>
<Icon type="android-done" slot="open"></Icon>
<Icon type="android-close" slot="close"></Icon>
</Switch>
<Switch :disabled="disabled"></Switch>
<i-button type="primary" @click="disabled = !disabled">Toggle Disabled</i-button>
<Switch size="small"></Switch>
</template>
<script>
import { Switch, Message, iButton, Icon } from 'iview';
export default {
components: { Switch, Message, iButton, Icon },
data () {
return {
disabled: true
}
},
methods: {
change (status) {
Message.info('开关状态：' + status);
}
}
}
</script>

60
test/routers/tag.vue
View file

@ -1,25 +1,59 @@
<style>
body{
padding: 50px;
}
</style>
<template>
<Slider :value="10" :tip-format="format">
</Slider>
<Tag>标签一</Tag>
<Tag>标签二</Tag>
<Tag closable>标签三</Tag>
<Tag closable color="blue">标签一</Tag>
<Tag closable color="green">标签二</Tag>
<Tag closable color="red">标签三</Tag>
<Tag closable color="yellow">标签四</Tag>
<br><br>
<Tag type="dot">标签一</Tag>
<Tag type="dot" closable>标签一</Tag>
<Tag type="dot" color="blue">标签一</Tag>
<Tag type="dot" color="blue" closable>标签一</Tag>
<Tag type="dot" color="green">标签一</Tag>
<Tag type="dot" color="green" closable>标签一</Tag>
<Tag type="dot" color="red">标签一</Tag>
<Tag type="dot" color="red" closable>标签一</Tag>
<Tag type="dot" color="yellow">标签一</Tag>
<Tag type="dot" color="yellow" closable>标签一</Tag>
<br><br>
<Tag type="border">标签一</Tag>
<Tag type="border" closable>标签一</Tag>
<Tag type="border" color="blue">标签一</Tag>
<Tag type="border" color="blue" closable>标签一</Tag>
<Tag type="border" color="green">标签一</Tag>
<Tag type="border" color="green" closable>标签一</Tag>
<Tag type="border" color="red">标签一</Tag>
<Tag type="border" color="red" closable>标签一</Tag>
<Tag type="border" color="yellow">标签一</Tag>
<Tag type="border" color="yellow" closable>标签一</Tag>
<i-button type="primary" @click="modal1 = true">显示对话框</i-button>
<Modal
:visible.sync="modal1"
title="普通的Modal对话框标题"
:loading="loading" @on-ok="ok">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
{{ loading }}
<i-button @click="loading = true">true</i-button>
<i-button @click="loading = false">false</i-button>
</Modal>
</template>
<script>
import { Slider } from 'iview';
import { Tag, Modal, iButton } from 'iview';
export default {
components: { Slider },
components: { Tag, Modal, iButton },
data () {
return {
modal1: false,
loading: true
}
},
methods: {
format (val) {
return `进度：${val}%`
ok () {
}
}
}

70
test/routers/tooltip.vue Normal file
View file

@ -0,0 +1,70 @@
<style scoped>
.top,.bottom{
text-align: center;
}
.center{
width: 300px;
margin: 10px auto;
overflow: hidden;
}
.center-left{
float: left;
}
.center-right{
float: right;
}
</style>
<template>
<div class="top">
<Tooltip content="Top Left 文字提示" placement="top-start">
<i-button>上左</i-button>
</Tooltip>
<Tooltip content="Top Center 文字提示" placement="top">
<i-button>上边</i-button>
</Tooltip>
<Tooltip content="Top Right 文字提示" placement="top-end">
<i-button>上右</i-button>
</Tooltip>
</div>
<div class="center">
<div class="center-left">
<Tooltip content="Left Top 文字提示" placement="left-start">
<i-button>左上</i-button>
</Tooltip><br><br>
<Tooltip content="Left Center 文字提示" placement="left">
<i-button>左边</i-button>
</Tooltip><br><br>
<Tooltip content="Left Bottom 文字提示" placement="left-end">
<i-button>左下</i-button>
</Tooltip>
</div>
<div class="center-right">
<Tooltip content="Right Top 文字提示" placement="right-start">
<i-button>右上</i-button>
</Tooltip><br><br>
<Tooltip content="Right Center 文字提示" placement="right">
<i-button>右边</i-button>
</Tooltip><br><br>
<Tooltip content="Right Bottom 文字提示" placement="right-end">
<i-button>右下</i-button>
</Tooltip>
</div>
</div>
<div class="bottom">
<Tooltip content="Bottom Left 文字提示" placement="bottom-start">
<i-button>下左</i-button>
</Tooltip>
<Tooltip content="Bottom Center 文字提示" placement="bottom">
<i-button>下边</i-button>
</Tooltip>
<Tooltip content="Bottom Right 文字提示" placement="bottom-end">
<i-button>下右</i-button>
</Tooltip>
</div>
</template>
<script>
import { Tooltip, iButton } from 'iview';
export default {
components: { Tooltip, iButton }
}
</script>