empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
77
test/app.vue
77
test/app.vue
|
|
@ -1,77 +0,0 @@
|
|||
<style lang="less">
|
||||
@import "../src/styles/index.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>
|
||||
<li><a v-link="'/cascader'">Cascader</a></li>
|
||||
<li><a v-link="'/transfer'">Transfer</a></li>
|
||||
<li><a v-link="'/table'">Table</a></li>
|
||||
<li><a v-link="'/dropdown'">Dropdown</a></li>
|
||||
<li><a v-link="'/tabs'">Tabs</a></li>
|
||||
<li><a v-link="'/menu'">Menu</a></li>
|
||||
<li><a v-link="'/date'">Date</a></li>
|
||||
<li><a v-link="'/form'">Form</a></li>
|
||||
<li><a v-link="'/carousel'">Carousel</a></li>
|
||||
<li><a v-link="'/rate'">Rate</a></li>
|
||||
<li><a v-link="'/upload'">Upload</a></li>
|
||||
<li><a v-link="'/tree'">Tree</a></li>
|
||||
<li><a v-link="'/notice'">Notice</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
module.exports = {
|
||||
data: function() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
ready: function() {
|
||||
|
||||
},
|
||||
beforeDestroy: function() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>iView test page</title>
|
||||
<link href="/test/dist/main.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="text/javascript" src="/test/dist/vendors.js"></script>
|
||||
<script type="text/javascript" src="/test/dist/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
176
test/main.js
176
test/main.js
|
|
@ -1,176 +0,0 @@
|
|||
/**
|
||||
* Created by aresn on 16/6/20.
|
||||
*/
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './app.vue';
|
||||
import iView from '../src/index';
|
||||
// import locale from '../src/locale/lang/en-US';
|
||||
import locale from '../src/locale/lang/zh-CN';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(iView, { locale });
|
||||
|
||||
// 开启debug模式
|
||||
Vue.config.debug = true;
|
||||
|
||||
// 路由配置
|
||||
var router = new VueRouter({
|
||||
history: true
|
||||
});
|
||||
|
||||
router.map({
|
||||
'/button': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/button.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/card': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/card.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/message': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/message.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/more': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/more.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/page': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/page.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/poptip': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/poptip.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/radio': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/radio.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/select': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/select.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/slider': {
|
||||
component: function (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': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/tag.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/input': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/input.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/tooltip': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/tooltip.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/cascader': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/cascader.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/transfer': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/transfer.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/table': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/table.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/dropdown': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/dropdown.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/tabs': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/tabs.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/menu': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/menu.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/date': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/date.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/form': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/form.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/carousel': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/carousel.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/rate': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/rate.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/upload': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/upload.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/tree': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/tree.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/notice': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/notice.vue'], resolve);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
router.beforeEach(function () {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
|
||||
router.afterEach(function (transition) {
|
||||
|
||||
});
|
||||
|
||||
router.redirect({
|
||||
'*': "/button"
|
||||
});
|
||||
router.start(App, '#app');
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<Alert show-icon banner closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon>成功提示文案</Alert>
|
||||
<Alert type="warning" show-icon banner>警告提示文案</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>
|
||||
|
|
@ -1,307 +0,0 @@
|
|||
<template>
|
||||
<h4>基本</h4>
|
||||
<br><br>
|
||||
<div style="background: #f60">
|
||||
<input-number></input-number>
|
||||
<Date-picker type="date" placeholder="选择日期" style="width: 100px;display: inline-block"></Date-picker>
|
||||
<i-input style="width: 100px"></i-input>
|
||||
<i-input type="text" placeholder="Username" style="width: 100px">
|
||||
<Icon type="ios-person-outline" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
<i-button type="primary">按钮</i-button>
|
||||
<i-select :model.sync="model1" style="width:200px">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</div>
|
||||
<br><br>
|
||||
<i-button type="success">按钮</i-button>
|
||||
<i-button type="warning">按钮</i-button>
|
||||
<i-button type="error">按钮</i-button>
|
||||
<i-button type="info">按钮</i-button>
|
||||
<i-button icon="ios-search" type="success"></i-button>
|
||||
<br><br>
|
||||
<div style="width:400px">
|
||||
<i-button type="error" long size="small">按钮</i-button>
|
||||
</div>
|
||||
<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>
|
||||
<h4>Vertical</h4>
|
||||
<br><br>
|
||||
|
||||
<Button-group vertical>
|
||||
<i-button>取消</i-button>
|
||||
<i-button type="primary">确定</i-button>
|
||||
</Button-group>
|
||||
<Button-group vertical>
|
||||
<i-button>取消</i-button>
|
||||
<i-button type="primary">确定</i-button>
|
||||
</Button-group>
|
||||
<Button-group vertical>
|
||||
<i-button disabled>昨日</i-button>
|
||||
<i-button disabled>今日</i-button>
|
||||
<i-button disabled>明日</i-button>
|
||||
</Button-group>
|
||||
<Button-group vertical>
|
||||
<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>
|
||||
<Button-group vertical>
|
||||
<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 vertical>
|
||||
<i-button type="primary" icon="ios-skipbackward"></i-button>
|
||||
<i-button type="primary" icon="ios-skipforward"></i-button>
|
||||
</Button-group>
|
||||
<Button-group vertical>
|
||||
<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 vertical 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" vertical 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" vertical 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" vertical 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>
|
||||
<i-button type="primary" size="small">Small</i-button>
|
||||
<br><br>
|
||||
<i-button>Default</i-button>
|
||||
<i-button disabled>Default(Disabled)</i-button>
|
||||
<br><br>
|
||||
<i-button type="primary">Primary</i-button>
|
||||
<i-button type="primary" disabled>Primary(Disabled)</i-button>
|
||||
<br><br>
|
||||
<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>
|
||||
<i-button type="ghost" shape="circle">
|
||||
<Icon type="search"></Icon>
|
||||
</i-button>
|
||||
<i-button type="ghost">
|
||||
<Icon type="search"></Icon>
|
||||
搜索
|
||||
</i-button>
|
||||
<i-button type="ghost" shape="circle" size="large">
|
||||
<Icon type="search"></Icon>
|
||||
</i-button>
|
||||
<i-button type="ghost" shape="circle" size="small">
|
||||
<Icon type="search"></Icon>
|
||||
</i-button>
|
||||
<br><br><br>
|
||||
<i-button type="primary" loading>Loading...</i-button>
|
||||
<i-button type="primary" loading size="large">Loading...</i-button>
|
||||
<i-button type="primary" loading size="small">Loading...</i-button>
|
||||
<i-button type="primary" :loading="loading" @click="toLoading">
|
||||
<span v-if="!loading">Click me!</span>
|
||||
<span v-else>Loading...</span>
|
||||
</i-button>
|
||||
<i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
|
||||
<span v-if="!loading2">Click me!</span>
|
||||
<span v-else>Loading...</span>
|
||||
</i-button>
|
||||
<h4>基本</h4>
|
||||
<Button-group size="large">
|
||||
<i-button>取消</i-button>
|
||||
<i-button type="primary">确定</i-button>
|
||||
</Button-group>
|
||||
<Button-group>
|
||||
<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>
|
||||
<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="cloud"></i-button>
|
||||
<i-button type="primary" icon="upload"></i-button>
|
||||
</Button-group>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
loading2: false,
|
||||
model6: '',
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
],
|
||||
model1: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toLoading () {
|
||||
this.loading = true;
|
||||
},
|
||||
toLoading2 () {
|
||||
this.loading2 = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<template>
|
||||
<Card :bordered="true" style="width:300px">
|
||||
<template slot="title">
|
||||
<p>放寒假的发货会计师</p>
|
||||
</template>
|
||||
<a href="#" slot="extra">More</a>
|
||||
</Card>
|
||||
<Card style="width:300px">
|
||||
<p>hello</p>
|
||||
<p>hndshf</p>
|
||||
<h3>jfds</h3>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
import { Row, Col, Card } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Row,
|
||||
iCol: Col,
|
||||
Card
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="2">
|
||||
Current Index
|
||||
<p>{{ currentIndex }}</p>
|
||||
</i-col>
|
||||
<i-col span="2">
|
||||
<p>Autoplay</p>
|
||||
<Switch :checked.sync="autoplay" size="small"></Switch>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Switch To
|
||||
<Button-group>
|
||||
<i-button @click="currentIndex = 0">0</i-button>
|
||||
<i-button @click="currentIndex = 1">1</i-button>
|
||||
<i-button @click="currentIndex = 2">2</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<i-button @click="push">Push</i-button>
|
||||
<i-button @click="remove = true">Remove Front</i-button>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
<p>Dots</p>
|
||||
<Button-group>
|
||||
<i-button @click="dots = 'inside'">Inside</i-button>
|
||||
<i-button @click="dots = 'outside'">Outside</i-button>
|
||||
<i-button @click="dots = 'none'">None</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<p>Trigger</p>
|
||||
<Button-group>
|
||||
<i-button @click="trigger = 'click'">Click</i-button>
|
||||
<i-button @click="trigger = 'hover'">Hover</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Arrow
|
||||
<Button-group>
|
||||
<i-button @click="arrow = 'hover'">Hover</i-button>
|
||||
<i-button @click="arrow = 'always'">Always</i-button>
|
||||
<i-button @click="arrow = 'never'">Never</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Height
|
||||
<i-button @click="height = 'auto'">Auto</i-button>
|
||||
<i-button @click="height = 80">Manual</i-button>
|
||||
<Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
|
||||
:current-index.sync="currentIndex"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="autoplaySpeed"
|
||||
:dots="dots"
|
||||
:trigger="trigger"
|
||||
:arrow="arrow"
|
||||
:height="height"
|
||||
@on-change="slideChange"
|
||||
easing="linear">
|
||||
<Carousel-item v-if="!remove">
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div style="height: 150px; background: #f50; position: relative">
|
||||
<p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
|
||||
<p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 居中测试</p>
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<Card style="width:350px">
|
||||
<p slot="title">
|
||||
<Icon type="ios-film-outline"></Icon>
|
||||
经典电影
|
||||
</p>
|
||||
<a href="#" slot="extra">
|
||||
<Icon type="ios-loop-strong"></Icon>
|
||||
换一换
|
||||
</a>
|
||||
<ul>
|
||||
|
||||
</ul>
|
||||
</Card>
|
||||
</Carousel-item>
|
||||
<Carousel-item style="text-align: center">
|
||||
<Icon type="checkmark" style="font-size: 5em"></Icon>
|
||||
</Carousel-item>
|
||||
<Carousel-item>test3</Carousel-item>
|
||||
<Carousel-item v-for="item in pushItem" track-by="$index">
|
||||
<Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
|
||||
</Carousel-item>
|
||||
</Carousel>
|
||||
<div style="max-height: 200px; overflow: scroll">
|
||||
<p v-for="item in log" track-by="$index">{{item}}</p>
|
||||
</div>
|
||||
|
||||
<Card style="width:350px">
|
||||
<p slot="title">
|
||||
<Icon type="ios-film-outline"></Icon>
|
||||
经典电影
|
||||
</p>
|
||||
<Carousel>
|
||||
<Carousel-item v-if="!remove">
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
|
||||
<p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item style="text-align: center">
|
||||
<Icon type="checkmark" style="font-size: 5em"></Icon>
|
||||
</Carousel-item>
|
||||
</Carousel>
|
||||
</Card>
|
||||
<Tabs>
|
||||
<Tab-pane label="标签一">
|
||||
<Carousel>
|
||||
<Carousel-item v-if="!remove">
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
|
||||
<p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item style="text-align: center">
|
||||
<Icon type="checkmark" style="font-size: 5em"></Icon>
|
||||
</Carousel-item>
|
||||
</Carousel>
|
||||
</Tab-pane>
|
||||
<Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>
|
||||
<Tab-pane label="标签三">
|
||||
<Carousel>
|
||||
<Carousel-item v-if="!remove">
|
||||
<Alert type="warning" show-icon>
|
||||
警告提示文案
|
||||
<template slot="desc">
|
||||
警告的提示描述文案警告的提示描述文案警告的提示描述文案
|
||||
</template>
|
||||
</Alert>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
|
||||
<p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
|
||||
</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item style="text-align: center">
|
||||
<Icon type="checkmark" style="font-size: 5em"></Icon>
|
||||
</Carousel-item>
|
||||
</Carousel>
|
||||
</Tab-pane>
|
||||
</Tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
currentIndex: 0,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 2000,
|
||||
remove: false,
|
||||
pushItem: [],
|
||||
arrow: 'hover',
|
||||
trigger: 'click',
|
||||
dots: 'inside',
|
||||
height: 'auto',
|
||||
log: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
push () {
|
||||
this.pushItem.push('test');
|
||||
},
|
||||
slideChange (from, to) {
|
||||
this.log.push(`From ${from} To ${to}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
{{ text }}
|
||||
<Cascader :data="data" @on-change="handleChange">
|
||||
<a href="javascript:void(0)">选择</a>
|
||||
</Cascader>
|
||||
|
||||
<Row>
|
||||
<i-col span="4">
|
||||
Disabled <Switch :checked.sync="disabled"></Switch>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<Cascader :data="data" :value.sync="value1" :disabled="disabled"></Cascader>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
disabled: false,
|
||||
text: '未选择',
|
||||
data: [{
|
||||
value: 'beijing',
|
||||
label: '北京',
|
||||
children: [
|
||||
{
|
||||
value: 'gugong',
|
||||
label: '故宫'
|
||||
},
|
||||
{
|
||||
value: 'tiantan',
|
||||
label: '天坛'
|
||||
},
|
||||
{
|
||||
value: 'wangfujing',
|
||||
label: '王府井'
|
||||
}
|
||||
]
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: '江苏',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京',
|
||||
children: [
|
||||
{
|
||||
value: 'fuzimiao',
|
||||
label: '夫子庙',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
value: 'suzhou',
|
||||
label: '苏州',
|
||||
children: [
|
||||
{
|
||||
value: 'zhuozhengyuan',
|
||||
label: '拙政园',
|
||||
},
|
||||
{
|
||||
value: 'shizilin',
|
||||
label: '狮子林',
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (value, selectedData) {
|
||||
this.text = selectedData.map(o => o.label).join(', ');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<template>
|
||||
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>
|
||||
<br>
|
||||
<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<Dropdown trigger="click">
|
||||
<a href="javascript:void(0)">
|
||||
北京小吃
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
</a>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>驴打滚</Dropdown-item>
|
||||
<Dropdown-item>炸酱面</Dropdown-item>
|
||||
<Dropdown-item>豆汁儿</Dropdown-item>
|
||||
<Dropdown placement="right-start">
|
||||
<Dropdown-item>
|
||||
北京烤鸭
|
||||
<Icon type="ios-arrow-right"></Icon>
|
||||
</Dropdown-item>
|
||||
<Dropdown-menu slot="list">
|
||||
<Dropdown-item>挂炉烤鸭</Dropdown-item>
|
||||
<Dropdown-item>焖炉烤鸭</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
<Dropdown-item>冰糖葫芦</Dropdown-item>
|
||||
</Dropdown-menu>
|
||||
</Dropdown>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
v (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<template>
|
||||
<i-form v-ref:form-validate :model="formValidate" :rules="ruleValidate" :label-width="100">
|
||||
<Form-item label="输入框" prop="input">
|
||||
<i-input :value.sync="formValidate.input" placeholder="请输入"></i-input>
|
||||
</Form-item>
|
||||
<Form-item label="Ajax：" prop="ajax">
|
||||
<div slot="label">
|
||||
<span>Ajax</span>
|
||||
<Tooltip content="基于 axios">
|
||||
<Icon type="ios-help" size="14" color="#3399ff"></Icon>
|
||||
</Tooltip>
|
||||
<span>：</span>
|
||||
</div>
|
||||
<Switch :checked.sync="formValidate.ajax"></Switch>
|
||||
</Form-item>
|
||||
<Form-item>
|
||||
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
|
||||
<i-button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
|
||||
</Form-item>
|
||||
</i-form>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formValidate: {
|
||||
input: '123',
|
||||
ajax: true
|
||||
},
|
||||
ruleValidate: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (name) {
|
||||
this.$refs[name].validate((valid) => {
|
||||
if (valid) {
|
||||
this.$Message.success('提交成功!');
|
||||
} else {
|
||||
this.$Message.error('表单验证失败!');
|
||||
}
|
||||
})
|
||||
},
|
||||
handleReset (name) {
|
||||
this.$refs[name].resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<template>
|
||||
<Input-number :max="10" :min="1" :value="1"></Input-number>
|
||||
<br><br>
|
||||
<i-input type="textarea" :autosize="true" placeholder="请输入..."></i-input>
|
||||
<i-input type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
|
||||
<i-input name="a" icon="ios-clock-outline" @on-focus="focus" @on-blur="blur" readonly style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
|
||||
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
|
||||
<i-input name="b" 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 readonly 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" type="password">
|
||||
<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>
|
||||
<i-input type="password"></i-input>
|
||||
</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)
|
||||
},
|
||||
focus () {
|
||||
this.$Message.info('focus');
|
||||
},
|
||||
blur () {
|
||||
this.$Message.info('blur');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<Menu mode="horizontal" :theme="theme1" :active-key.sync="ak">
|
||||
<Menu-item key="1">
|
||||
<Icon type="ios-paper"></Icon>
|
||||
内容管理
|
||||
</Menu-item>
|
||||
<Menu-item key="2">
|
||||
<Icon type="ios-people"></Icon>
|
||||
用户管理
|
||||
</Menu-item>
|
||||
<Submenu key="3">
|
||||
<template slot="title">
|
||||
<Icon type="stats-bars"></Icon>
|
||||
统计分析
|
||||
</template>
|
||||
<Menu-group title="使用">
|
||||
<Menu-item key="3-1">新增和启动</Menu-item>
|
||||
<Menu-item key="3-2">活跃分析</Menu-item>
|
||||
<Menu-item key="3-3">时段分析</Menu-item>
|
||||
</Menu-group>
|
||||
<Menu-group title="留存">
|
||||
<Menu-item key="3-4">用户留存</Menu-item>
|
||||
<Menu-item key="3-5">流失用户</Menu-item>
|
||||
</Menu-group>
|
||||
</Submenu>
|
||||
<Menu-item key="4">
|
||||
<Icon type="settings"></Icon>
|
||||
综合设置
|
||||
</Menu-item>
|
||||
</Menu>
|
||||
<br>
|
||||
<p>切换主题</p>
|
||||
<Radio-group :model.sync="theme1">
|
||||
<Radio value="light"></Radio>
|
||||
<Radio value="dark"></Radio>
|
||||
<Radio value="primary"></Radio>
|
||||
</Radio-group>
|
||||
<i-button @click="ak = '2'">change</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
theme1: 'light',
|
||||
ak: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<i-button @click="confirm">标准</i-button>
|
||||
<i-button @click="custom">自定义按钮文字</i-button>
|
||||
<i-button @click="async">异步关闭</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
confirm () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
onOk: () => {
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
onCancel: () => {
|
||||
this.$Message.info('点击了取消');
|
||||
}
|
||||
});
|
||||
},
|
||||
custom () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
|
||||
okText: 'OK',
|
||||
cancelText: 'Cancel'
|
||||
});
|
||||
},
|
||||
async () {
|
||||
this.$Modal.confirm({
|
||||
title: '确认对话框标题',
|
||||
content: '<p>对话框将在 2秒 后关闭</p>',
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
setTimeout(() => {
|
||||
this.$Modal.remove();
|
||||
this.$Message.info('异步关闭了对话框');
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<style lang="less">
|
||||
.vertical-center-modal{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ivu-modal{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
min-height: 2000px;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<i-button @click="modal9 = true">距离顶部 20px</i-button>
|
||||
<Modal
|
||||
title="对话框标题"
|
||||
:visible.sync="modal9"
|
||||
:style="{top: '20px'}">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<i-button @click="modal10 = true">垂直居中</i-button>
|
||||
<Modal
|
||||
title="对话框标题"
|
||||
:visible.sync="modal10"
|
||||
class-name="vertical-center-modal">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<i-button @click="instance(true)">Create Instance Scrollable</i-button>
|
||||
<i-button @click="instance(false)">Create Instance Non-scrollable</i-button>
|
||||
<div class="placeholder"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
modal9: false,
|
||||
modal10: false,
|
||||
modal1: false,
|
||||
scrollable: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
this.$nextTick(() => this.modal1 = true);
|
||||
this.$Message.info('点击了确定');
|
||||
},
|
||||
cancel () {
|
||||
this.$Message.info('点击了取消');
|
||||
},
|
||||
instance (scrollable) {
|
||||
this.$Modal.info({
|
||||
title: 'test',
|
||||
content: 'test',
|
||||
scrollable: scrollable
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<template>
|
||||
<i-button @click="pop">Pop</i-button>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
pop () {
|
||||
for (let i = 0; i < 6; i++) {
|
||||
setTimeout(() => {
|
||||
this.$Notice.open({
|
||||
title: 'test',
|
||||
duration: 1.5 + i
|
||||
});
|
||||
}, i * 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<Page :total="1000" show-sizer show-elevator show-total class="classr" :style="{float: 'right'}" @on-page-size-change="pc"></Page>
|
||||
<br><br>
|
||||
<Page :total="1000" show-sizer show-elevator show-total size="small" class="classr2"></Page>
|
||||
<br><br>
|
||||
<Page :current="2" :total="50" simple></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Page } from 'iview';
|
||||
export default {
|
||||
components: { Page },
|
||||
methods: {
|
||||
pc (page) {
|
||||
console.log(page)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<template>
|
||||
<div style="margin: 100px">
|
||||
<Poptip trigger="hover" placement="bottom" title="提示标题" content="提示内容">
|
||||
<i-button>hover 激活</i-button>
|
||||
</Poptip>
|
||||
<Poptip title="提示标题" placement="bottom" content="提示内容">
|
||||
<i-button>click 激活</i-button>
|
||||
</Poptip>
|
||||
<Poptip trigger="focus" title="提示标题" content="提示内容">
|
||||
<i-input type="textarea"></i-input>
|
||||
<!--<i-button>focus 激活</i-button>-->
|
||||
</Poptip>
|
||||
<Poptip trigger="focus" placement="bottom" title="提示标题" content="提示内容">
|
||||
<i-input></i-input>
|
||||
</Poptip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<Radio-group :model.sync="phone" vertical>
|
||||
<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>
|
||||
<i-button @click="activeKey = '2'">换</i-button>
|
||||
</div>
|
||||
<Radio :checked.sync="radio">Radio</Radio>
|
||||
<i-button @click="radio = !radio">change radio</i-button>
|
||||
<br>
|
||||
<br>
|
||||
<Radio-group :model.sync="phone" type="button" vertical>
|
||||
<Radio value="apple">
|
||||
<Icon type="social-apple"></Icon>
|
||||
<span>Apple</span>
|
||||
</Radio>
|
||||
<Radio value="android">
|
||||
<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" type="button">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
|
||||
<Radio-group :model.sync="animal" type="button">
|
||||
<Radio value="金斑蝶" disabled></Radio>
|
||||
<Radio value="爪哇犀牛" disabled></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<br><br>
|
||||
<Radio-group :model.sync="animal" type="button" size="large">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<Radio-group :model.sync="animal" type="button">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<Radio-group :model.sync="animal" type="button" size="small">
|
||||
<Radio value="金斑蝶"></Radio>
|
||||
<Radio value="爪哇犀牛"></Radio>
|
||||
<Radio value="印度黑羚"></Radio>
|
||||
</Radio-group>
|
||||
<br><br><br><br>
|
||||
<Checkbox :checked.sync="radio">Checkbox</Checkbox>
|
||||
<br><br>
|
||||
<Checkbox-group :model="social">
|
||||
<Checkbox value="twitter">
|
||||
<Icon type="social-twitter"></Icon>
|
||||
<span>Twitter</span>
|
||||
</Checkbox>
|
||||
<Checkbox value="facebook">
|
||||
<Icon type="social-facebook"></Icon>
|
||||
<span>Facebook</span>
|
||||
</Checkbox>
|
||||
<Checkbox value="github">
|
||||
<Icon type="social-github"></Icon>
|
||||
<span>Github</span>
|
||||
</Checkbox>
|
||||
<Checkbox value="snapchat">
|
||||
<Icon type="social-snapchat"></Icon>
|
||||
<span>Snapchat</span>
|
||||
</Checkbox>
|
||||
</Checkbox-group>
|
||||
<br><br>
|
||||
<Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
|
||||
<Checkbox-group :model="disabledGroup">
|
||||
<Checkbox value="香蕉" disabled></Checkbox>
|
||||
<Checkbox value="苹果" disabled></Checkbox>
|
||||
<Checkbox value="西瓜"></Checkbox>
|
||||
</Checkbox-group>
|
||||
<br><br>
|
||||
<Switch @on-change="change"></Switch>
|
||||
<br><br>
|
||||
<Switch>
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</Switch>
|
||||
<br><br>
|
||||
<Switch>
|
||||
<Icon type="android-done" slot="open"></Icon>
|
||||
<Icon type="android-close" slot="close"></Icon>
|
||||
</Switch>
|
||||
<Switch disabled></Switch>
|
||||
<Switch size="small"></Switch>
|
||||
<br><br>
|
||||
<Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
|
||||
<Input-number :value="2" size="small"></Input-number>
|
||||
<Input-number :value="2"></Input-number>
|
||||
<Input-number :value="2" size="large"></Input-number>
|
||||
<br><br>
|
||||
<Breadcrumb>
|
||||
<Breadcrumb-item href="/">Home</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb>
|
||||
<Breadcrumb-item href="/">
|
||||
<Icon type="ios-home-outline"></Icon> Home
|
||||
</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">
|
||||
<Icon type="social-buffer-outline"></Icon> Components
|
||||
</Breadcrumb-item>
|
||||
<Breadcrumb-item>
|
||||
<Icon type="pound"></Icon> Breadcrumb
|
||||
</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb separator=">">
|
||||
<Breadcrumb-item href="/">Home</Breadcrumb-item>
|
||||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
|
||||
<Breadcrumb-item href="/">Home</Breadcrumb-item>
|
||||
<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, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
|
||||
|
||||
const RadioGroup = Radio.Group;
|
||||
const Panel = Collapse.Panel;
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
const BreadcrumbItem = Breadcrumb.Item;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Alert,
|
||||
Icon,
|
||||
Collapse,
|
||||
Panel,
|
||||
iButton,
|
||||
Checkbox,
|
||||
CheckboxGroup,
|
||||
Switch,
|
||||
InputNumber,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
LoadingBar
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
single: false,
|
||||
radio: false,
|
||||
radioGroup: '段模',
|
||||
activeKey: [1,2],
|
||||
phone: 'apple',
|
||||
animal: '爪哇犀牛',
|
||||
social: ['facebook', 'github'],
|
||||
disabledSingle: true,
|
||||
disabledGroup: ['苹果']
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
changeGroup (data) {
|
||||
console.log(data);
|
||||
},
|
||||
closed (data) {
|
||||
console.log(data)
|
||||
},
|
||||
change (status) {
|
||||
console.log(status);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
LoadingBar.start();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="12">
|
||||
<Rate show-text :value.sync="valueText"></Rate>
|
||||
</i-col>
|
||||
<i-col span="12">
|
||||
<Rate show-text :value.sync="valueCustomText">
|
||||
<span style="color: #f5a623">{{ valueCustomText }}</span>
|
||||
</Rate>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {
|
||||
valueText: 3,
|
||||
valueCustomText: 3.8
|
||||
};
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<template>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model111" filterable>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model112" filterable>
|
||||
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12">
|
||||
<i-select :model.sync="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
</template>
|
||||
<script>
|
||||
const cityList = [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList1: cityList,
|
||||
model111: '',
|
||||
|
||||
cityList2: [],
|
||||
model112: 'beijing',
|
||||
|
||||
model12: []
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.model111 = 'hangzhou'
|
||||
setTimeout(()=>{
|
||||
this.cityList2 = cityList
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div style="width: 140px;margin:100px;">
|
||||
{{ value }}
|
||||
<Slider @on-change="change" @on-input="input" :step="15"></Slider>
|
||||
<Slider :value="40" :tip-format="format"></Slider>
|
||||
<Slider :value.sync="value" show-input show-stops range @on-change="change" @on-input="input" :step="13"></Slider>
|
||||
<Slider :max="10"></Slider>
|
||||
<Slider :step="13"></Slider>
|
||||
<Slider :step="13" :max="60"></Slider>
|
||||
<Icon type="checkmark-circled" size="40" color="#f60"></Icon>
|
||||
<p>附近的首付款是东方红看就是</p>
|
||||
<div class="ivu-article">
|
||||
<a href="http://www.iviewui.com" target="_blank">iView</a>
|
||||
</div>
|
||||
<Slider :value="75"></Slider>
|
||||
<Slider :value="[20, 50]" range></Slider>
|
||||
<Slider :value="[20, 50]" show-tip="always"></Slider>
|
||||
<Slider :value="[20, 50]" show-tip="hover"></Slider>
|
||||
<Slider :value="[20, 50]" show-tip="never"></Slider>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Slider, Icon } from 'iview';
|
||||
export default {
|
||||
components: { Slider, Icon },
|
||||
data () {
|
||||
return {
|
||||
value: [20, 50]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
format (val) {
|
||||
return null;
|
||||
return `进度：${val}%`
|
||||
},
|
||||
change (data) {
|
||||
console.log(data)
|
||||
},
|
||||
input (value) {
|
||||
console.log(value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
<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, iButton } from 'iview';
|
||||
|
||||
const Step = Steps.Step;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Page,
|
||||
Steps,
|
||||
Step,
|
||||
iButton
|
||||
},
|
||||
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>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<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>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<template>
|
||||
<i-table highlight-row border :content="self" :columns="columns7" :data="data6"></i-table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
self: this,
|
||||
columns7: [
|
||||
{
|
||||
type: 'selection',
|
||||
width: 60,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
render (row, column, index) {
|
||||
return `<Icon type="person"></Icon> <strong>${row.name}</strong>`;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
key: 'age',
|
||||
sortable: true,
|
||||
sortMethod: function (a, b, type) {
|
||||
if (type === 'asc') {
|
||||
return a < b ? 1 : -1;
|
||||
} else if (type === 'desc') {
|
||||
return a > b ? 1 : -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
align: 'center',
|
||||
render (row, column, index) {
|
||||
// return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
|
||||
return `<Poptip width="250" confirm placement="left" title="您确认删除吗？" @on-ok="deleteProject(${index})">
|
||||
<i-button size="small" type="error">删除</i-button>
|
||||
</Poptip>`
|
||||
}
|
||||
}
|
||||
],
|
||||
data6: [
|
||||
{
|
||||
name: '王小明',
|
||||
age: 18,
|
||||
address: '北京市朝阳区芍药居',
|
||||
_highlight: true,
|
||||
_checked: true,
|
||||
_disabled: false
|
||||
},
|
||||
{
|
||||
name: '张小刚',
|
||||
age: 25,
|
||||
address: '北京市海淀区西二旗',
|
||||
_checked: false,
|
||||
_disabled: true
|
||||
},
|
||||
{
|
||||
name: '李小红',
|
||||
age: 30,
|
||||
address: '上海市浦东新区世纪大道',
|
||||
_checked: true,
|
||||
_disabled: true
|
||||
},
|
||||
{
|
||||
name: '周小伟',
|
||||
age: 26,
|
||||
address: '深圳市南山区深南大道',
|
||||
_checked: false,
|
||||
_disabled: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show (index) {
|
||||
this.$Modal.info({
|
||||
title: '用户信息',
|
||||
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
|
||||
})
|
||||
},
|
||||
remove (index) {
|
||||
this.data6.splice(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<Tabs active-key="key1">
|
||||
<Tab-pane label="标签一" key="key1">标签一的内容</Tab-pane>
|
||||
<Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
|
||||
<Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
|
||||
</Tabs>
|
||||
<Tabs type="card" >
|
||||
<Tab-pane label="标签一">标签一的内容</Tab-pane>
|
||||
<Tab-pane label="标签二" :closable="true">标签二的内容</Tab-pane>
|
||||
<Tab-pane label="标签三">标签三的内容</Tab-pane>
|
||||
</Tabs>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
<template>
|
||||
<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>
|
||||
<br><br>
|
||||
<Tag type="border" color="yellow" closable @click="clickTag" @on-close="clickTagClose">标签一</Tag>
|
||||
</template>
|
||||
<script>
|
||||
import { Tag, Modal, iButton } from 'iview';
|
||||
export default {
|
||||
components: { Tag, Modal, iButton },
|
||||
data () {
|
||||
return {
|
||||
modal1: false,
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
setTimeout(() => {
|
||||
this.modal1 = false;
|
||||
}, 2000);
|
||||
},
|
||||
clickTag() {
|
||||
console.log('click tag');
|
||||
},
|
||||
clickTagClose() {
|
||||
console.log('click tag close-icon');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<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" @on-popper-hide="hide">
|
||||
<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, Message } from 'iview';
|
||||
export default {
|
||||
components: { Tooltip, iButton },
|
||||
methods: {
|
||||
hide () {
|
||||
Message.info('hide')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<Transfer
|
||||
:data="data2"
|
||||
:target-keys="targetKeys2"
|
||||
filterable
|
||||
:render-format="rf"
|
||||
:filter-method="filterMethod"
|
||||
@on-change="handleChange2"></Transfer>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
data2: this.getMockData(),
|
||||
targetKeys2: this.getTargetKeys()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getMockData () {
|
||||
let mockData = [];
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
mockData.push({
|
||||
key: i.toString(),
|
||||
label: '内容' + i,
|
||||
description: '内容' + i + '的描述信息',
|
||||
disabled: Math.random() * 3 < 1
|
||||
});
|
||||
}
|
||||
return mockData;
|
||||
},
|
||||
getTargetKeys () {
|
||||
return this.getMockData()
|
||||
.filter(() => Math.random() * 2 > 1)
|
||||
.map(item => item.key);
|
||||
},
|
||||
handleChange2 (newTargetKeys) {
|
||||
this.targetKeys2 = newTargetKeys;
|
||||
},
|
||||
filterMethod (data, query) {
|
||||
return data.label.indexOf(query) > -1;
|
||||
},
|
||||
rf (data) {
|
||||
return '<i class="ivu-icon ivu-icon-alert"></i>' + data.label;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<Tree
|
||||
:data.sync="treeData"
|
||||
:show-checkbox="true"
|
||||
:multiple="true"
|
||||
@on-select-change="selectFn"
|
||||
@on-check-change="checkFn"></Tree>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: function() {
|
||||
return {
|
||||
treeData: [{
|
||||
expand: true,
|
||||
title: 'parent 1',
|
||||
selected: false,
|
||||
children: [{
|
||||
title: 'parent 1-0',
|
||||
expand: true,
|
||||
disabled: true,
|
||||
children: [{
|
||||
title: 'leaf',
|
||||
disableCheckbox: true
|
||||
}, {
|
||||
title: 'leaf',
|
||||
}]
|
||||
}, {
|
||||
title: 'parent 1-1',
|
||||
checked: true,
|
||||
children: [{
|
||||
title: '<span style="color: red">sss</span>',
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectFn(data){
|
||||
console.log(data);
|
||||
},
|
||||
checkFn(data){
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-upload-list" v-for="item in uploadList">
|
||||
<template v-if="item.status === 'finished'">
|
||||
<img :src="item.url">
|
||||
<div class="demo-upload-list-cover">
|
||||
<Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
|
||||
<Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
|
||||
</template>
|
||||
</div>
|
||||
<Upload
|
||||
v-ref:upload
|
||||
:show-upload-list="false"
|
||||
:default-file-list="defaultList"
|
||||
:on-success="handleSuccess"
|
||||
:format="['jpg','jpeg','png']"
|
||||
:max-size="2048"
|
||||
:on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize"
|
||||
:before-upload="handleBeforeUpload"
|
||||
multiple
|
||||
type="drag"
|
||||
action="//jsonplaceholder.typicode.com/posts/"
|
||||
style="display: inline-block;width:58px;">
|
||||
<div style="width: 58px;height:58px;line-height: 58px;">
|
||||
<Icon type="camera" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
<Modal title="查看图片" :visible.sync="visible">
|
||||
<img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
defaultList: [
|
||||
{
|
||||
'name': 'a42bdcc1178e62b4694c830f028db5c0',
|
||||
'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
|
||||
},
|
||||
{
|
||||
'name': 'bc7521e033abdd1e92222d733590f104',
|
||||
'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
|
||||
}
|
||||
],
|
||||
imgName: '',
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
uploadList () {
|
||||
return this.$refs.upload ? this.$refs.upload.fileList : [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleView (name) {
|
||||
this.imgName = name;
|
||||
this.visible = true;
|
||||
},
|
||||
handleRemove (file) {
|
||||
// 从 upload 实例删除数据
|
||||
const fileList = this.$refs.upload.fileList;
|
||||
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
|
||||
},
|
||||
handleSuccess (res, file) {
|
||||
// 因为上传过程为实例，这里模拟添加 url
|
||||
file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
|
||||
file.name = '7eb99afb9d5f317c912f08b5212fd69a';
|
||||
},
|
||||
handleFormatError (file) {
|
||||
this.$Notice.warning({
|
||||
title: '文件格式不正确',
|
||||
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
|
||||
});
|
||||
},
|
||||
handleMaxSize (file) {
|
||||
this.$Notice.warning({
|
||||
title: '超出文件大小限制',
|
||||
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
|
||||
});
|
||||
},
|
||||
handleBeforeUpload () {
|
||||
const check = this.uploadList.length < 5;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: '最多只能上传 5 张图片。'
|
||||
});
|
||||
}
|
||||
return check;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.demo-upload-list{
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
margin-right: 4px;
|
||||
}
|
||||
.demo-upload-list img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.demo-upload-list-cover{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
.demo-upload-list:hover .demo-upload-list-cover{
|
||||
display: block;
|
||||
}
|
||||
.demo-upload-list-cover i{
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
margin: 0 2px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue