mirror of
https://github.com/youzan/vant.git
synced 2025-10-18 17:51:54 +00:00
add auto generate example js
This commit is contained in:
cookfront
@@ -2,7 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@@ -53,7 +53,7 @@
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
:::demo
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@@ -78,7 +78,7 @@
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
:::demo
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@@ -92,7 +92,7 @@
|
||||
|
||||
表示loading状态
|
||||
|
||||
:::demo
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
一组按钮。
|
||||
|
||||
:::demo
|
||||
:::demo button group
|
||||
```html
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
|
||||
@@ -20,7 +20,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
@@ -33,7 +33,7 @@ export default {
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo
|
||||
:::demo 标题带描述信息
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
@@ -46,7 +46,7 @@ export default {
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo
|
||||
:::demo 带图标
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
@@ -59,7 +59,7 @@ export default {
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
|
||||
@@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
@@ -59,7 +59,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
@@ -79,7 +79,7 @@ export default {
|
||||
|
||||
### Checkbox组
|
||||
|
||||
:::demo
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
@@ -112,7 +112,7 @@ export default {
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
:::demo
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
@@ -139,7 +139,7 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
|
||||
@@ -30,7 +30,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo
|
||||
:::demo 无label的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
监听组件的`change`事件。
|
||||
|
||||
:::demo
|
||||
:::demo 监听change事件
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
|
||||
@@ -35,7 +35,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
```
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
|
||||
@@ -29,7 +29,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
@@ -71,7 +71,7 @@ export default {
|
||||
|
||||
### radio组
|
||||
|
||||
:::demo
|
||||
:::demo radio组
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
@@ -94,7 +94,7 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
|
||||
@@ -12,7 +12,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<script>
|
||||
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
@@ -63,7 +63,7 @@ export default {
|
||||
|
||||
### 只显示步骤条
|
||||
|
||||
:::demo
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
### 高级用法
|
||||
|
||||
:::demo
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user