blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

popup component demo

Browse Source
This commit is contained in:
cookfront 2017-03-09 20:29:41 +08:00
parent da86a0c214
commit 2fe99d031a
10 changed files with 219 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/webpack.config.js
View File

@ -43,7 +43,8 @@ module.exports = {
'zanui': path.join(__dirname, '..'),
'src': path.join(__dirname, '../src'),
'packages': path.join(__dirname, '../packages'),
'lib': path.join(__dirname, '../lib')
'lib': path.join(__dirname, '../lib'),
'components': path.join(__dirname, '../docs/components')
}
},
module: {

19
docs/components/mobile-computed.js Normal file
View File

@ -0,0 +1,19 @@
import MobilePopup from 'components/mobile-popup.vue';
export default {
components: {
MobilePopup
},
computed: {
mobileUrl() {
return '/examples.html' + location.hash;
}
},
data() {
return {
mobileShow: false
};
}
};

45
docs/components/mobile-popup.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<zan-popup v-model="currentValue">
<div class="mobile-popup">
<iframe :src="url" class="mobile-popup-iframe"></iframe>
</div>
</zan-popup>
</template>
<script>
export default {
props: {
url: String,
value: {}
},
data() {
return {
currentValue: this.value
};
},
watch: {
currentValue(val) {
this.$emit('input', val);
},
value(val) {
console.log(val);
this.currentValue = val;
}
}
};
</script>
<style>
.mobile-popup {
width: 380px;
height: 500px;
border: 5px solid #e5e5e5;
}
.mobile-popup-iframe {
width: 100%;
height: 500px;
}
</style>

19
docs/examples-dist/dialog.vue
View File

@ -6,12 +6,29 @@
</example-block></section></template>
<style>
@component-namespace demo {
@b dialog {
.zan-button {
margin: 15px;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
import { Dialog } from 'src/index';
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
computed: {
mobileUrl() {
return '/examples.html' + location.hash;
}
},
methods: {
handleAlertClick() {
Dialog.alert({

21
docs/examples-dist/field.vue
View File

@ -1,6 +1,6 @@
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username"></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
</zan-cell-group>
@ -10,12 +10,25 @@
<zan-field type="text" placeholder="请输入用户名"></zan-field>
</zan-cell-group>
</example-block><example-block title="监听change事件">
</example-block><example-block title="禁用的输入框">
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
<zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
</zan-cell-group>
</example-block><example-block title="错误的输入框">
<zan-cell-group>
<zan-field label="用户名：" type="text" placeholder="请输入用户名" error=""></zan-field>
</zan-cell-group>
</example-block></section></template>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
export default {
data() {
return {
username: 'zhangmin'
};
}
};
</script>

33
docs/examples-dist/icon.vue Normal file
View File

@ -0,0 +1,33 @@
<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
<zan-icon name="album"></zan-icon>
<zan-icon name="arrow"></zan-icon>
<zan-icon name="camera"></zan-icon>
<zan-icon name="certificate"></zan-icon>
<zan-icon name="check"></zan-icon>
<zan-icon name="checked"></zan-icon>
<zan-icon name="close"></zan-icon>
<zan-icon name="gift"></zan-icon>
<zan-icon name="home"></zan-icon>
<zan-icon name="location"></zan-icon>
<zan-icon name="message"></zan-icon>
<zan-icon name="send"></zan-icon>
<zan-icon name="shopping-cart"></zan-icon>
<zan-icon name="sign"></zan-icon>
<zan-icon name="store"></zan-icon>
<zan-icon name="topay"></zan-icon>
<zan-icon name="tosend"></zan-icon>
</example-block></section></template>
<style>
@component-namespace demo {
@b icon {
.zan-icon {
margin: 10px;
font-size: 45px;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>

31
docs/examples-dist/popup.vue
View File

@ -1,9 +1,9 @@
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
<div class="zan-row">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
<zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
更新成功
</zan-popup>
<div class="zan-row">
@ -29,6 +29,7 @@
</example-block></section></template>
<style>
@component-namespace demo {
@ -40,16 +41,36 @@
padding: 20px;
}
.zan-popup-2 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
}
.zan-popup-4 {
width: 60%;
height: 200px;
}
.zan-button {
margin: 15px;
}
}
}
</style>
<script>
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
data() {
return {
popupShow1: false,
@ -67,12 +88,6 @@ export default {
}, 2000);
}
}
},
methods: {
handlePopupButtonClick() {
this.popupShow4 = true;
}
}
};
</script>

9
docs/examples-docs/actionsheet.md
View File

@ -17,7 +17,11 @@
</style>
<script>
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
data() {
return {
show1: false,
@ -87,6 +91,11 @@ export default {
```
:::
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |

25
docs/examples-docs/dialog.md
View File

@ -1,7 +1,26 @@
<style>
@component-namespace demo {
@b dialog {
.zan-button {
margin: 15px;
}
}
}
</style>
<script>
import { Dialog } from 'src/index';
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
computed: {
mobileUrl() {
return '/examples.html' + location.hash;
}
},
methods: {
handleAlertClick() {
Dialog.alert({
@ -66,6 +85,12 @@ export default {
```
:::
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |

36
docs/examples-docs/popup.md
View File

@ -8,16 +8,36 @@
padding: 20px;
}
.zan-popup-2 {
line-height: 50px;
text-align: center;
background-color: rgba(0, 0, 0, 0.701961);
color: #fff;
}
.zan-popup-3 {
width: 100%;
height: 100%;
}
.zan-popup-4 {
width: 60%;
height: 200px;
}
.zan-button {
margin: 15px;
}
}
}
</style>
<script>
import MobileComputed from 'components/mobile-computed';
export default {
mixins: [MobileComputed],
data() {
return {
popupShow1: false,
@ -35,12 +55,6 @@ export default {
}, 2000);
}
}
},
methods: {
handlePopupButtonClick() {
this.popupShow4 = true;
}
}
};
</script>
@ -52,10 +66,10 @@ export default {
:::demo 基础用法
```html
<div class="zan-row">
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
</div>
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
<zan-button @click="handlePopupButtonClick" type="primary">从中间弹出popup</zan-button>
更新成功
</zan-popup>
<div class="zan-row">
@ -101,9 +115,15 @@ export default {
}
};
</script>
```
:::
点击以下按钮查看手机端效果：
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |