vant components
This commit is contained in:
+30
-30
@@ -1,11 +1,11 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
.zan-popup-1 {
|
||||
.van-popup-1 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
@@ -13,22 +13,22 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-4,
|
||||
.zan-popup-5 {
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`,以下**组件注册**就可以忽略了,因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`,以下**组件注册**就可以忽略了,因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@@ -90,8 +90,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Popup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/popup.css';
|
||||
import { Popup } from 'vant';
|
||||
import 'vant/lib/vant-css/popup.css';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
@@ -101,11 +101,11 @@ Vue.component(Popup.name, Popup);
|
||||
如果你只是想在某个组件中使用,你可以在对应组件中注册`Popup`组件,这样只能在你注册的组件中使用`Popup`:
|
||||
|
||||
```js
|
||||
import { Popup } from '@youzan/zanui-vue';
|
||||
import { Popup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-popup': Popup
|
||||
'van-popup': Popup
|
||||
}
|
||||
};
|
||||
```
|
||||
@@ -118,10 +118,10 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="popupShow1 = true">从中间弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
|
||||
<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
|
||||
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</zan-popup>
|
||||
</van-popup>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -141,26 +141,26 @@ export default {
|
||||
|
||||
:::demo 从不同位置弹出菜单
|
||||
```html
|
||||
<zan-button @click="popupShow2 = true;">从下方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow2" position="bottom" class="zan-popup-2">
|
||||
<zan-button @click="showDialog">弹出dialog</zan-button>
|
||||
</zan-popup>
|
||||
<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
|
||||
<van-button @click="showDialog">弹出dialog</van-button>
|
||||
</van-popup>
|
||||
|
||||
<zan-button @click="popupShow3 = true">从上方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
|
||||
<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
</van-popup>
|
||||
|
||||
<zan-button @click="popupShow4 = true">从右方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow4" position="right" class="zan-popup-4" :overlay="false">
|
||||
<zan-button @click.native="popupShow4 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
|
||||
<van-button @click.native="popupShow4 = false">关闭 popup</van-button>
|
||||
</van-popup>
|
||||
|
||||
|
||||
<zan-button @click="popupShow5 = true">从左方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow5" position="left" class="zan-popup-5" :overlay="false">
|
||||
<zan-button @click.native="popupShow5 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
|
||||
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
|
||||
<van-button @click.native="popupShow5 = false">关闭 popup</van-button>
|
||||
</van-popup>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -189,7 +189,7 @@ export default {
|
||||
|
||||
点击以下按钮查看手机端效果:
|
||||
|
||||
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### API
|
||||
|
||||
Reference in New Issue
Block a user