mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
vant components
This commit is contained in:
cookfront
parent
c6014ad62d
commit
06e333eb3e
@ -5,7 +5,7 @@ const execSync = require('child_process').execSync;
|
||||
const existsSync = require('fs').existsSync;
|
||||
const path = require('path');
|
||||
|
||||
let componentPaths = [];
|
||||
const componentPaths = [];
|
||||
|
||||
delete components.font;
|
||||
|
||||
|
||||
@ -3,12 +3,12 @@ var getPostcssPlugin = require('./utils/postcss_pipe');
|
||||
var config = require('./webpack.config.js');
|
||||
|
||||
config.entry = {
|
||||
'zanui': './src/index.js'
|
||||
'vant': './src/index.js'
|
||||
};
|
||||
|
||||
config.output = {
|
||||
filename: './lib/[name].js',
|
||||
library: 'zanui',
|
||||
library: 'vant',
|
||||
libraryTarget: 'umd'
|
||||
};
|
||||
|
||||
|
||||
1
build/webpack.build.min.js
vendored
1
build/webpack.build.min.js
vendored
@ -1,5 +1,4 @@
|
||||
var webpack = require('webpack');
|
||||
var getPostcssPlugin = require('./utils/postcss_pipe');
|
||||
var config = require('./webpack.config.js');
|
||||
|
||||
config.output.filename = config.output.filename.replace(/\.js$/, '.min.js');
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
var slugify = require('transliteration').slugify;
|
||||
var md = require('markdown-it')();
|
||||
var striptags = require('./strip-tags');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
var version = require('../package.json').version;
|
||||
var getPoastcssPlugin = require('./utils/postcss_pipe');
|
||||
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
@ -36,8 +34,8 @@ function wrap(render) {
|
||||
module.exports = {
|
||||
entry: {
|
||||
'vendor': ['vue', 'vue-router'],
|
||||
'zan-docs': './docs/src/index.js',
|
||||
'zan-examples': './docs/src/examples.js'
|
||||
'vant-docs': './docs/src/index.js',
|
||||
'vant-examples': './docs/src/examples.js'
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../docs/dist'),
|
||||
@ -52,7 +50,7 @@ module.exports = {
|
||||
extensions: ['.js', '.vue', '.css'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.runtime.common.js',
|
||||
'zanui': path.join(__dirname, '..'),
|
||||
'vant': path.join(__dirname, '..'),
|
||||
'src': path.join(__dirname, '../src'),
|
||||
'packages': path.join(__dirname, '../packages'),
|
||||
'lib': path.join(__dirname, '../lib'),
|
||||
@ -150,13 +148,13 @@ module.exports = {
|
||||
}
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendor', 'zan-docs'],
|
||||
chunks: ['vendor', 'vant-docs'],
|
||||
template: 'docs/src/index.tpl',
|
||||
filename: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendor', 'zan-examples'],
|
||||
chunks: ['vendor', 'vant-examples'],
|
||||
template: 'docs/src/index.tpl',
|
||||
filename: 'examples.html',
|
||||
inject: true
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<template><section class="demo-actionsheet"><h1 class="demo-title">Actionsheet 行动按钮</h1><example-block title="基础用法">
|
||||
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||
</zan-actionsheet>
|
||||
<van-button @click="show1 = true">弹出actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions1">
|
||||
</van-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带取消按钮的ActionSheet">
|
||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</zan-actionsheet>
|
||||
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</van-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带标题的ActionSheet">
|
||||
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<p>一些内容</p>
|
||||
</zan-actionsheet>
|
||||
</van-actionsheet>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@ -26,7 +26,7 @@
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
|
||||
<div class="badge-group-wrapper">
|
||||
<zan-badge-group>
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
<van-badge-group>
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="选中某个badge">
|
||||
<div class="badge-group-wrapper">
|
||||
<zan-badge-group :active-key="2">
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
<van-badge-group :active-key="2">
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
@ -27,7 +27,7 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zan-badge-group {
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,85 +1,85 @@
|
||||
<template><section class="demo-button"><h1 class="demo-title">Button 按钮</h1><example-block title="按钮功能">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block="">default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block="">primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block="">danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button block="">default</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" block="">primary</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="danger" block="">danger</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block="">diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button disabled block="">diabled</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="按钮尺寸">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="large">large</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="normal">normal</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="small">small</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="mini">mini</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="自定义按钮标签">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="loading按钮">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading="" block="">loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading="" block=""></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" loading="" block="">loading</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button loading="" block=""></van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" bottom-action="">立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="12">
|
||||
<zan-button bottom-action="">加入购物车</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="12">
|
||||
<zan-button type="primary" bottom-action="">立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" bottom-action="">立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action="">加入购物车</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action="">立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.zan-col {
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template><section class="demo-card"><h1 class="demo-title">Card 图文组件</h1><example-block title="基础用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
<van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</van-card>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
<van-card thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<span class="zan-card__num">x 2</span>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
</van-card>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
|
||||
@ -1,38 +1,37 @@
|
||||
<template><section class="demo-cell"><h1 class="demo-title">Cell 单元格</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容">
|
||||
</zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<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>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="带图标">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" icon="home"></van-cell>
|
||||
<van-cell title="线下门店" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="可点击的链接">
|
||||
<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>
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<zan-tag type="danger">官方</zan-tag>
|
||||
<span class="van-cell-text">起码运动馆</span>
|
||||
<van-tag type="danger">官方</van-tag>
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></van-cell>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
|
||||
@ -1,43 +1,43 @@
|
||||
<template><section class="demo-checkbox"><h1 class="demo-title">Checkbox 复选框</h1><example-block title="基础用法">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox-group v-model="result" disabled>
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list">
|
||||
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
|
||||
|
||||
@ -45,10 +45,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
<zan-button @click="handleAlert2Click">无标题alert</zan-button>
|
||||
<van-button @click="handleAlertClick">alert</van-button>
|
||||
<van-button @click="handleAlert2Click">无标题alert</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="消息确认">
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
<van-button @click="handleConfirmClick">confirm</van-button>
|
||||
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b dialog {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
<template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
|
||||
<van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
|
||||
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="无label的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="带border的输入框">
|
||||
<div class="zan-field-wrapper">
|
||||
<zan-field type="text" placeholder="请输入用户名" border=""></zan-field>
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border=""></van-field>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="禁用的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" error=""></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error=""></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></van-field>
|
||||
</van-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.zan-field-wrapper {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,150 +1,150 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="close"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="location"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="check"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like" style="color: red;"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="search"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="success"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="contact"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="wechat"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="alipay"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.zan-col {
|
||||
.van-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template><section class="demo-image-preview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="基础用法">
|
||||
<zan-button @click="handleImagePreview">预览图片</zan-button>
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b image-preview {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,50 +1,50 @@
|
||||
<template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="4">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</zan-col>
|
||||
<zan-col span="10" offset="4">
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col offset="12" span="12">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block><example-block title="在列元素之间增加间距">
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<van-row gutter="10">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.zan-row {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
<van-loading class="some-customized-class"></van-loading>
|
||||
|
||||
</example-block><example-block title="渐变浅色spinner">
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
<van-loading class="some-customized-class" :color="'white'"></van-loading>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="单色spinner">
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.zan-loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
<template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
</van-panel>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<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="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<h4 class="van-card__desc">商品sku</h4>
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
</van-card>
|
||||
<div class="van-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
<div class="van-panel-buttons" slot="footer">
|
||||
<van-button size="small">按钮一</van-button>
|
||||
<van-button size="small" type="danger">按钮二</van-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
</van-panel>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.zan-panel-sum {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
@ -47,10 +47,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,32 @@
|
||||
<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="从不同位置弹出菜单">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
@ -34,11 +34,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;
|
||||
@ -46,22 +46,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%;
|
||||
}
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
<template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="Inactive">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义颜色和文字">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
|
||||
<zan-quantity v-model="quantity1"></zan-quantity>
|
||||
<van-quantity v-model="quantity1"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
|
||||
|
||||
</example-block><example-block title="禁用Quantity">
|
||||
<zan-quantity v-model="quantity1" disabled></zan-quantity>
|
||||
<van-quantity v-model="quantity1" disabled></van-quantity>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
|
||||
<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity2 }}</p>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b quantity {
|
||||
.zan-quantity {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<template><section class="demo-radio"><h1 class="demo-title">Radio 单选框</h1><example-block title="基础用法">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">单选框1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框2</van-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
|
||||
<van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="radio组">
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">单选框1</van-radio>
|
||||
<van-radio name="2">单选框2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<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>
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">单选框1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">单选框2</van-radio></van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
|
||||
|
||||
@ -38,10 +38,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<van-search placeholder="商品名称" @search="goSearch"></van-search>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="监听对应事件">
|
||||
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
|
||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
|
||||
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@ -26,7 +26,7 @@
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
|
||||
<zan-swipe>
|
||||
<zan-swipe-item v-for="img in images">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<zan-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<zan-swipe-item v-for="img in autoImages">
|
||||
<van-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.zan-swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
|
||||
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="loading状态">
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
|
||||
|
||||
@ -1,60 +1,60 @@
|
||||
<template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="基础用法">
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="禁用tab">
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="card样式">
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs type="card">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
</example-block><example-block title="自定义样式">
|
||||
<zan-tabs active="2" class="custom-tabwrap">
|
||||
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
|
||||
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
|
||||
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
|
||||
<zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
|
||||
<zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs active="2" class="custom-tabwrap">
|
||||
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
<van-tab title="选项五" class="custom-pane">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="click事件">
|
||||
<zan-tabs @click="handleTabClick">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
|
||||
|
||||
@ -62,19 +62,19 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.zan-tab__pane {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-tabs--card .zan-tab__pane {
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
@ -85,10 +85,10 @@
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag plain="">返现</zan-tag>
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain="">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="danger">四字标签</van-tag>
|
||||
<van-tag type="danger">一</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag plain="" type="danger">返现</zan-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain="" type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag plain="" type="primary">返现</zan-tag>
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag plain="" type="primary">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag plain="" type="success">返现</zan-tag>
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain="" type="success">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" mark="">返现</zan-tag>
|
||||
<van-tag type="danger" mark="">返现</van-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
@ -31,7 +31,7 @@
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
|
||||
<zan-button @click="showSimpleToast">普通文字提示</zan-button>
|
||||
<zan-button @click="showLoadingToast">加载Toast</zan-button>
|
||||
<zan-button @click="showSuccessToast">成功</zan-button>
|
||||
<zan-button @click="showFailToast">失败</zan-button>
|
||||
<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
|
||||
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
|
||||
<van-button @click="showSimpleToast">普通文字提示</van-button>
|
||||
<van-button @click="showLoadingToast">加载Toast</van-button>
|
||||
<van-button @click="showSuccessToast">成功</van-button>
|
||||
<van-button @click="showFailToast">失败</van-button>
|
||||
<van-button @click="showForbidClickToast">背景不能点击</van-button>
|
||||
<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<zan-button @click="showToast">打开</zan-button>
|
||||
<zan-button @click="closeToast">关闭</zan-button>
|
||||
<van-button @click="showToast">打开</van-button>
|
||||
<van-button @click="closeToast">关闭</van-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<zan-button @click="showHtmlToast">打开</zan-button>
|
||||
<van-button @click="showHtmlToast">打开</van-button>
|
||||
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :after-read="logContent">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</zan-uploader>
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@ -63,7 +63,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -71,8 +71,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ActionSheet } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/actionSheet.css';
|
||||
import { ActionSheet } from 'vant';
|
||||
import 'vant/lib/vant-css/actionSheet.css';
|
||||
|
||||
Vue.component(ActionSheet.name, ActionSheet);
|
||||
```
|
||||
@ -82,11 +82,11 @@ Vue.component(ActionSheet.name, ActionSheet);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
|
||||
|
||||
```js
|
||||
import { ActionSheet } from '@youzan/zanui-vue';
|
||||
import { ActionSheet } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-actionSheet': ActionSheet
|
||||
'van-actionSheet': ActionSheet
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -99,9 +99,9 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||
</zan-actionsheet>
|
||||
<van-button @click="show1 = true">弹出actionsheet</van-button>
|
||||
<van-actionsheet v-model="show1" :actions="actions1">
|
||||
</van-actionsheet>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -148,9 +148,9 @@ export default {
|
||||
|
||||
:::demo 带取消按钮的ActionSheet
|
||||
```html
|
||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</zan-actionsheet>
|
||||
<van-button @click="show2 = true">弹出带取消按钮的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</van-actionsheet>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -191,16 +191,16 @@ export default {
|
||||
|
||||
:::demo 带标题的ActionSheet
|
||||
```html
|
||||
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
|
||||
<zan-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<van-button @click="show3 = true">弹出带标题的actionsheet</van-button>
|
||||
<van-actionsheet v-model="show3" title="支持以下配送方式" class="title-actionsheet">
|
||||
<p>一些内容</p>
|
||||
</zan-actionsheet>
|
||||
</van-actionsheet>
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### API
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zan-badge-group {
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@ -32,7 +32,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -40,8 +40,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/badge.css';
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/badge.css';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(BadgeGroup.name, BadgeGroup);
|
||||
@ -52,12 +52,12 @@ Vue.component(BadgeGroup.name, BadgeGroup);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
|
||||
|
||||
```js
|
||||
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-badge': Badge,
|
||||
'zan-badge-group': BadgeGroup
|
||||
'van-badge': Badge,
|
||||
'van-badge-group': BadgeGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -71,29 +71,29 @@ export default {
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="badge-group-wrapper">
|
||||
<zan-badge-group>
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
<van-badge-group>
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选中某个badge
|
||||
|
||||
如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
|
||||
如果想默认选中某个`badge`，你可以在`van-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
|
||||
|
||||
:::demo 选中某个badge
|
||||
```html
|
||||
<div class="badge-group-wrapper">
|
||||
<zan-badge-group :active-key="2">
|
||||
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
<van-badge-group :active-key="2">
|
||||
<van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
|
||||
<van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
|
||||
<van-badge title="火炽寿司" @click="onItemClick"></van-badge>
|
||||
<van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
|
||||
</van-badge-group>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.zan-col {
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@ -15,7 +15,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/button.css';
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
@ -34,11 +34,11 @@ Vue.component(Button.name, Button);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
|
||||
|
||||
```js
|
||||
import { Button } from '@youzan/zanui-vue';
|
||||
import { Button } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-button': Button
|
||||
'van-button': Button
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -51,17 +51,17 @@ export default {
|
||||
|
||||
:::demo 按钮功能
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block>default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block>primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block>danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button block>default</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" block>primary</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button type="danger" block>danger</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -71,11 +71,11 @@ export default {
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block>diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button disabled block>diabled</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -85,26 +85,26 @@ export default {
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="large">large</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="normal">normal</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="small">small</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button size="mini">mini</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -114,11 +114,11 @@ export default {
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -128,14 +128,14 @@ export default {
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading block>loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading block></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" loading block>loading</van-button>
|
||||
</van-col>
|
||||
<van-col span="24">
|
||||
<van-button loading block></van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -145,19 +145,19 @@ export default {
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" bottom-action>立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="12">
|
||||
<zan-button bottom-action>加入购物车</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="12">
|
||||
<zan-button type="primary" bottom-action>立即购买</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<van-row>
|
||||
<van-col span="24">
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="12">
|
||||
<van-button bottom-action>加入购物车</van-button>
|
||||
</van-col>
|
||||
<van-col span="12">
|
||||
<van-button type="primary" bottom-action>立即购买</van-button>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Card } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/card.css';
|
||||
import { Card } from 'vant';
|
||||
import 'vant/lib/vant-css/card.css';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
@ -21,11 +21,11 @@ Vue.component(Card.name, Card);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
|
||||
|
||||
```js
|
||||
import { Card } from '@youzan/zanui-vue';
|
||||
import { Card } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-card': Card
|
||||
'van-card': Card
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -38,11 +38,11 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-card
|
||||
<van-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
</van-card>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -52,20 +52,20 @@ export default {
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-card
|
||||
<van-card
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<span class="zan-card__num">x 2</span>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
</van-card>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -20,8 +20,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Cell } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
|
||||
import { Cell } from 'vant';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
@ -31,11 +31,11 @@ Vue.component(Cell.name, Cell);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
|
||||
|
||||
```js
|
||||
import { Cell } from '@youzan/zanui-vue';
|
||||
import { Cell } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-cell': Cell
|
||||
'van-cell': Cell
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -46,11 +46,10 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容">
|
||||
</zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" value="单元格1内容"></van-cell>
|
||||
<van-cell title="单元格2" value="单元格2内容"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -60,10 +59,10 @@ export default {
|
||||
|
||||
:::demo 标题带描述信息
|
||||
```html
|
||||
<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>
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></van-cell>
|
||||
<van-cell title="单元格2" label="描述信息"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -73,10 +72,10 @@ export default {
|
||||
|
||||
:::demo 带图标
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" icon="home"></van-cell>
|
||||
<van-cell title="线下门店" icon="location"></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -86,10 +85,10 @@ export default {
|
||||
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<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>
|
||||
<van-cell-group>
|
||||
<van-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -99,15 +98,15 @@ export default {
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<van-cell-group>
|
||||
<van-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<zan-tag type="danger">官方</zan-tag>
|
||||
<span class="van-cell-text">起码运动馆</span>
|
||||
<van-tag type="danger">官方</van-tag>
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
</van-cell>
|
||||
<van-cell title="线下门店" icon="location" url="http://youzan.com" is-link></van-cell>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -47,8 +47,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/checkbox.css';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
@ -59,24 +59,26 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
|
||||
|
||||
```js
|
||||
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-checkbox': Checkbox,
|
||||
'zan-checkbox-group': CheckboxGroup
|
||||
'van-checkbox': Checkbox,
|
||||
'van-checkbox-group': CheckboxGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 基础用法
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox1">复选框1</van-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -91,14 +93,14 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox v-model="checkbox2">复选框2</van-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -113,16 +115,16 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox组
|
||||
#### Checkbox组
|
||||
|
||||
需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
需要与`van-checkbox-group`一起使用，值通过`v-model`绑定在`van-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -148,16 +150,16 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用Checkbox组
|
||||
#### 禁用Checkbox组
|
||||
|
||||
禁用`zan-checkbox-group`，此时整个组都不可点击。
|
||||
禁用`van-checkbox-group`，此时整个组都不可点击。
|
||||
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="van-checkbox-wrapper">
|
||||
<van-checkbox-group v-model="result" disabled>
|
||||
<van-checkbox v-for="item in list" :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -177,19 +179,19 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
#### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
<van-checkbox-group v-model="result">
|
||||
<van-cell-group>
|
||||
<van-cell v-for="item in list">
|
||||
<van-checkbox :name="item">复选框{{item}}</van-checkbox>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-checkbox-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -26,13 +26,43 @@ export default {
|
||||
|
||||
## Datetime Picker 时间选择
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
### 使用指南
|
||||
|
||||
### 基础用法
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`DatetimePicker`组件，这样只能在你注册的组件中使用`DatetimePicker`：
|
||||
|
||||
```js
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-datetime-picker': DatetimePicker
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-datetime-picker
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
@ -40,7 +70,7 @@ export default {
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</zan-datetime-picker>
|
||||
</van-datetime-picker>
|
||||
|
||||
<script>
|
||||
|
||||
@ -63,6 +93,38 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择日期
|
||||
|
||||
:::demo 选择日期
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="date"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选择时间
|
||||
|
||||
:::demo 选择时间
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="time"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b dialog {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
||||
|
||||
```js
|
||||
import { Dialog } from '@youzan/zanui-vue';
|
||||
import { Dialog } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
@ -65,8 +65,8 @@ import { Dialog } from '@youzan/zanui-vue';
|
||||
|
||||
:::demo 消息提示
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
<zan-button @click="handleAlert2Click">无标题alert</zan-button>
|
||||
<van-button @click="handleAlertClick">alert</van-button>
|
||||
<van-button @click="handleAlert2Click">无标题alert</van-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::demo 消息确认
|
||||
```html
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
<van-button @click="handleConfirmClick">confirm</van-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -122,7 +122,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>
|
||||
|
||||
### 方法
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.zan-field-wrapper {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -32,8 +32,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Field } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/field.css';
|
||||
import { Field } from 'vant';
|
||||
import 'vant/lib/vant-css/field.css';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
@ -43,11 +43,11 @@ Vue.component(Field.name, Field);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
|
||||
|
||||
```js
|
||||
import { Field } from '@youzan/zanui-vue';
|
||||
import { Field } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-field': Field
|
||||
'van-field': Field
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -60,11 +60,11 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></van-field>
|
||||
<van-field type="password" label="密码：" placeholder="请输入密码" required></van-field>
|
||||
<van-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -74,9 +74,9 @@ export default {
|
||||
|
||||
:::demo 无label的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field type="text" placeholder="请输入用户名"></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -86,8 +86,8 @@ export default {
|
||||
|
||||
:::demo 带border的输入框
|
||||
```html
|
||||
<div class="zan-field-wrapper">
|
||||
<zan-field type="text" placeholder="请输入用户名" border></zan-field>
|
||||
<div class="van-field-wrapper">
|
||||
<van-field type="text" placeholder="请输入用户名" border></van-field>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
@ -98,9 +98,9 @@ export default {
|
||||
|
||||
:::demo 禁用的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -110,9 +110,9 @@ export default {
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" error></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="用户名：" type="text" placeholder="请输入用户名" error></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -123,9 +123,9 @@ export default {
|
||||
|
||||
:::demo 错误的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></zan-field>
|
||||
</zan-cell-group>
|
||||
<van-cell-group>
|
||||
<van-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize></van-field>
|
||||
</van-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.zan-col {
|
||||
.van-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -26,8 +26,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Icon } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/icon.css';
|
||||
import { Icon } from 'vant';
|
||||
import 'vant/lib/vant-css/icon.css';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
@ -37,11 +37,11 @@ Vue.component(Icon.name, Icon);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
|
||||
|
||||
```js
|
||||
import { Icon } from '@youzan/zanui-vue';
|
||||
import { Icon } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-icon': Icon
|
||||
'van-icon': Icon
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -54,142 +54,142 @@ export default {
|
||||
|
||||
:::demo 所有Icon
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr-invalid"></van-icon>
|
||||
<span>qr-invalid</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="qr"></van-icon>
|
||||
<span>qr</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="exchange"></van-icon>
|
||||
<span>exchange</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="close"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="close"></van-icon>
|
||||
<span>close</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="location"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="location"></van-icon>
|
||||
<span>location</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="upgrade"></van-icon>
|
||||
<span>upgrade</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="check"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="check"></van-icon>
|
||||
<span>check</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="checked"></van-icon>
|
||||
<span>checked</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="like-o"></van-icon>
|
||||
<span>like-o</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like" style="color: red;"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="like" style="color: red;"></van-icon>
|
||||
<span>like</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="chat"></van-icon>
|
||||
<span>chat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="shop"></van-icon>
|
||||
<span>shop</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
<span>photograph</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add"></van-icon>
|
||||
<span>add</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="add2"></van-icon>
|
||||
<span>add2</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="photo"></van-icon>
|
||||
<span>photo</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="logistics"></van-icon>
|
||||
<span>logistics</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit"></van-icon>
|
||||
<span>edit</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="passed"></van-icon>
|
||||
<span>passed</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="cart"></van-icon>
|
||||
<span>cart</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>arrow</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift"></van-icon>
|
||||
<span>gift</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="search"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="search"></van-icon>
|
||||
<span>search</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clear"></van-icon>
|
||||
<span>clear</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="success"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="success"></van-icon>
|
||||
<span>success</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="fail"></van-icon>
|
||||
<span>fail</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="contact"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="contact"></van-icon>
|
||||
<span>contact</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="wechat"></zan-icon>
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<van-icon name="wechat"></van-icon>
|
||||
<span>wechat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="alipay"></zan-icon>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="alipay"></van-icon>
|
||||
<span>alipay</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b image-preview {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from '@youzan/zanui-vue';
|
||||
import { ImagePreview } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
@ -43,7 +43,7 @@ import { ImagePreview } from '@youzan/zanui-vue';
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="handleImagePreview">预览图片</zan-button>
|
||||
<van-button @click="handleImagePreview">预览图片</van-button>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
@ -64,7 +64,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>
|
||||
|
||||
### 方法参数
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
### ynpm安装
|
||||
|
||||
```shell
|
||||
npm i @youzan/zanui-vue -S
|
||||
npm i vant -S
|
||||
```
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.zan-row {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
@ -30,11 +30,11 @@
|
||||
|
||||
## Layout 布局
|
||||
|
||||
主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
|
||||
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -42,9 +42,9 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Row, Col } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/col.css';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/row.css';
|
||||
import { Row, Col } from 'vant';
|
||||
import 'vant/lib/vant-css/col.css';
|
||||
import 'vant/lib/vant-css/row.css';
|
||||
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
@ -55,12 +55,12 @@ Vue.component(Col.name, Col);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
|
||||
|
||||
```js
|
||||
import { Row, Col } from '@youzan/zanui-vue';
|
||||
import { Row, Col } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-row': Row,
|
||||
'zan-col': Col
|
||||
'van-row': Row,
|
||||
'van-col': Col
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -69,54 +69,54 @@ export default {
|
||||
|
||||
#### 常规用法
|
||||
|
||||
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
|
||||
:::demo 常规用法
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<van-row>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="4">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</zan-col>
|
||||
<zan-col span="10" offset="4">
|
||||
</van-col>
|
||||
<van-col span="10" offset="4">
|
||||
<div class="gray">offset: 4, span: 10</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col offset="12" span="12">
|
||||
</van-col>
|
||||
</van-row>
|
||||
<van-row>
|
||||
<van-col offset="12" span="12">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 在列元素之间增加间距
|
||||
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`van-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<van-row gutter="10">
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Lazyload } from '@youzan/zanui-vue';
|
||||
import { Lazyload } from 'vant';
|
||||
|
||||
Vue.use(Lazyload, options);
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.zan-loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Loading } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/loading.css';
|
||||
import { Loading } from 'vant';
|
||||
import 'vant/lib/vant-css/loading.css';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
@ -43,11 +43,11 @@ Vue.component(Loading.name, Loading);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
|
||||
|
||||
```js
|
||||
import { Loading } from '@youzan/zanui-vue';
|
||||
import { Loading } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-loading': Loading
|
||||
'van-loading': Loading
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -58,7 +58,7 @@ export default {
|
||||
|
||||
:::demo 渐变深色spinner
|
||||
```html
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
<van-loading class="some-customized-class"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -67,7 +67,7 @@ export default {
|
||||
:::demo 渐变浅色spinner
|
||||
```html
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
<van-loading class="some-customized-class" :color="'white'"></van-loading>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
@ -76,8 +76,8 @@ export default {
|
||||
|
||||
:::demo 单色spinner
|
||||
```html
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'white'"></van-loading>
|
||||
<van-loading class="circle-loading" :type="'circle'" :color="'black'"></van-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.zan-panel-sum {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
@ -14,10 +14,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -41,8 +41,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Panel } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/panel.css';
|
||||
import { Panel } from 'vant';
|
||||
import 'vant/lib/vant-css/panel.css';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
@ -52,11 +52,11 @@ Vue.component(Panel.name, Panel);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
|
||||
|
||||
```js
|
||||
import { Panel } from '@youzan/zanui-vue';
|
||||
import { Panel } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-panel': Panel
|
||||
'van-panel': Panel
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -69,46 +69,46 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 高级用法
|
||||
|
||||
使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
|
||||
使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
<van-panel title="标题" desc="标题描述" status="状态">
|
||||
<van-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
<div class="van-card__row" slot="title">
|
||||
<h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="van-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
<div class="van-card__row" slot="desc">
|
||||
<h4 class="van-card__desc">商品sku</h4>
|
||||
<span class="van-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
<div class="van-card__footer" slot="footer">
|
||||
<van-button size="mini">按钮一</van-button>
|
||||
<van-button size="mini">按钮二</van-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
</van-card>
|
||||
<div class="van-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
<div class="van-panel-buttons" slot="footer">
|
||||
<van-button size="small">按钮一</van-button>
|
||||
<van-button size="small" type="danger">按钮二</van-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
</van-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -47,8 +47,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Picker } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/picker.css';
|
||||
import { Picker } from 'vant';
|
||||
import 'vant/lib/vant-css/picker.css';
|
||||
|
||||
Vue.component(Picker.name, Picker);
|
||||
```
|
||||
@ -58,11 +58,11 @@ Vue.component(Picker.name, Picker);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
|
||||
|
||||
```js
|
||||
import { Picker } from '@youzan/zanui-vue';
|
||||
import { Picker } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-picker': Picker
|
||||
'van-picker': Picker
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -73,7 +73,7 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
<van-picker :columns="pickerColumns" @change="handlePickerChange"></van-picker>
|
||||
|
||||
<script>
|
||||
const citys = {
|
||||
@ -112,7 +112,7 @@ export default {
|
||||
|
||||
:::demo 带toolbar的Picker
|
||||
```html
|
||||
<zan-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></zan-picker>
|
||||
<van-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
|
||||
|
||||
<script>
|
||||
const citys = {
|
||||
|
||||
@ -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
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -22,8 +22,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Progress } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/progress.css';
|
||||
import { Progress } from 'vant';
|
||||
import 'vant/lib/vant-css/progress.css';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
@ -33,11 +33,11 @@ Vue.component(Progress.name, Progress);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
|
||||
|
||||
```js
|
||||
import { Progress } from '@youzan/zanui-vue';
|
||||
import { Progress } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-progress': Progress
|
||||
'van-progress': Progress
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -51,13 +51,13 @@ export default {
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo2" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :percentage="100"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :percentage="100"></van-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
@ -70,13 +70,13 @@ export default {
|
||||
:::demo Inactive
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="0"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo2" :inactive="true" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></van-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
@ -89,13 +89,13 @@ export default {
|
||||
:::demo 自定义颜色和文字
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="橙色" color="#f60" :percentage="46"></van-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></zan-progress>
|
||||
<van-progress class="demo-progress__demo1" pivot-text="黄色" color="#f09000" :percentage="66"></van-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b quantity {
|
||||
.zan-quantity {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -35,8 +35,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Quantity } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
|
||||
import { Quantity } from 'vant';
|
||||
import 'vant/lib/vant-css/quantity.css';
|
||||
|
||||
Vue.component(Quantity.name, Quantity);
|
||||
```
|
||||
@ -46,11 +46,11 @@ Vue.component(Quantity.name, Quantity);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
|
||||
|
||||
```js
|
||||
import { Quantity } from '@youzan/zanui-vue';
|
||||
import { Quantity } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-quantity': Quantity
|
||||
'van-quantity': Quantity
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -61,7 +61,7 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-quantity v-model="quantity1"></zan-quantity>
|
||||
<van-quantity v-model="quantity1"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity1 }}</p>
|
||||
```
|
||||
:::
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
|
||||
:::demo 禁用Quantity
|
||||
```html
|
||||
<zan-quantity v-model="quantity1" disabled></zan-quantity>
|
||||
<van-quantity v-model="quantity1" disabled></van-quantity>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></zan-quantity>
|
||||
<van-quantity v-model="quantity2" min="5" max="40" step="2" default-value="9"></van-quantity>
|
||||
<p class="curr-quantity">当前值：{{ quantity2 }}</p>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import ZanUI from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/index.css';
|
||||
import ZanUI from 'vant';
|
||||
import 'vant/lib/vant-css/index.css';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
```
|
||||
@ -14,9 +14,9 @@ Vue.use(ZanUI);
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/button.css';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
|
||||
import { Button, Cell } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Cell.name, Cell);
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
@ -29,7 +29,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Radio, RadioGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/radio.css';
|
||||
import { Radio, RadioGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/radio.css';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
Vue.component(RadioGroup.name, RadioGroup);
|
||||
@ -49,25 +49,26 @@ Vue.component(RadioGroup.name, RadioGroup);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
|
||||
|
||||
```js
|
||||
import { Radio, RadioGroup } from '@youzan/zanui-vue';
|
||||
import { Radio, RadioGroup } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-radio': Radio,
|
||||
'zan-radio-group': RadioGroup
|
||||
'van-radio': Radio,
|
||||
'van-radio-group': RadioGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
### 代码演示
|
||||
|
||||
### 基础用法
|
||||
#### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio1">单选框1</van-radio>
|
||||
<van-radio name="2" v-model="radio1">单选框2</van-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -82,15 +83,15 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Radio`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
<div class="van-radios">
|
||||
<van-radio name="1" v-model="radio2" disabled>未选中禁用</van-radio>
|
||||
<van-radio name="2" v-model="radio2" disabled>选中且禁用</van-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -105,17 +106,17 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### radio组
|
||||
#### radio组
|
||||
|
||||
需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
|
||||
需要与`van-radio-group`一起使用，在`van-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
|
||||
|
||||
:::demo radio组
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
<div class="van-radios">
|
||||
<van-radio-group v-model="radio3">
|
||||
<van-radio name="1">单选框1</van-radio>
|
||||
<van-radio name="2">单选框2</van-radio>
|
||||
</van-radio-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -130,18 +131,18 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
#### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<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>
|
||||
<van-radio-group v-model="radio4">
|
||||
<van-cell-group>
|
||||
<van-cell><van-radio name="1">单选框1</van-radio></van-cell>
|
||||
<van-cell><van-radio name="2">单选框2</van-radio></van-cell>
|
||||
</van-cell-group>
|
||||
</van-radio-group>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -18,7 +18,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -26,8 +26,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Search } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/search.css';
|
||||
import { Search } from 'vant';
|
||||
import 'vant/lib/vant-css/search.css';
|
||||
|
||||
Vue.component(Search.name, Search);
|
||||
```
|
||||
@ -37,11 +37,11 @@ Vue.component(Search.name, Search);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
|
||||
|
||||
```js
|
||||
import { Search } from '@youzan/zanui-vue';
|
||||
import { Search } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-search': Search
|
||||
'van-search': Search
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -54,7 +54,7 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<van-search placeholder="商品名称" @search="goSearch"></van-search>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -74,7 +74,7 @@ export default {
|
||||
|
||||
:::demo 监听对应事件
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
|
||||
<van-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></van-search>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
@ -32,7 +32,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -40,8 +40,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Steps, Step } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/steps.css';
|
||||
import { Steps, Step } from 'vant';
|
||||
import 'vant/lib/vant-css/steps.css';
|
||||
|
||||
Vue.component(Steps.name, Steps);
|
||||
Vue.component(Step.name, Step);
|
||||
@ -52,12 +52,12 @@ Vue.component(Step.name, Step);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
|
||||
|
||||
```js
|
||||
import { Steps, Step } from '@youzan/zanui-vue';
|
||||
import { Steps, Step } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-steps': Steps,
|
||||
'zan-step': Step
|
||||
'van-steps': Steps,
|
||||
'van-step': Step
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -68,14 +68,14 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<van-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
<van-button @click="nextStep">下一步</van-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -101,12 +101,12 @@ export default {
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
<van-steps :active="active">
|
||||
<van-step>买家下单</van-step>
|
||||
<van-step>商家接单</van-step>
|
||||
<van-step>买家提货</van-step>
|
||||
<van-step>交易完成</van-step>
|
||||
</van-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.zan-swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -47,8 +47,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
import 'vant/lib/vant-css/swipe.css';
|
||||
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
Vue.component(SwipeItem.name, SwipeItem);
|
||||
@ -59,12 +59,12 @@ Vue.component(SwipeItem.name, SwipeItem);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
|
||||
|
||||
```js
|
||||
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-swipe': Swipe,
|
||||
'zan-swipe-item': SwipeItem
|
||||
'van-swipe': Swipe,
|
||||
'van-swipe-item': SwipeItem
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -75,11 +75,11 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-swipe>
|
||||
<zan-swipe-item v-for="img in images">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -102,11 +102,11 @@ export default {
|
||||
|
||||
:::demo 自动轮播
|
||||
```html
|
||||
<zan-swipe auto-play @pagechange:end="handlePageEnd">
|
||||
<zan-swipe-item v-for="img in autoImages">
|
||||
<van-swipe auto-play @pagechange:end="handlePageEnd">
|
||||
<van-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -57,8 +57,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Switch } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/switch.css';
|
||||
import { Switch } from 'vant';
|
||||
import 'vant/lib/vant-css/switch.css';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
@ -68,11 +68,11 @@ Vue.component(Switch.name, Switch);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
|
||||
|
||||
```js
|
||||
import { Switch } from '@youzan/zanui-vue';
|
||||
import { Switch } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-switch': Switch
|
||||
'van-switch': Switch
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -83,7 +83,7 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchState1"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
@ -101,7 +101,7 @@ export default {
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></van-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
@ -138,10 +138,10 @@ export default {
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
|
||||
<script>
|
||||
@ -163,10 +163,10 @@ export default {
|
||||
|
||||
:::demo loading状态
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
|
||||
<van-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></van-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.zan-tab__pane {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-tabs--card .zan-tab__pane {
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
@ -53,7 +53,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -61,8 +61,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tab, Tabs } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/tab.css';
|
||||
import { Tab, Tabs } from 'vant';
|
||||
import 'vant/lib/vant-css/tab.css';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
@ -73,12 +73,12 @@ Vue.component(Tabs.name, Tabs);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
|
||||
|
||||
```js
|
||||
import { Tab, Tabs } from '@youzan/zanui-vue';
|
||||
import { Tab, Tabs } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-tab': Tab,
|
||||
'zan-tabs': Tabs
|
||||
'van-tab': Tab,
|
||||
'van-tabs': Tabs
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -91,45 +91,45 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### active特定tab
|
||||
|
||||
可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
|
||||
可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs :active="active">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用tab
|
||||
|
||||
在对应的`zan-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
|
||||
|
||||
:::demo 禁用tab
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二" disabled @disabled="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs>
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -145,24 +145,24 @@ export default {
|
||||
|
||||
#### card样式
|
||||
|
||||
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
|
||||
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`van-tabs`上设置`type`为`card`改为card样式。
|
||||
|
||||
:::demo card样式
|
||||
```html
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs type="card">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
:::
|
||||
<style>
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
@ -174,23 +174,23 @@ export default {
|
||||
|
||||
#### 自定义样式
|
||||
|
||||
可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
可以在`van-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
|
||||
:::demo 自定义样式
|
||||
```html
|
||||
<zan-tabs active="2" class="custom-tabwrap">
|
||||
<zan-tab title="选项一" class="custom-pane">内容一</zan-tab>
|
||||
<zan-tab title="选项二" class="custom-pane">内容二</zan-tab>
|
||||
<zan-tab title="选项三" class="custom-pane">内容三</zan-tab>
|
||||
<zan-tab title="选项四" class="custom-pane">内容四</zan-tab>
|
||||
<zan-tab title="选项五" class="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs active="2" class="custom-tabwrap">
|
||||
<van-tab title="选项一" class="custom-pane">内容一</van-tab>
|
||||
<van-tab title="选项二" class="custom-pane">内容二</van-tab>
|
||||
<van-tab title="选项三" class="custom-pane">内容三</van-tab>
|
||||
<van-tab title="选项四" class="custom-pane">内容四</van-tab>
|
||||
<van-tab title="选项五" class="custom-pane">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<style>
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
@ -204,17 +204,17 @@ export default {
|
||||
|
||||
#### click事件
|
||||
|
||||
可以在`zan-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
|
||||
可以在`van-tabs`上绑定一个`click`事件，事件处理函数有一个参数，参数为对应`tab`在`tabs`中的索引。
|
||||
|
||||
:::demo click事件
|
||||
```html
|
||||
<zan-tabs @click="handleTabClick">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<van-tabs @click="handleTabClick">
|
||||
<van-tab title="选项一">内容一</van-tab>
|
||||
<van-tab title="选项二">内容二</van-tab>
|
||||
<van-tab title="选项三">内容三</van-tab>
|
||||
<van-tab title="选项四">内容四</van-tab>
|
||||
<van-tab title="选项五">内容五</van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -228,7 +228,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### zan-tabs API
|
||||
### van-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
@ -237,14 +237,14 @@ export default {
|
||||
| navclass | tabs的内部nav上的自定义classname | `string` | | |
|
||||
|
||||
|
||||
### zan-tab API
|
||||
### van-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disabled | 是否禁用这个tab | `boolean` | `false` | |
|
||||
|
||||
### zan-tabs Event
|
||||
### van-tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
.van-tag + .van-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tag } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/tag.css';
|
||||
import { Tag } from 'vant';
|
||||
import 'vant/lib/vant-css/tag.css';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
@ -31,11 +31,11 @@ Vue.component(Tag.name, Tag);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
|
||||
|
||||
```js
|
||||
import { Tag } from '@youzan/zanui-vue';
|
||||
import { Tag } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-tag': Tag
|
||||
'van-tag': Tag
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -49,13 +49,13 @@ export default {
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag plain>返现</zan-tag>
|
||||
<van-tag>返现</van-tag>
|
||||
<van-tag plain>返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag type="danger">四字标签</van-tag>
|
||||
<van-tag type="danger">一</van-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
@ -67,19 +67,19 @@ export default {
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag plain type="danger">返现</zan-tag>
|
||||
<van-tag type="danger">返现</van-tag>
|
||||
<van-tag plain type="danger">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag plain type="primary">返现</zan-tag>
|
||||
<van-tag type="primary">返现</van-tag>
|
||||
<van-tag plain type="primary">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag plain type="success">返现</zan-tag>
|
||||
<van-tag type="success">返现</van-tag>
|
||||
<van-tag plain type="success">返现</van-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" mark>返现</zan-tag>
|
||||
<van-tag type="danger" mark>返现</van-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.zan-button {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { Toast } from '@youzan/zanui-vue';
|
||||
import { Toast } from 'vant';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
@ -79,12 +79,12 @@ import { Toast } from '@youzan/zanui-vue';
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="showSimpleToast">普通文字提示</zan-button>
|
||||
<zan-button @click="showLoadingToast">加载Toast</zan-button>
|
||||
<zan-button @click="showSuccessToast">成功</zan-button>
|
||||
<zan-button @click="showFailToast">失败</zan-button>
|
||||
<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
|
||||
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
|
||||
<van-button @click="showSimpleToast">普通文字提示</van-button>
|
||||
<van-button @click="showLoadingToast">加载Toast</van-button>
|
||||
<van-button @click="showSuccessToast">成功</van-button>
|
||||
<van-button @click="showFailToast">失败</van-button>
|
||||
<van-button @click="showForbidClickToast">背景不能点击</van-button>
|
||||
<van-button @click="showCustomizedToast(5000)">倒数5秒</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
@ -135,8 +135,8 @@ export default {
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<zan-button @click="showToast">打开</zan-button>
|
||||
<zan-button @click="closeToast">关闭</zan-button>
|
||||
<van-button @click="showToast">打开</van-button>
|
||||
<van-button @click="closeToast">关闭</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
@ -160,7 +160,7 @@ export default {
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<zan-button @click="showHtmlToast">打开</zan-button>
|
||||
<van-button @click="showHtmlToast">打开</van-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
@ -17,7 +17,7 @@ export default {
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
@ -25,8 +25,8 @@ export default {
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Uploader } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
|
||||
import { Uploader } from 'vant';
|
||||
import 'vant/lib/vant-css/uploader.css';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
@ -36,11 +36,11 @@ Vue.component(Uploader.name, Uploader);
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
|
||||
|
||||
```js
|
||||
import { Uploader } from '@youzan/zanui-vue';
|
||||
import { Uploader } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-uploader': Uploader
|
||||
'van-uploader': Uploader
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -52,9 +52,9 @@ export default {
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :after-read="logContent">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</zan-uploader>
|
||||
<van-uploader :after-read="logContent">
|
||||
<van-icon name="photograph"></van-icon>
|
||||
</van-uploader>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from '@youzan/zanui-vue';
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
Waterfall.install(Vue);
|
||||
```
|
||||
@ -18,7 +18,7 @@ Waterfall.install(Vue);
|
||||
如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
|
||||
|
||||
```js
|
||||
import { Waterfall } from '@youzan/zanui-vue';
|
||||
import { Waterfall } from 'vant';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
v-if="leftNav"
|
||||
class="footer-nav__link footer-nav__left"
|
||||
@click="handleNavClick('prev')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>{{ leftNav.title }}</span>
|
||||
</a>
|
||||
<a
|
||||
@ -13,7 +13,7 @@
|
||||
v-if="rightNav"
|
||||
class="footer-nav__link footer-nav__right"
|
||||
@click="handleNavClick('next')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<van-icon name="arrow"></van-icon>
|
||||
<span>{{ rightNav.title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<zan-popup v-model="currentValue" :lock-on-scroll="true">
|
||||
<van-popup v-model="currentValue" :lock-on-scroll="true">
|
||||
<div class="mobile-popup">
|
||||
<iframe :src="url" class="mobile-popup-iframe"></iframe>
|
||||
</div>
|
||||
</zan-popup>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -5,7 +5,7 @@ import navConfig from './nav.config.js';
|
||||
import routes from './router.config';
|
||||
import ZanUI from 'src/index';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
|
||||
import DemoList from './components/demo-list.vue';
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ const global = {
|
||||
window._global = global;
|
||||
|
||||
import '../assets/docs.css';
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
|
||||
function isMobile() {
|
||||
var platform = navigator.userAgent.toLowerCase();
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>ZanUI</title>
|
||||
<title>Vant - Vue mobile ui in Youzan</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
14
package.json
14
package.json
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "@youzan/zanui-vue",
|
||||
"name": "vant",
|
||||
"version": "0.1.2",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/zanui.js",
|
||||
"style": "lib/zanui-css/index.css",
|
||||
"main": "lib/vant.js",
|
||||
"style": "lib/vant-css/index.css",
|
||||
"files": [
|
||||
"lib",
|
||||
"src",
|
||||
@ -14,13 +14,13 @@
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js --content-base ./",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
|
||||
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
|
||||
"build:components": "webpack --progress --hide-modules --config build/webpack.components.js",
|
||||
"build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
|
||||
"build:vant": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
|
||||
"build:example": "node build/genExamples.js",
|
||||
"deploy": "npm run deploy:docs && gh-pages -d docs/dist && rimraf docs/dist",
|
||||
"deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:components && npm run build:utils && npm run build:zanui-css",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:vant && npm run build:components && npm run build:utils && npm run build:vant-css",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib",
|
||||
"lint": "felint lint src/**/*.js packages/**/*.{js,vue} build/**/*.js",
|
||||
"test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
|
||||
@ -30,7 +30,7 @@
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@gitlab.qima-inc.com:fe/zanui-vue.git"
|
||||
"url": "git@github.com:youzan/vant.git"
|
||||
},
|
||||
"keywords": [
|
||||
"youzan",
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
<template>
|
||||
<transition name="actionsheet-float">
|
||||
<div class="zan-actionsheet" :class="[ title ? 'zan-actionsheet--withtitle' : '' ]" v-show="currentValue">
|
||||
<div class="zan-actionsheet__header" v-if="title">
|
||||
<div class="van-actionsheet" :class="[ title ? 'van-actionsheet--withtitle' : '' ]" v-show="currentValue">
|
||||
<div class="van-actionsheet__header" v-if="title">
|
||||
<h3 v-text="title"></h3>
|
||||
<zan-icon name="close" @click.stop="currentValue = false"></zan-icon>
|
||||
<van-icon name="close" @click.stop="currentValue = false"></van-icon>
|
||||
</div>
|
||||
<template v-if="!title">
|
||||
<ul class="zan-actionsheet__list">
|
||||
<ul class="van-actionsheet__list">
|
||||
<li
|
||||
v-for="item in actions"
|
||||
class="zan-actionsheet__item"
|
||||
:class="[item.className, item.loading ? 'zan-actionsheet__item--loading' : '']"
|
||||
class="van-actionsheet__item"
|
||||
:class="[item.className, item.loading ? 'van-actionsheet__item--loading' : '']"
|
||||
@click.stop="handleItemClick(item)">
|
||||
<template v-if="!item.loading">
|
||||
<span class="zan-actionsheet__name">{{ item.name }}</span>
|
||||
<span class="zan-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
|
||||
<span class="van-actionsheet__name">{{ item.name }}</span>
|
||||
<span class="van-actionsheet__subname" v-if="item.subname">{{ item.subname }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<zan-loading class="zan-actionsheet__loading" type="circle" color="black"></zan-loading>
|
||||
<van-loading class="van-actionsheet__loading" type="circle" color="black"></van-loading>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="zan-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
|
||||
<a class="van-actionsheet__button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="zan-actionsheet__content">
|
||||
<div class="van-actionsheet__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -38,7 +38,7 @@ import ZanLoading from 'packages/loading';
|
||||
import ZanIcon from 'packages/icon';
|
||||
|
||||
export default {
|
||||
name: 'zan-actionsheet',
|
||||
name: 'van-actionsheet',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="zan-badge-group">
|
||||
<div class="van-badge-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-badge-group',
|
||||
name: 'van-badge-group',
|
||||
|
||||
props: {
|
||||
// 当前激活 tab 面板的 key
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<a class="zan-badge" :href="url" @click="handleClick" :class="{
|
||||
'zan-badge--select': isSelect
|
||||
<a class="van-badge" :href="url" @click="handleClick" :class="{
|
||||
'van-badge--select': isSelect
|
||||
}">
|
||||
<div class="zan-badge__active"></div>
|
||||
<div v-if="info" class="zan-badge__info">{{info}}</div>
|
||||
<div class="van-badge__active"></div>
|
||||
<div v-if="info" class="van-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-badge',
|
||||
name: 'van-badge',
|
||||
|
||||
props: {
|
||||
title: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-button",
|
||||
"name": "@youzan/van-button",
|
||||
"version": "0.0.1",
|
||||
"description": "button component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
* @param {slot} - 显示文本
|
||||
*
|
||||
* @example
|
||||
* <zan-button size="large" type="primary">按钮</zan-button>
|
||||
* <van-button size="large" type="primary">按钮</van-button>
|
||||
*/
|
||||
|
||||
import ZanLoading from 'packages/loading';
|
||||
@ -17,10 +17,10 @@ const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'zan-button',
|
||||
name: 'van-button',
|
||||
|
||||
components: {
|
||||
'zan-loading': ZanLoading
|
||||
'van-loading': ZanLoading
|
||||
},
|
||||
|
||||
props: {
|
||||
@ -65,28 +65,28 @@ export default {
|
||||
type={nativeType}
|
||||
disabled={disabled}
|
||||
class={[
|
||||
'zan-button',
|
||||
'zan-button--' + type,
|
||||
'zan-button--' + size,
|
||||
'van-button',
|
||||
'van-button--' + type,
|
||||
'van-button--' + size,
|
||||
{
|
||||
'zan-button--disabled': disabled,
|
||||
'zan-button--loading': loading,
|
||||
'zan-button--block': block,
|
||||
'zan-button--bottom-action': bottomAction
|
||||
'van-button--disabled': disabled,
|
||||
'van-button--loading': loading,
|
||||
'van-button--block': block,
|
||||
'van-button--bottom-action': bottomAction
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading
|
||||
? <zan-loading
|
||||
class="zan-button__icon-loading"
|
||||
? <van-loading
|
||||
class="van-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}>
|
||||
</zan-loading>
|
||||
</van-loading>
|
||||
: null
|
||||
}
|
||||
<span class="zan-button__text">{this.$slots.default}</span>
|
||||
<span class="van-button__text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-card",
|
||||
"name": "@youzan/van-card",
|
||||
"version": "0.0.1",
|
||||
"description": "card component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="zan-card">
|
||||
<img :src="thumb" alt="" class="zan-card__img">
|
||||
<div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
|
||||
<div class="zan-card__info">
|
||||
<div class="van-card">
|
||||
<img :src="thumb" alt="" class="van-card__img">
|
||||
<div class="van-card__content" :class="{'van-card__content--center': !this.$slots.footer}">
|
||||
<div class="van-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="zan-card__title"></h4>
|
||||
<h4 v-text="title" class="van-card__title"></h4>
|
||||
</slot>
|
||||
<slot name="desc">
|
||||
<p v-if="desc" v-text="desc" class="zan-card__desc"></p>
|
||||
<p v-if="desc" v-text="desc" class="van-card__desc"></p>
|
||||
</slot>
|
||||
<slot name="tags"></slot>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-card',
|
||||
name: 'van-card',
|
||||
props: {
|
||||
thumb: {
|
||||
type: String,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-cell",
|
||||
"name": "@youzan/van-cell",
|
||||
"version": "0.0.1",
|
||||
"description": "cell component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="zan-cell-group">
|
||||
<div class="van-cell-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-cell-group'
|
||||
name: 'van-cell-group'
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,36 +1,36 @@
|
||||
<template>
|
||||
<a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
|
||||
<a :class="['van-cell', { 'van-cell--required': required }]" :href="url" @click="handleClick">
|
||||
<div
|
||||
class="zan-cell__title"
|
||||
class="van-cell__title"
|
||||
v-if="this.$slots.title || title"
|
||||
>
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
|
||||
<i v-if="icon" class="van-icon" :class="'van-icon-' + icon"></i>
|
||||
</slot>
|
||||
<slot name="title">
|
||||
<span class="zan-cell__text" v-text="title"></span>
|
||||
<span class="zan-cell__label" v-if="label" v-text="label"></span>
|
||||
<span class="van-cell__text" v-text="title"></span>
|
||||
<span class="van-cell__label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div
|
||||
class="zan-cell__value"
|
||||
class="van-cell__value"
|
||||
v-if="value || this.$slots.default"
|
||||
:class="{
|
||||
'zan-cell__value--link': isLink,
|
||||
'zan-cell__value--alone': !this.$slots.title && !title && !label
|
||||
'van-cell__value--link': isLink,
|
||||
'van-cell__value--alone': !this.$slots.title && !title && !label
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<i class="zan-icon zan-icon-arrow" v-if="isLink"></i>
|
||||
<i class="van-icon van-icon-arrow" v-if="isLink"></i>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-cell',
|
||||
name: 'van-cell',
|
||||
|
||||
props: {
|
||||
icon: String,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-checkbox",
|
||||
"name": "@youzan/van-checkbox",
|
||||
"version": "0.0.1",
|
||||
"description": "checkbox component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="zan-checkbox-group">
|
||||
<div class="van-checkbox-group">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-checkbox-group',
|
||||
name: 'van-checkbox-group',
|
||||
|
||||
props: {
|
||||
value: {},
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
<template>
|
||||
<div
|
||||
class="zan-checkbox"
|
||||
class="van-checkbox"
|
||||
:class="{
|
||||
'zan-checkbox--disabled': isDisabled
|
||||
'van-checkbox--disabled': isDisabled
|
||||
}">
|
||||
<span class="zan-checkbox__input">
|
||||
<span class="van-checkbox__input">
|
||||
<input
|
||||
v-model="currentValue"
|
||||
type="checkbox"
|
||||
class="zan-checkbox__control"
|
||||
class="van-checkbox__control"
|
||||
:disabled="isDisabled">
|
||||
<span class="zan-icon" :class="{
|
||||
'zan-icon-checked': isChecked,
|
||||
'zan-icon-check': !isChecked
|
||||
<span class="van-icon" :class="{
|
||||
'van-icon-checked': isChecked,
|
||||
'van-icon-check': !isChecked
|
||||
}">
|
||||
</span>
|
||||
</span>
|
||||
<span class="zan-checkbox__label" @click="handleLabelClick">
|
||||
<span class="van-checkbox__label" @click="handleLabelClick">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
@ -26,7 +26,7 @@
|
||||
import findParent from 'src/mixins/findParent';
|
||||
|
||||
export default {
|
||||
name: 'zan-checkbox',
|
||||
name: 'van-checkbox',
|
||||
|
||||
mixins: [findParent],
|
||||
|
||||
@ -38,10 +38,10 @@ export default {
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* `checkbox`是否在`zan-checkbox-group`中
|
||||
* `checkbox`是否在`van-checkbox-group`中
|
||||
*/
|
||||
isGroup() {
|
||||
return !!this.findParentByComponentName('zan-checkbox-group');
|
||||
return !!this.findParentByComponentName('van-checkbox-group');
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@ -14,13 +14,13 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-col',
|
||||
name: 'van-col',
|
||||
props: {
|
||||
span: [Number, String],
|
||||
offset: [Number, String],
|
||||
prefix: {
|
||||
type: String,
|
||||
default: 'zan'
|
||||
default: 'van'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-datetime-picker",
|
||||
"name": "@youzan/van-datetime-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "datetime picker component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<zan-picker
|
||||
<van-picker
|
||||
ref="picker"
|
||||
:columns="columns"
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="handlePickerChange"
|
||||
@confirm="handlePickerConfirm"
|
||||
showToolbar>
|
||||
</zan-picker>
|
||||
</van-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -15,7 +15,7 @@ import Picker from 'packages/picker';
|
||||
const allowedType = ['time', 'date', 'datetime'];
|
||||
|
||||
export default {
|
||||
name: 'zan-datetime-picker',
|
||||
name: 'van-datetime-picker',
|
||||
|
||||
components: {
|
||||
Picker
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-dialog",
|
||||
"name": "@youzan/van-dialog",
|
||||
"version": "0.0.1",
|
||||
"description": "dialog component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<transition name="dialog-bounce">
|
||||
<div class="zan-dialog-wrapper">
|
||||
<div class="zan-dialog" v-show="value">
|
||||
<div class="zan-dialog__header" v-if="title">
|
||||
<div class="zan-dialog__title" v-text="title"></div>
|
||||
<div class="van-dialog-wrapper">
|
||||
<div class="van-dialog" v-show="value">
|
||||
<div class="van-dialog__header" v-if="title">
|
||||
<div class="van-dialog__title" v-text="title"></div>
|
||||
</div>
|
||||
<div class="zan-dialog__content" v-if="message">
|
||||
<div class="zan-dialog__message" :class="{ 'zan-dialog__message--notitle': !title }" v-html="message"></div>
|
||||
<div class="van-dialog__content" v-if="message">
|
||||
<div class="van-dialog__message" :class="{ 'van-dialog__message--notitle': !title }" v-html="message"></div>
|
||||
</div>
|
||||
<div class="zan-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="zan-dialog__btn zan-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="zan-dialog__btn zan-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
<div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
|
||||
<button class="van-dialog__btn van-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
|
||||
<button class="van-dialog__btn van-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@ const CANCEL_TEXT = '取消';
|
||||
const CONFIRM_TEXT = '确认';
|
||||
|
||||
export default {
|
||||
name: 'zan-dialog',
|
||||
name: 'van-dialog',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-field",
|
||||
"name": "@youzan/van-field",
|
||||
"version": "0.0.1",
|
||||
"description": "form field component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<zan-cell
|
||||
class="zan-field"
|
||||
<van-cell
|
||||
class="van-field"
|
||||
:title="label"
|
||||
:required="required"
|
||||
:class="{
|
||||
'zan-field--hastextarea': type === 'textarea',
|
||||
'zan-field--nolabel': !label,
|
||||
'zan-field--disabled': disabled,
|
||||
'zan-field--error': error,
|
||||
'zan-field--border': border,
|
||||
'zan-field--autosize': autosize
|
||||
'van-field--hastextarea': type === 'textarea',
|
||||
'van-field--nolabel': !label,
|
||||
'van-field--disabled': disabled,
|
||||
'van-field--error': error,
|
||||
'van-field--border': border,
|
||||
'van-field--autosize': autosize
|
||||
}">
|
||||
<textarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textareaElement"
|
||||
class="zan-field__control"
|
||||
class="van-field__control"
|
||||
v-model="currentValue"
|
||||
@focus="handleInputFocus"
|
||||
:placeholder="placeholder"
|
||||
@ -26,7 +26,7 @@
|
||||
</textarea>
|
||||
<input
|
||||
v-else
|
||||
class="zan-field__control"
|
||||
class="van-field__control"
|
||||
:value="currentValue"
|
||||
@input="handleInput"
|
||||
@focus="handleInputFocus"
|
||||
@ -35,7 +35,7 @@
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
:readonly="readonly">
|
||||
</zan-cell>
|
||||
</van-cell>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -43,7 +43,7 @@ const VALID_TYPES = ['text', 'number', 'email', 'url', 'tel', 'date', 'datetime'
|
||||
import zanCell from 'packages/cell';
|
||||
|
||||
export default {
|
||||
name: 'zan-field',
|
||||
name: 'van-field',
|
||||
|
||||
components: {
|
||||
zanCell
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@youzan/zan-icon",
|
||||
"name": "@youzan/van-icon",
|
||||
"version": "0.0.1",
|
||||
"description": "zan-icon",
|
||||
"description": "van-icon",
|
||||
"main": "index.js",
|
||||
"author": "zhangmin <zhangmin@youzan.com>",
|
||||
"devDependencies": {},
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<i class="zan-icon" :class="'zan-icon-' + name" @click="handleIconClick"></i>
|
||||
<i class="van-icon" :class="'van-icon-' + name" @click="handleIconClick"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-icon',
|
||||
name: 'van-icon',
|
||||
|
||||
props: {
|
||||
name: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-image-pewview",
|
||||
"name": "@youzan/van-image-pewview",
|
||||
"version": "0.0.1",
|
||||
"description": "image preview component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<transition name="image-fade">
|
||||
<div class="zan-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
|
||||
<zan-swipe>
|
||||
<zan-swipe-item v-for="item in images">
|
||||
<img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
<div class="van-image-preview" ref="previewContainer" v-show="value" @click="handlePreviewClick">
|
||||
<van-swipe>
|
||||
<van-swipe-item v-for="item in images">
|
||||
<img class="van-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||
</van-swipe-item>
|
||||
</van-swipe>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -16,7 +16,7 @@ import ZanSwipe from 'packages/swipe';
|
||||
import ZanSwipeItem from 'packages/swipe-item';
|
||||
|
||||
export default {
|
||||
name: 'zan-image-preview',
|
||||
name: 'van-image-preview',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
@ -57,8 +57,8 @@ export default {
|
||||
const target = event.currentTarget;
|
||||
const targetRatio = target.width / target.height;
|
||||
|
||||
const centerClass = 'zan-image-preview__image--center';
|
||||
const bigClass = 'zan-image-preview__image--big';
|
||||
const centerClass = 'van-image-preview__image--center';
|
||||
const bigClass = 'van-image-preview__image--big';
|
||||
|
||||
if (targetRatio > ratio) {
|
||||
target.className += (' ' + centerClass);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-loading",
|
||||
"name": "@youzan/van-loading",
|
||||
"version": "0.0.1",
|
||||
"description": "loading component",
|
||||
"main": "./lib/index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="zan-loading">
|
||||
<span class="zan-loading__spinner" :class="['zan-loading__spinner--' + type, 'zan-loading__spinner--' + color]"></span>
|
||||
<div class="van-loading">
|
||||
<span class="van-loading__spinner" :class="['van-loading__spinner--' + type, 'van-loading__spinner--' + color]"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
const VALID_TYPES = ['gradient-circle', 'circle'];
|
||||
const VALID_COLORS = ['black', 'white'];
|
||||
export default {
|
||||
name: 'zan-loading',
|
||||
name: 'van-loading',
|
||||
|
||||
props: {
|
||||
type: {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-panel",
|
||||
"name": "@youzan/van-panel",
|
||||
"version": "0.0.1",
|
||||
"description": "panel component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class="zan-panel">
|
||||
<div class="zan-panel__header">
|
||||
<div class="van-panel">
|
||||
<div class="van-panel__header">
|
||||
<slot name="header">
|
||||
<h4 class="zan-panel__title" v-text="title"></h4>
|
||||
<span class="zan-panel__desc" v-if="desc" v-text="desc"></span>
|
||||
<span class="zan-panel__status" v-if="status" v-text="status"></span>
|
||||
<h4 class="van-panel__title" v-text="title"></h4>
|
||||
<span class="van-panel__desc" v-if="desc" v-text="desc"></span>
|
||||
<span class="van-panel__status" v-if="status" v-text="status"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-panel__content">
|
||||
<div class="van-panel__content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="zan-panel__footer" v-if="this.$slots.footer">
|
||||
<div class="van-panel__footer" v-if="this.$slots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-panel',
|
||||
name: 'van-panel',
|
||||
props: {
|
||||
title: String,
|
||||
desc: String,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-picker",
|
||||
"name": "@youzan/van-picker",
|
||||
"version": "0.0.1",
|
||||
"description": "picker component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="zan-picker-column" :class="classNames">
|
||||
<div class="zan-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||
<div class="van-picker-column" :class="classNames">
|
||||
<div class="van-picker-column-wrapper" :class="{ dragging: isDragging }" ref="wrapper" :style="{ height: visibleContentHeight + 'px' }">
|
||||
<div
|
||||
v-for="item in currentValues"
|
||||
class="zan-picker-column__item"
|
||||
:class="{ 'zan-picker-column__item--selected': item === currentValue }"
|
||||
class="van-picker-column__item"
|
||||
:class="{ 'van-picker-column__item--selected': item === currentValue }"
|
||||
:style="{ height: itemHeight + 'px', lineHeight: itemHeight + 'px' }">
|
||||
{{ typeof item === 'object' && item[valueKey] ? item[valueKey] : item }}
|
||||
</div>
|
||||
@ -19,7 +19,7 @@ import draggable from './draggable';
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'zan-picker-column',
|
||||
name: 'van-picker-column',
|
||||
|
||||
props: {
|
||||
/**
|
||||
@ -168,7 +168,7 @@ export default {
|
||||
startTop: event.pageY,
|
||||
startTranslateTop: translateUtil.getElementTranslate(el).top
|
||||
};
|
||||
pickerItems = el.querySelectorAll('.zan-picker-item'); // eslint-disable-line
|
||||
pickerItems = el.querySelectorAll('.van-picker-item'); // eslint-disable-line
|
||||
},
|
||||
|
||||
drag: (event) => {
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="zan-picker">
|
||||
<div class="zan-picker__toolbar" v-show="showToolbar">
|
||||
<div class="van-picker">
|
||||
<div class="van-picker__toolbar" v-show="showToolbar">
|
||||
<slot>
|
||||
<a href="javascript:void(0)" class="zan-picker__cancel" @click="handlePickerCancel">取消</a>
|
||||
<a href="javascript:void(0)" class="zan-picker__confirm" @click="handlePickerConfirm">完成</a>
|
||||
<a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
|
||||
<a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-picker__columns" :class="['zan-picker__columns--' + columns.length]">
|
||||
<div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
|
||||
<picker-column
|
||||
v-for="(item, index) in columns"
|
||||
v-model="values[index]"
|
||||
@ -17,7 +17,7 @@
|
||||
:value-key="valueKey"
|
||||
@columnChange="columnValueChange(index)">
|
||||
</picker-column>
|
||||
<div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
<div class="van-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -28,7 +28,7 @@ import PickerColumn from './picker-column';
|
||||
const DEFAULT_ITEM_HEIGHT = 44;
|
||||
|
||||
export default {
|
||||
name: 'zan-picker',
|
||||
name: 'van-picker',
|
||||
|
||||
components: {
|
||||
PickerColumn
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
* 获取对应索引的列的实例
|
||||
*/
|
||||
getColumn(index) {
|
||||
const children = this.$children.filter(child => child.$options.name === 'zan-picker-column');
|
||||
const children = this.$children.filter(child => child.$options.name === 'van-picker-column');
|
||||
return children[index];
|
||||
},
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-popup",
|
||||
"name": "@youzan/van-popup",
|
||||
"version": "0.0.1",
|
||||
"description": "popup component",
|
||||
"main": "./index.js",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<transition :name="currentTransition">
|
||||
<div v-show="currentValue" class="zan-popup" :class="[position ? 'zan-popup--' + position : '']">
|
||||
<div v-show="currentValue" class="van-popup" :class="[position ? 'van-popup--' + position : '']">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</transition>
|
||||
@ -10,7 +10,7 @@
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'zan-popup',
|
||||
name: 'van-popup',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@youzan/zan-progress",
|
||||
"name": "@youzan/van-progress",
|
||||
"version": "0.0.1",
|
||||
"description": "progress component",
|
||||
"main": "./index.js",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user