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

add a dialog to fixed $Modal can not use temporarily

Browse source 
add a dialog to fixed $Modal can not use temporarily
This commit is contained in:
梁灏 2016-11-15 09:42:02 +08:00
parent eaaea36a03
commit c571d9ec2b
8 changed files with 489 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

2
test/main.js
View file

@ -4,8 +4,10 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
import iView from '../src/index';
Vue.use(VueRouter);
Vue.use(iView);
// 开启debug模式
Vue.config.debug = true;

148
test/routers/message.vue
View file

@ -1,124 +1,42 @@
<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>
<i-button @click="instance('info')">消息</i-button>
<i-button @click="instance('success')">成功</i-button>
<i-button @click="instance('warning')">警告</i-button>
<i-button @click="instance('error')">错误</i-button>
</template>
<script>
import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
export default {
components: {
Message,
iButton,
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);
instance (type) {
const title = '对话框的标题';
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
switch (type) {
case 'info':
this.$Modal.info({
title: title,
content: content
});
break;
case 'success':
this.$Modal.success({
title: title,
content: content
});
break;
case 'warning':
this.$Modal.warning({
title: title,
content: content
});
break;
case 'error':
this.$Modal.error({
title: title,
content: content
});
break;
}
}
},
ready () {
// Message.config({
// top: 50,
// duration: 8
// });
}
}
</script>

22
test/routers/slider.vue
View file

@ -1,17 +1,19 @@
<template>
<div style="width: 400px;margin:100px;">
{{ value }}
<Slider @on-change="change" :step="15"></Slider>
<Slider :value="40" :tip-format="format"></Slider>
<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
<div style="width: 140px;margin:100px;">
<!--{{ value }}-->
<!--<Slider @on-change="change" :step="15"></Slider>-->
<!--<Slider :value="40" :tip-format="format"></Slider>-->
<!--<Slider :value.sync="value" show-input show-stops range @on-change="change" :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>
<!--<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>-->
</div>
</template>
<script>