mirror of
https://github.com/youzan/vant.git
synced 2025-10-18 09:24:25 +00:00
z- to zan-
This commit is contained in:
cookfront
@@ -5,15 +5,15 @@
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button>default</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button>default</zan-button>
|
||||
</div>
|
||||
<div class="z-button-1">
|
||||
<z-button type="primary">primary</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="primary">primary</zan-button>
|
||||
</div>
|
||||
<div class="z-button-1">
|
||||
<z-button type="danger">danger</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="danger">danger</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -21,9 +21,9 @@
|
||||
### 禁用状态
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button disabled>diabled</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button disabled>diabled</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -33,20 +33,20 @@
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button size="large">large</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-button-group" :style="{ width: '50%' }">
|
||||
<div class="z-button-3">
|
||||
<z-button type="primary">normal</z-button>
|
||||
<div class="zan-button-group" :style="{ width: '50%' }">
|
||||
<div class="zan-button-3">
|
||||
<zan-button type="primary">normal</zan-button>
|
||||
</div>
|
||||
<div class="z-button-3">
|
||||
<z-button size="small">small</z-button>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</div>
|
||||
<div class="z-button-3">
|
||||
<z-button size="mini">mini</z-button>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,9 +57,9 @@
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -69,10 +69,10 @@
|
||||
一组按钮。
|
||||
|
||||
```html
|
||||
<div class="z-button-group">
|
||||
<z-button type="primary" size="small">确认付款</z-button>
|
||||
<z-button size="small">确认收货</z-button>
|
||||
<z-button size="small">取消订单</z-button>
|
||||
<div class="zan-button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
```html
|
||||
<z-card
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</z-card>
|
||||
</zan-card>
|
||||
|
||||
```
|
||||
|
||||
@@ -18,23 +18,23 @@
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
```html
|
||||
<z-card
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</z-card>
|
||||
</zan-card>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@@ -21,10 +21,10 @@ export default {
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" value="单元格1内容"></z-cell>
|
||||
<z-cell title="单元格2" value="单元格2内容"></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 标题带描述信息
|
||||
@@ -32,10 +32,10 @@ export default {
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
|
||||
<z-cell title="单元格2" label="描述信息"></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 带图标
|
||||
@@ -43,10 +43,10 @@ export default {
|
||||
传入`icon`属性。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||
<z-cell title="线下门店" icon="location"></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 可点击的链接
|
||||
@@ -54,10 +54,10 @@ export default {
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
@@ -65,15 +65,15 @@ export default {
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="z-cell-text">起码运动馆</span>
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
</template>
|
||||
</z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@@ -31,9 +31,9 @@ export default {
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<z-button @click="handleAlertClick">alert</z-button>
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
<z-button @click="handleConfirmClick">confirm</z-button>
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
|
||||
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
|
||||
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 无label的输入框
|
||||
@@ -19,9 +19,9 @@
|
||||
不传入`label`属性即可。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 监听change事件
|
||||
@@ -29,9 +29,9 @@
|
||||
监听组件的`change`事件。
|
||||
|
||||
```html
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@@ -5,28 +5,28 @@
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</z-card>
|
||||
<div class="z-panel-sum">
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
</z-panel>
|
||||
</zan-panel>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
@@ -34,32 +34,32 @@
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
```html
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</z-card>
|
||||
<div class="z-panel-sum">
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="z-panel-buttons" slot="footer">
|
||||
<z-button size="small">按钮一</z-button>
|
||||
<z-button size="small" type="danger">按钮二</z-button>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
</div>
|
||||
</z-panel>
|
||||
</zan-panel>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
@@ -3,33 +3,33 @@
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</z-popup>
|
||||
</zan-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</z-popup>
|
||||
</zan-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
|
||||
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
|
||||
</z-popup>
|
||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
一些内容
|
||||
</z-popup>
|
||||
</zan-popup>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@@ -13,8 +13,8 @@ export default {
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<z-radio name="1" v-model="radio1">单选框1</z-radio>
|
||||
<z-radio name="2" v-model="radio1">单选框2</z-radio>
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -30,8 +30,8 @@ export default {
|
||||
### 禁用状态
|
||||
|
||||
```html
|
||||
<z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
|
||||
<z-radio name="2" v-model="radio2" disabled>选中且禁用</z-radio>
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -47,10 +47,10 @@ export default {
|
||||
### radio组
|
||||
|
||||
```html
|
||||
<z-radio-group v-model="radio3">
|
||||
<z-radio name="1">单选框1</z-radio>
|
||||
<z-radio name="2">单选框2</z-radio>
|
||||
</z-radio-group>
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@@ -66,12 +66,12 @@ export default {
|
||||
### 与Cell组件一起使用
|
||||
|
||||
```html
|
||||
<z-radio-group v-model="radio4">
|
||||
<z-cell-group>
|
||||
<z-cell><z-radio name="1">单选框1</z-radio></z-cell>
|
||||
<z-cell><z-radio name="2">单选框2</z-radio></z-cell>
|
||||
</z-cell-group>
|
||||
</z-radio-group>
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@@ -2,55 +2,55 @@
|
||||
<div class="page-button">
|
||||
<h1 class="page-title">Button</h1>
|
||||
<h2 class="page-sub-title">按钮功能</h2>
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button>default</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button>default</zan-button>
|
||||
</div>
|
||||
<div class="z-button-1">
|
||||
<z-button type="primary">primary</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="primary">primary</zan-button>
|
||||
</div>
|
||||
<div class="z-button-1">
|
||||
<z-button type="danger">danger</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="danger">danger</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button disabled>diabled</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button disabled>diabled</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">按钮尺寸</h2>
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button size="large">large</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-3">
|
||||
<z-button type="primary">normal</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-3">
|
||||
<zan-button type="primary">normal</zan-button>
|
||||
</div>
|
||||
<div class="z-button-3">
|
||||
<z-button size="small">small</z-button>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</div>
|
||||
<div class="z-button-3">
|
||||
<z-button size="mini">mini</z-button>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">自定义按钮标签</h2>
|
||||
<div class="z-button-group">
|
||||
<div class="z-button-1">
|
||||
<z-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</z-button>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">button group</h2>
|
||||
<div class="z-button-group">
|
||||
<z-button type="primary" size="small">确认付款</z-button>
|
||||
<z-button size="small">确认收货</z-button>
|
||||
<z-button size="small">取消订单</z-button>
|
||||
<div class="zan-button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -63,7 +63,7 @@
|
||||
}
|
||||
@component-namespace z {
|
||||
@b button-group {
|
||||
.z-button-1 {
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,30 +3,30 @@
|
||||
<h1 class="page-title">Card</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-card
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</z-card>
|
||||
</zan-card>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<z-card
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</z-card>
|
||||
</zan-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,39 +3,39 @@
|
||||
<h1 class="page-title">Cell</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" value="单元格1内容"></z-cell>
|
||||
<z-cell title="单元格2" value="单元格2内容"></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">标题带描述信息</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></z-cell>
|
||||
<z-cell title="单元格2" label="描述信息"></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">带图标</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" icon="home"></z-cell>
|
||||
<z-cell title="线下门店" icon="location"></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">可点击的链接</h2>
|
||||
<z-cell-group>
|
||||
<z-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<z-cell-group>
|
||||
<z-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="z-cell-text">起码运动馆</span>
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
</template>
|
||||
</z-cell>
|
||||
<z-cell title="线下门店" icon="location" url="http://youzan.com" is-link></z-cell>
|
||||
</z-cell-group>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<div class="page-dialog">
|
||||
<h1 class="page-title">Dialog</h1>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="handleAlertClick">点击我打开alert提示框</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
|
||||
</div>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="handleConfirmClick">点击我打开confirm提示框</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -47,7 +47,7 @@ export default {
|
||||
@b dialog {
|
||||
padding: 0 15px;
|
||||
|
||||
.z-button-1 {
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,21 +3,21 @@
|
||||
<h1 class="page-title">Field</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名"></z-field>
|
||||
<z-field type="password" label="密码：" placeholder="请输入密码"></z-field>
|
||||
<z-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></z-field>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">无label的输入框</h2>
|
||||
<z-cell-group>
|
||||
<z-field type="text" placeholder="请输入用户名"></z-field>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">监听change事件</h2>
|
||||
<z-cell-group>
|
||||
<z-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></z-field>
|
||||
</z-cell-group>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,61 +3,61 @@
|
||||
<h1 class="page-title">Panel</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</z-card>
|
||||
<div class="z-panel-sum">
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
</z-panel>
|
||||
</zan-panel>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<z-panel title="标题" desc="标题描述" status="状态">
|
||||
<z-card
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="z-card__row" slot="title">
|
||||
<h4 class="z-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="z-card__price">¥ 2.00</span>
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="z-card__row" slot="desc">
|
||||
<h4 class="z-card__desc">商品sku</h4>
|
||||
<span class="z-card__num">x 2</span>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="z-card__footer" slot="footer">
|
||||
<z-button size="mini">按钮一</z-button>
|
||||
<z-button size="mini">按钮二</z-button>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</z-card>
|
||||
<div class="z-panel-sum">
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="z-panel-buttons" slot="footer">
|
||||
<z-button size="small">按钮一</z-button>
|
||||
<z-button size="small" type="danger">按钮二</z-button>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
</div>
|
||||
</z-panel>
|
||||
</zan-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.z-panel-sum {
|
||||
.zan-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
@@ -70,10 +70,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.z-panel-buttons {
|
||||
.zan-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.z-button {
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<h1 class="page-title">Picker</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-picker :columns="pickerColumns" @change="handlePickerChange"></z-picker>
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -3,33 +3,33 @@
|
||||
<h1 class="page-title">Popup</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow1 = true">从下方弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow1" position="bottom" class="z-popup-1">
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</z-popup>
|
||||
</zan-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow2 = true">从上方方弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow2 = true">从上方方弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow2" position="top" class="z-popup-2" :overlay="false">
|
||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</z-popup>
|
||||
</zan-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow3 = true">从右方弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow3" position="right" class="z-popup-3" :overlay="false">
|
||||
<z-button @click.native="popupShow3 = false">关闭 popup</z-button>
|
||||
</z-popup>
|
||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
|
||||
<div class="z-button-1">
|
||||
<z-button @click="popupShow4 = true">从中间弹出popup</z-button>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<z-popup v-model="popupShow4" transition="popup-fade" class="z-popup-4">
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
一些内容
|
||||
</z-popup>
|
||||
</zan-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -57,12 +57,12 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.z-popup-1 {
|
||||
.zan-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.z-popup-2 {
|
||||
.zan-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
@@ -70,20 +70,20 @@ export default {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-3 {
|
||||
.zan-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.z-popup-4 {
|
||||
.zan-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-popup .z-button-1 {
|
||||
.page-popup .zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,28 +4,28 @@
|
||||
|
||||
<div class="demo-wrapper">
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<z-radio name="1" v-model="radio1">单选框1</z-radio>
|
||||
<z-radio name="2" v-model="radio1">单选框2</z-radio>
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<z-radio name="1" v-model="radio2" disabled>未选中禁用</z-radio>
|
||||
<z-radio name="2" v-model="radio2" disabled>选中且禁用</z-radio>
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
|
||||
<h2 class="page-sub-title">radio组</h2>
|
||||
<z-radio-group v-model="radio3">
|
||||
<z-radio name="1">单选框1</z-radio>
|
||||
<z-radio name="2">单选框2</z-radio>
|
||||
</z-radio-group>
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<h2 class="page-sub-title">与Cell组件一起使用</h2>
|
||||
</div>
|
||||
|
||||
<z-radio-group v-model="radio4">
|
||||
<z-cell-group>
|
||||
<z-cell><z-radio name="1">单选框1</z-radio></z-cell>
|
||||
<z-cell><z-radio name="2">单选框2</z-radio></z-cell>
|
||||
</z-cell-group>
|
||||
</z-radio-group>
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -46,7 +46,7 @@ export default {
|
||||
.demo-wrapper {
|
||||
padding: 0 15px;
|
||||
|
||||
.z-radio {
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="page-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<div v-for="item in list" class="z-cell" style="text-align: center;">{{ item }}</div>
|
||||
<!-- <z-loading v-if="loading" style="text-align: center;"></z-loading> -->
|
||||
<div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
|
||||
<!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
|
||||
<div style="text-align: center;">loading</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user