mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'master' into hostfix/uploader
This commit is contained in:
tsxuehu
commit
37634739c9
@ -44,7 +44,7 @@ module.exports = {
|
||||
'generator-star-spacing': [2, { 'before': true, 'after': true }],
|
||||
'handle-callback-err': [2, '^(err|error)$' ],
|
||||
'indent': [2, 2, { 'SwitchCase': 1 }],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'jsx-quotes': [2, 'prefer-double'],
|
||||
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
|
||||
'keyword-spacing': [2, { 'before': true, 'after': true }],
|
||||
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
|
||||
|
||||
@ -3,6 +3,7 @@ var fs = require('fs');
|
||||
var render = require('json-templater/string');
|
||||
var uppercamelcase = require('uppercamelcase');
|
||||
var path = require('path');
|
||||
var chalk = require('chalk');
|
||||
|
||||
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
|
||||
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
|
||||
@ -70,5 +71,5 @@ var template = render(MAIN_TEMPLATE, {
|
||||
});
|
||||
|
||||
fs.writeFileSync(OUTPUT_PATH, template);
|
||||
console.log('[build entry] DONE:', OUTPUT_PATH);
|
||||
console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
|
||||
|
||||
|
||||
@ -3,8 +3,10 @@ var markdownItContainer = require('markdown-it-container');
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var cheerio = require('cheerio');
|
||||
var chalk = require('chalk');
|
||||
var striptags = require('./strip-tags');
|
||||
var Components = require('../components.json');
|
||||
var navs = require('../docs/src/nav.config.js');
|
||||
navs = navs['zh-CN'];
|
||||
|
||||
var parser = markdownIt('default', {
|
||||
html: true
|
||||
@ -29,9 +31,9 @@ var renderVueTemplate = function (html, componentName) {
|
||||
|
||||
var script = '';
|
||||
if (output.script) {
|
||||
script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);');
|
||||
script = output.script.replace('<script>', '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);');
|
||||
} else {
|
||||
script = '<script>\nimport Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>';
|
||||
script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
|
||||
}
|
||||
|
||||
result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentName}</h1>` + output['example-block'] + '</section></template>\n' +
|
||||
@ -69,18 +71,34 @@ parser.use(markdownItContainer, 'demo', {
|
||||
});
|
||||
|
||||
var docsDir = path.resolve(__dirname, '../docs');
|
||||
for (var item in Components) {
|
||||
var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
|
||||
var components = [];
|
||||
for (var i = 0; i < navs.length; i++) {
|
||||
var navItem = navs[i];
|
||||
|
||||
if (!navItem.showInMobile) continue;
|
||||
|
||||
if (!navItem.groups) {
|
||||
components.push(navs[i]);
|
||||
} else {
|
||||
for (var j = 0; j < navItem.groups.length; j++) {
|
||||
components = components.concat(navItem.groups[j].list);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < components.length; i++) {
|
||||
var item = components[i];
|
||||
var itemMdFile = `${docsDir}/examples-docs${item.path}.md`;
|
||||
if (!fs.existsSync(itemMdFile)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var itemMd = fs.readFileSync(`${docsDir}/examples-docs/${item}.md`).toString();
|
||||
var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
|
||||
var content = parser.render(itemMd);
|
||||
var result = renderVueTemplate(content, item);
|
||||
var result = renderVueTemplate(content, item.path.slice(1));
|
||||
|
||||
var exampleVueName = `${docsDir}/examples-dist/${item}.vue`;
|
||||
var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;
|
||||
|
||||
// 新建一个文件
|
||||
if (!fs.existsSync(exampleVueName)) {
|
||||
fs.closeSync(fs.openSync(exampleVueName, 'w'));
|
||||
}
|
||||
@ -89,5 +107,5 @@ for (var item in Components) {
|
||||
});
|
||||
}
|
||||
|
||||
console.log('generate examples success!');
|
||||
console.log(chalk.green('generate examples success!'));
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@ var getPoastcssPlugin = require('./utils/postcss_pipe');
|
||||
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
|
||||
var StyleExtractPlugin;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
@ -35,8 +36,8 @@ function wrap(render) {
|
||||
module.exports = {
|
||||
entry: {
|
||||
'vendor': ['vue', 'vue-router'],
|
||||
'docs': './docs/index.js',
|
||||
'examples': './docs/examples.js'
|
||||
'zan-docs': './docs/src/index.js',
|
||||
'zan-examples': './docs/src/examples.js'
|
||||
},
|
||||
output: {
|
||||
path: path.join(__dirname, '../docs/dist'),
|
||||
@ -48,14 +49,14 @@ module.exports = {
|
||||
path.join(__dirname, '../node_modules'),
|
||||
'node_modules'
|
||||
],
|
||||
extensions: ['.js', '.vue', '.pcss'],
|
||||
extensions: ['.js', '.vue', '.css'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.runtime.common.js',
|
||||
'zanui': path.join(__dirname, '..'),
|
||||
'src': path.join(__dirname, '../src'),
|
||||
'packages': path.join(__dirname, '../packages'),
|
||||
'lib': path.join(__dirname, '../lib'),
|
||||
'components': path.join(__dirname, '../docs/components')
|
||||
'components': path.join(__dirname, '../docs/src/components')
|
||||
}
|
||||
},
|
||||
module: {
|
||||
@ -97,20 +98,7 @@ module.exports = {
|
||||
},
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
StyleExtractPlugin,
|
||||
new ProgressBarPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendor', 'docs'],
|
||||
template: 'docs/index.tpl',
|
||||
filename: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendor', 'examples'],
|
||||
template: 'docs/index.tpl',
|
||||
filename: 'examples.html',
|
||||
inject: true
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
@ -160,7 +148,21 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendor', 'zan-docs'],
|
||||
template: 'docs/src/index.tpl',
|
||||
filename: 'index.html',
|
||||
inject: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
chunks: ['vendor', 'zan-examples'],
|
||||
template: 'docs/src/index.tpl',
|
||||
filename: 'examples.html',
|
||||
inject: true
|
||||
}),
|
||||
new OptimizeCssAssetsPlugin(),
|
||||
StyleExtractPlugin
|
||||
]
|
||||
};
|
||||
|
||||
@ -168,7 +170,7 @@ if (process.env.NODE_ENV === 'production') {
|
||||
delete module.exports.devtool;
|
||||
module.exports.output = {
|
||||
path: path.join(__dirname, '../docs/dist'),
|
||||
publicPath: './',
|
||||
publicPath: '/vue',
|
||||
filename: '[name].[hash:8].js'
|
||||
};
|
||||
module.exports.plugins = module.exports.plugins.concat([
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<div class="page-header">
|
||||
header
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="page-container clearfix">
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
footer
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'highlight.js/styles/color-brewer.css';
|
||||
import navConfig from './nav.config.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navConfig: navConfig
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
@import './assets/docs.css';
|
||||
</style>
|
||||
@ -41,13 +41,13 @@ ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
line-height: 1.8;
|
||||
code.hljs {
|
||||
line-height: 1.5;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 18px 24px;
|
||||
background-color: #f9fafc;
|
||||
border: solid 1px #eaeefb;
|
||||
padding: 20px;
|
||||
background-color: #f8f8f8;
|
||||
border: solid 1px #E5E5E5;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
@ -66,29 +66,26 @@ ul, ol {
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 40px 15px;
|
||||
margin: 110px 20px 40px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: table;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
margin-left: 220px;
|
||||
padding: 0 40px;
|
||||
display: table-cell;
|
||||
flex: 1;
|
||||
|
||||
section {
|
||||
padding: 0 40px;
|
||||
|
||||
> h1,
|
||||
> h2,
|
||||
> h3,
|
||||
@ -211,9 +208,3 @@ ul, ol {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
height: 150px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
import MobilePopup from 'components/mobile-popup.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MobilePopup
|
||||
},
|
||||
|
||||
computed: {
|
||||
mobileUrl() {
|
||||
return '/examples.html#' + location.pathname.slice(4);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mobileShow: false
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -5,6 +5,8 @@
|
||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||
</zan-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带取消按钮的ActionSheet">
|
||||
<div class="zan-row">
|
||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||
@ -12,6 +14,8 @@
|
||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</zan-actionsheet>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="带标题的ActionSheet">
|
||||
<div class="zan-row">
|
||||
<zan-button @click="show3 = true">弹出带标题的actionsheet</zan-button>
|
||||
@ -39,7 +43,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
@ -53,7 +57,8 @@ export default {
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx'
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
@ -71,6 +76,12 @@ export default {
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleActionClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,15 +1,23 @@
|
||||
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
|
||||
<zan-badge-group :active-key="activeKey">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
<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>
|
||||
|
||||
</example-block><example-block title="选中某个badge">
|
||||
<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>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -24,15 +24,19 @@
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block="">normal</zan-button>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block="">small</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block="">mini</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
@ -53,12 +57,20 @@
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="button group">
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@ -70,12 +82,8 @@
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -20,4 +20,4 @@
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -4,11 +4,6 @@
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="带*号，标明必填">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" required></zan-cell>
|
||||
</zan-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>
|
||||
@ -32,22 +27,16 @@
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link="">
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
<zan-tag type="danger">官方</zan-tag>
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template><section class="demo-datetime-picker"><h1 class="demo-title">datetime-picker</h1><example-block title="基础用法">
|
||||
<zan-datetime-picker type="time" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
<zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
</zan-datetime-picker>
|
||||
|
||||
|
||||
@ -7,13 +7,14 @@
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date()
|
||||
minDate: new Date(),
|
||||
currentDate: null
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="消息提示">
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
|
||||
</example-block><example-block title="消息确认">
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
|
||||
|
||||
@ -16,7 +19,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Dialog } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,44 +1,146 @@
|
||||
<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
<zan-icon name="close"></zan-icon>
|
||||
<zan-icon name="location"></zan-icon>
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<zan-icon name="like"></zan-icon>
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
<zan-icon name="add"></zan-icon>
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
<zan-icon name="search"></zan-icon>
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
<zan-icon name="success"></zan-icon>
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<span>qr-invalid</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
<span>qr</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
<span>exchange</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="close"></zan-icon>
|
||||
<span>close</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="location"></zan-icon>
|
||||
<span>location</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
<span>upgrade</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<span>check</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<span>checked</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<span>like-o</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like" style="color: red;"></zan-icon>
|
||||
<span>like</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<span>chat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<span>shop</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
<span>photograph</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add"></zan-icon>
|
||||
<span>add</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
<span>add2</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
<span>photo</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
<span>logistics</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
<span>edit</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
<span>passed</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
<span>cart</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<span>arrow</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
<span>gift</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="search"></zan-icon>
|
||||
<span>search</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
<span>clear</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="success"></zan-icon>
|
||||
<span>success</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
<span>fail</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="contact"></zan-icon>
|
||||
<span>contact</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.zan-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
margin: 10px;
|
||||
font-size: 45px;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -14,15 +14,19 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { ImagePreview } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
71
docs/examples-dist/layout.vue
Normal file
71
docs/examples-dist/layout.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</zan-col>
|
||||
<zan-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">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="在列元素之间增加间距">
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
78
docs/examples-dist/lazyload.vue
Normal file
78
docs/examples-dist/lazyload.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template><section class="demo-lazyload"><h1 class="demo-title">lazyload</h1><example-block title="基础用法">
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="img in imageList">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="背景图懒加载">
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="img in backgroundImageList">
|
||||
<div class="lazy-background" v-lazy:background-image="img"></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="懒加载模块">
|
||||
<lazy-component @show="handleComponentShow">
|
||||
<ul class="image-list">
|
||||
<li v-for="img in componentImageList">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
</lazy-component>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b lazyload {
|
||||
.lazy-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lazy-background {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
|
||||
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,41 +1,36 @@
|
||||
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="基础用法">
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">渐变浅色spinner</h2>
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="渐变深色spinner">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
|
||||
</example-block><example-block title="">
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.zan-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
padding: 25px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -62,4 +62,4 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -11,7 +11,7 @@
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
|
||||
@ -1,59 +1,44 @@
|
||||
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
<zan-button @click="showDialog">弹出dialog</zan-button>
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" class="zan-popup-4">
|
||||
<zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</zan-popup>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="从不同位置弹出菜单">
|
||||
<zan-button block="" @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>
|
||||
|
||||
<zan-button block="" @click="popupShow3 = true">从上方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
|
||||
<zan-button block="" @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>
|
||||
|
||||
<zan-button block="" @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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.examples,
|
||||
.example-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.zan-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zan-popup-4 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
@ -61,14 +46,34 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-4,
|
||||
.zan-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin: 15px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
@ -80,15 +85,16 @@ export default {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
popupShow4: false,
|
||||
popupShow5: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
popupShow3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
this.popupShow3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
</div>
|
||||
</example-block><example-block title="自定义颜色">
|
||||
|
||||
<div class="demo-progress__wrapper">
|
||||
|
||||
</example-block><example-block title="自定义颜色和文字">
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
@ -43,4 +43,4 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -24,7 +24,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -2,14 +2,26 @@
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="监听对应事件">
|
||||
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
|
||||
<zan-swipe>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
<zan-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="自动轮播">
|
||||
<zan-swipe :auto-play="true">
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
<zan-swipe auto-play="" @pagechange:end="handlePageEnd">
|
||||
<zan-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@ -33,4 +31,25 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoImages: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
],
|
||||
images: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePageEnd(page, index) {
|
||||
console.log(page, index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,24 +1,32 @@
|
||||
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
<zan-switch class="some-customized-class" v-model="switchState1"></zan-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>
|
||||
<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>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="">
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
|
||||
|
||||
@ -26,36 +34,38 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
.examples {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
switchState1: true,
|
||||
switchState2: true,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? ' ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -7,17 +7,27 @@
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
|
||||
</example-block><example-block title="禁用用法">
|
||||
</example-block><example-block title="基础用法">
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab disable="" title="选项二" @disable="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-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>
|
||||
|
||||
|
||||
</example-block><example-block title="card样式用法">
|
||||
|
||||
</example-block><example-block title="card样式">
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
@ -26,8 +36,8 @@
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
|
||||
</example-block><example-block title="自定义样式用法">
|
||||
<zan-tabs active="2" navclass="custom-tabwrap">
|
||||
</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>
|
||||
@ -36,6 +46,18 @@
|
||||
</zan-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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@ -44,21 +66,31 @@
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-tabs--card .zan-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style><style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
@ -66,7 +98,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -81,6 +113,10 @@ export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<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="true">返现</zan-tag>
|
||||
<zan-tag plain="">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
@ -12,18 +12,18 @@
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
<zan-tag plain="" type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
<zan-tag plain="" type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
<zan-tag plain="" type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
<zan-tag type="danger" mark="">返现</zan-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
@ -37,4 +37,4 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -30,7 +30,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
@ -60,9 +60,9 @@ export default {
|
||||
type: 'success',
|
||||
message: leftSec.toString()
|
||||
});
|
||||
window.setInterval(() => {
|
||||
const id = window.setInterval(() => {
|
||||
if (leftSec <= 1) {
|
||||
window.clearInterval();
|
||||
window.clearInterval(id);
|
||||
toast.message = '跳转中...'
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :before-read="logContent" @file-readed="logContent">
|
||||
<zan-uploader :before-read="logContent" :after-read="logContent">
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义上传图标">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader @file-readed="logContent">
|
||||
<zan-uploader :after-read="logContent">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
</zan-uploader>
|
||||
</div>
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -30,7 +30,142 @@ export default {
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx'
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '有赞E卡',
|
||||
subname: '（剩余260.50元）'
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleActionClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## ActionSheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`ActionSheet`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`ActionSheet`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ActionSheet } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/actionSheet.css';
|
||||
|
||||
Vue.component(ActionSheet.name, ActionSheet);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
|
||||
|
||||
```js
|
||||
import { ActionSheet } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-actionSheet': ActionSheet
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
需要传入一个`actions`的属性，该属性为一个数组，数组的每一项是一个对象，可以根据下面的[action对象](#actions)设置你想要的信息。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-row">
|
||||
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
|
||||
</div>
|
||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||
</zan-actionsheet>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
loading: true
|
||||
},
|
||||
{
|
||||
name: '有赞E卡',
|
||||
subname: '（剩余260.50元）'
|
||||
},
|
||||
{
|
||||
name: '信用卡支付'
|
||||
},
|
||||
{
|
||||
name: '其他支付方式'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleActionClick(item) {
|
||||
console.log(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 带取消按钮的ActionSheet
|
||||
|
||||
如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
|
||||
|
||||
:::demo 带取消按钮的ActionSheet
|
||||
```html
|
||||
<div class="zan-row">
|
||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||
</div>
|
||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</zan-actionsheet>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show2: false,
|
||||
actions1: [
|
||||
{
|
||||
name: '微信安全支付',
|
||||
className: 'actionsheet-wx',
|
||||
callback: this.handleActionClick
|
||||
},
|
||||
{
|
||||
name: '支付宝支付',
|
||||
@ -51,34 +186,12 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## ActionSheet
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-row">
|
||||
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
|
||||
</div>
|
||||
<zan-actionsheet v-model="show1" :actions="actions1">
|
||||
</zan-actionsheet>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带取消按钮的ActionSheet
|
||||
#### 带标题的ActionSheet
|
||||
|
||||
:::demo 带取消按钮的ActionSheet
|
||||
```html
|
||||
<div class="zan-row">
|
||||
<zan-button @click="show2 = true">弹出带取消按钮的actionsheet</zan-button>
|
||||
</div>
|
||||
<zan-actionsheet v-model="show2" :actions="actions1" cancel-text="取消">
|
||||
</zan-actionsheet>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带标题的ActionSheet
|
||||
如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
|
||||
|
||||
:::demo 带标题的ActionSheet
|
||||
```html
|
||||
@ -116,3 +229,4 @@ export default {
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
| loading | 是否是`loading`状态 |
|
||||
| callback | 点击时的回调。该回调接受一个参数，参数为当前点击`action`的对象信息 |
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
## Badge
|
||||
|
||||
### 基础用法
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -17,13 +13,68 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/badge.css';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(BadgeGroup.name, BadgeGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
|
||||
|
||||
```js
|
||||
import { Badge, BadgeGroup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-badge': Badge,
|
||||
'zan-badge-group': BadgeGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下激活第一个`badge`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group :active-key="activeKey">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 选中某个badge
|
||||
|
||||
如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
|
||||
|
||||
:::demo 选中某个badge
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
@ -38,7 +89,6 @@
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mark | badge的唯一key值 | `string` | `''` | `required` |
|
||||
| title | badge的文案标题 | `string` | `''` | `required` |
|
||||
| info | 当前badge的提示消息数量 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
|
||||
| info | 当前badge的提示消息 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 链接直接跳转或者hash | |
|
||||
|
||||
@ -7,17 +7,45 @@
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button 按钮
|
||||
|
||||
### 按钮功能
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/button.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
|
||||
|
||||
```js
|
||||
import { Button } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-button': Button
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 按钮功能
|
||||
|
||||
只接受`primary`, `default`, `danger`三种类型，默认`default`。
|
||||
|
||||
@ -37,7 +65,9 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
#### 禁用状态
|
||||
|
||||
在组件上加上`disabled`属性即可，此时按钮不可点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
@ -49,9 +79,9 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
#### 按钮尺寸
|
||||
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。`large`按钮默认100%宽度。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
@ -60,21 +90,25 @@
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block>normal</zan-button>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="normal">normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block>small</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block>mini</zan-button>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
#### 自定义按钮标签
|
||||
|
||||
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
|
||||
|
||||
@ -88,7 +122,9 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### loading按钮
|
||||
#### loading按钮
|
||||
|
||||
`loading`状态的按钮。
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
@ -103,15 +139,25 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### button group
|
||||
#### 页面底部操作按钮
|
||||
|
||||
:::demo button group
|
||||
一般用于`fixed`在底部的区域或是`popup`弹层的底部，一般只使用`primary`和`normal`两种状态。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
<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>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -122,6 +168,7 @@
|
||||
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
|
||||
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
|
||||
| tag | 按钮标签 | `string` | `button` | `a`, `span`, ... |
|
||||
| diabled | 按钮是否禁用 | `boolean` | | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | | |
|
||||
| diabled | 按钮是否禁用 | `boolean` | `false` | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | `false` | |
|
||||
| bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean` | `false` | |
|
||||
|
||||
|
||||
@ -1,6 +1,38 @@
|
||||
## Card 图文组件
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Card } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/card.css';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
|
||||
|
||||
```js
|
||||
import { Card } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-card': Card
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
@ -14,7 +46,7 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
@ -16,32 +8,53 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Cell
|
||||
## Cell 单元格
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Cell } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
|
||||
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
|
||||
|
||||
```js
|
||||
import { Cell } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-cell': Cell
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格1" value="单元格1内容">
|
||||
</zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带*号，标明必填
|
||||
|
||||
传入`required`属性
|
||||
|
||||
:::demo 带*号，标明必填
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" required></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 标题带描述信息
|
||||
#### 标题带描述信息
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
@ -54,7 +67,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图标
|
||||
#### 带图标
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
@ -67,7 +80,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 可点击的链接
|
||||
#### 可点击的链接
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
@ -80,7 +93,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
@ -90,7 +103,7 @@ export default {
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
<template slot="title">
|
||||
<span class="zan-cell-text">起码运动馆</span>
|
||||
<img src="//su.yzcdn.cn/v2/image/account/icon_guan_160421.png" class="official-img">
|
||||
<zan-tag type="danger">官方</zan-tag>
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
|
||||
@ -35,10 +35,44 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox组件
|
||||
## Checkbox 复选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
|
||||
|
||||
```js
|
||||
import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-checkbox': Checkbox,
|
||||
'zan-checkbox-group': CheckboxGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -59,6 +93,8 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Checkbox`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -79,6 +115,8 @@ export default {
|
||||
|
||||
### Checkbox组
|
||||
|
||||
需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -112,6 +150,8 @@ export default {
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
禁用`zan-checkbox-group`，此时整个组都不可点击。
|
||||
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<div class="zan-checkbox-wrapper">
|
||||
@ -139,6 +179,8 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
|
||||
@ -4,7 +4,8 @@ export default {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date()
|
||||
minDate: new Date(),
|
||||
currentDate: null
|
||||
};
|
||||
},
|
||||
|
||||
@ -23,7 +24,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker组件
|
||||
## Datetime Picker 时间选择
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
@ -31,8 +32,10 @@ export default {
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-datetime-picker
|
||||
type="time"
|
||||
<zan-datetime-picker
|
||||
v-model="currentDate"
|
||||
type="datetime"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
|
||||
@ -39,19 +39,27 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Dialog组件
|
||||
## Dialog 弹出框
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
:::demo 基础用法
|
||||
`Dialog`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
|
||||
|
||||
```js
|
||||
import { Dialog } from '@youzan/zanui-vue';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 消息提示
|
||||
|
||||
用于提示一些消息，只包含一个确认按钮。
|
||||
|
||||
:::demo 消息提示
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
@ -61,8 +69,24 @@ export default {
|
||||
}).then((action) => {
|
||||
console.log(action);
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 消息确认
|
||||
|
||||
用于确认消息，包含取消和确认按钮。
|
||||
|
||||
:::demo 消息确认
|
||||
```html
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleConfirmClick() {
|
||||
Dialog.confirm({
|
||||
title: 'confirm标题',
|
||||
@ -84,10 +108,21 @@ export default {
|
||||
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法
|
||||
|
||||
### API
|
||||
#### Dialog.alert(options)
|
||||
|
||||
消息提示时使用该方法。
|
||||
|
||||
#### Dialog.confirm(options)
|
||||
|
||||
消息确认时使用该方法。
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | `string` | | |
|
||||
| message | 内容 | `string` | | |
|
||||
| confirmButtonText | 确认按钮的文案 | `string` | `确认` | |
|
||||
| cancelButtonText | 取消按钮的文案 | `string` | `取消` | |
|
||||
|
||||
@ -18,11 +18,43 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Field组件
|
||||
## Field 输入框
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Field } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/field.css';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
|
||||
|
||||
```js
|
||||
import { Field } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-field': Field
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
@ -36,7 +68,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
#### 无label的输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
@ -48,7 +80,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 带border的输入框
|
||||
#### 带border的输入框
|
||||
|
||||
传入一个`border`属性。
|
||||
|
||||
@ -60,7 +92,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用的输入框
|
||||
#### 禁用的输入框
|
||||
|
||||
传入`disabled`属性即可。
|
||||
|
||||
@ -72,7 +104,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 错误的输入框
|
||||
#### 错误的输入框
|
||||
|
||||
传入`error`属性即可。
|
||||
|
||||
@ -85,7 +117,7 @@ export default {
|
||||
:::
|
||||
|
||||
|
||||
### Autosize的输入框(仅支持textarea)
|
||||
#### Autosize的输入框(仅支持textarea)
|
||||
|
||||
传入`autosize`属性, 且将`rows`设为1。
|
||||
|
||||
|
||||
@ -1,49 +1,185 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.zan-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-icon {
|
||||
margin: 10px;
|
||||
font-size: 45px;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Icon
|
||||
## Icon 图标
|
||||
|
||||
### 所有Icon
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Icon } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/icon.css';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
|
||||
|
||||
```js
|
||||
import { Icon } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-icon': Icon
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
设置`name`属性为对应的图标名称即可，以下目前有的所有图标：
|
||||
|
||||
:::demo 所有Icon
|
||||
```html
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
<zan-icon name="close"></zan-icon>
|
||||
<zan-icon name="location"></zan-icon>
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<zan-icon name="like"></zan-icon>
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
<zan-icon name="add"></zan-icon>
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
<zan-icon name="search"></zan-icon>
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
<zan-icon name="success"></zan-icon>
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr-invalid"></zan-icon>
|
||||
<span>qr-invalid</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="qr"></zan-icon>
|
||||
<span>qr</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="exchange"></zan-icon>
|
||||
<span>exchange</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="close"></zan-icon>
|
||||
<span>close</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="location"></zan-icon>
|
||||
<span>location</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="upgrade"></zan-icon>
|
||||
<span>upgrade</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="check"></zan-icon>
|
||||
<span>check</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="checked"></zan-icon>
|
||||
<span>checked</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like-o"></zan-icon>
|
||||
<span>like-o</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="like" style="color: red;"></zan-icon>
|
||||
<span>like</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="chat"></zan-icon>
|
||||
<span>chat</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="shop"></zan-icon>
|
||||
<span>shop</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photograph"></zan-icon>
|
||||
<span>photograph</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add"></zan-icon>
|
||||
<span>add</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="add2"></zan-icon>
|
||||
<span>add2</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="photo"></zan-icon>
|
||||
<span>photo</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="logistics"></zan-icon>
|
||||
<span>logistics</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="edit"></zan-icon>
|
||||
<span>edit</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="passed"></zan-icon>
|
||||
<span>passed</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="cart"></zan-icon>
|
||||
<span>cart</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
<span>arrow</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="gift"></zan-icon>
|
||||
<span>gift</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="search"></zan-icon>
|
||||
<span>search</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="clear"></zan-icon>
|
||||
<span>clear</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="success"></zan-icon>
|
||||
<span>success</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="fail"></zan-icon>
|
||||
<span>fail</span>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-icon name="contact"></zan-icon>
|
||||
<span>contact</span>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
@ -10,13 +10,17 @@
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -25,7 +29,17 @@ export default {
|
||||
|
||||
## ImagePreview 图片预览
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { ImagePreview } from '@youzan/zanui-vue';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo
|
||||
```html
|
||||
@ -38,8 +52,8 @@ export default {
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]);
|
||||
}
|
||||
}
|
||||
@ -48,3 +62,13 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|-----------|-----------|-----------|
|
||||
| imageUrls | 需要预览的图片 | `Array` |
|
||||
|
||||
@ -0,0 +1,134 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #666;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.white {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Layout 布局
|
||||
|
||||
主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
|
||||
|
||||
```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';
|
||||
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
|
||||
|
||||
```js
|
||||
import { Row, Col } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-row': Row,
|
||||
'zan-col': Col
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 常规用法
|
||||
|
||||
Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
|
||||
|
||||
:::demo 常规用法
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="white">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col span="4">
|
||||
<div class="gray">span: 4</div>
|
||||
</zan-col>
|
||||
<zan-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">
|
||||
<div class="gray">offset: 12, span: 12</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 在列元素之间增加间距
|
||||
|
||||
列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
|
||||
|
||||
:::demo 在列元素之间增加间距
|
||||
```html
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<div class="gray">span: 8</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
#### Row
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| gutter | 列元素之间的间距（单位为px） | `String | Number` | - | |
|
||||
|
||||
#### Column
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| span | 列元素宽度 | `String | Number` | - | |
|
||||
| offset | 列元素偏移宽度 | `String | Number` | - | |
|
||||
169
docs/examples-docs/lazyload.md
Normal file
169
docs/examples-docs/lazyload.md
Normal file
@ -0,0 +1,169 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b lazyload {
|
||||
.lazy-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lazy-background {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
|
||||
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
|
||||
],
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
|
||||
],
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Lazyload 图片懒加载
|
||||
|
||||
### 使用指南
|
||||
|
||||
`Lazyload`是`Vue`指令，所以需要使用它必须将它注册到`Vue`的指令中。
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Lazyload } from '@youzan/zanui-vue';
|
||||
|
||||
Vue.use(Lazyload, options);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
比如商品详情页很多图片的情况需要对图片进行懒加载，只需将`v-lazy`指令的值设置为你需要懒加载的图片。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="img in imageList">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FpWD3kX18w8qjM6faH-4JqOWHsF4',
|
||||
'https://img.yzcdn.cn/upload_files/2016/09/08/9ff28d555e5760fa830344f12efa0087.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/11/13/FlZIeSgbSANSPkmUHttMjoIgY3cv.jpg',
|
||||
'https://img.yzcdn.cn/upload_files/2016/12/12/FuxgsGPRnupGu_eaMuaR8W0DuSKp.jpeg'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 背景图懒加载
|
||||
|
||||
和图片懒加载不同的背景图懒加载需要使用`v-lazy:background-image`，值设置为背景图片的地址。还有一个需要注意的是你需要设置容器的样式，否则高度不会撑开。
|
||||
|
||||
:::demo 背景图懒加载
|
||||
```html
|
||||
<ul class="image-list" ref="container">
|
||||
<li v-for="img in backgroundImageList">
|
||||
<div class="lazy-background" v-lazy:background-image="img"></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
backgroundImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/Fo2dFWjXYzWDR9Jaa1AEqk1jt7e0',
|
||||
'https://img.yzcdn.cn/upload_files/2016/01/27/FkyhiZfVE8tx-4qjxR2VeiqsSZYL'
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 懒加载模块
|
||||
|
||||
懒加载模块需要使用到`lazy-component`，将需要懒加载的内容放在`lazy-component`中即可。
|
||||
|
||||
:::demo 懒加载模块
|
||||
```html
|
||||
<lazy-component @show="handleComponentShow">
|
||||
<ul class="image-list">
|
||||
<li v-for="img in componentImageList">
|
||||
<img class="lazy-img" v-lazy="img">
|
||||
</li>
|
||||
</ul>
|
||||
</lazy-component>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
componentImageList: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleComponentShow() {
|
||||
console.log('component show');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| loading | 加载时的图片 | `string` | | |
|
||||
| error | 错误时的图片 | `string` | | |
|
||||
| preload | 预加载高度的比例 | `string` | | |
|
||||
| attempt | 尝试次数 | `number` | `3` | |
|
||||
| listenEvents | 监听的事件 | `Array` | `['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']` | |
|
||||
| adapter | 适配器 | `Object` | | |
|
||||
| filter | 图片url过滤 | `Object` | | |
|
||||
| lazyComponent | 是否能懒加载模块 | `boolean` | `false` | |
|
||||
@ -1,49 +1,86 @@
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.zan-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0 auto;
|
||||
width: 80px;
|
||||
padding: 25px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading 加载中
|
||||
## Loading 加载
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
:::demo 基础用法
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Loading } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/loading.css';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
|
||||
|
||||
```js
|
||||
import { Loading } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-loading': Loading
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 渐变深色spinner
|
||||
|
||||
:::demo 渐变深色spinner
|
||||
```html
|
||||
<div class="demo-loading">
|
||||
<h2 class="demo-sub-title">渐变深色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">渐变浅色spinner</h2>
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
<h2 class="demo-sub-title">单色spinner</h2>
|
||||
<div class="demo-loading__example">
|
||||
<zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
|
||||
</div>
|
||||
<zan-loading class="some-customized-class"></zan-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 渐变浅色spinner
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div class="demo-loading__example demo-loading__example--with-bg">
|
||||
<zan-loading class="some-customized-class" :color="'white'"></zan-loading>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 单色spinner
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
|
||||
<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|
||||
@ -31,9 +31,41 @@
|
||||
|
||||
## Panel 面板
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
### 使用指南
|
||||
|
||||
### 基础用法
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Panel } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/panel.css';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
|
||||
|
||||
```js
|
||||
import { Panel } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-panel': Panel
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -45,9 +77,9 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
|
||||
@ -35,11 +35,41 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker组件
|
||||
## Picker 选择器
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
### 使用指南
|
||||
|
||||
### 基础用法
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Picker } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/picker.css';
|
||||
|
||||
Vue.component(Picker.name, Picker);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
|
||||
|
||||
```js
|
||||
import { Picker } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-picker': Picker
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -78,7 +108,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 带toolbar的Picker
|
||||
#### 带toolbar的Picker
|
||||
|
||||
:::demo 带toolbar的Picker
|
||||
```html
|
||||
|
||||
@ -1,26 +1,12 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.examples,
|
||||
.example-block {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.zan-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zan-popup-4 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
@ -28,8 +14,28 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-4,
|
||||
.zan-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin: 15px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -47,15 +53,16 @@ export default {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
popupShow4: false,
|
||||
popupShow5: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
popupShow3(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
this.popupShow3 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
@ -76,38 +83,87 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popup组件
|
||||
## Popup 弹出菜单
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Popup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/popup.css';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
|
||||
|
||||
```js
|
||||
import { Popup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-popup': Popup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`popup`默认情况下是从中间弹出。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow1 = true;">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
<zan-button block @click="popupShow1 = true">从中间弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
|
||||
从中间弹出popup
|
||||
</zan-popup>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 从不同位置弹出菜单
|
||||
|
||||
可以设置`position`属性，`popup`即能从不同位置弹出，`position`的可选值有`top`，`bottom`，`right`，`left`。
|
||||
|
||||
:::demo 从不同位置弹出菜单
|
||||
```html
|
||||
<zan-button block @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>
|
||||
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow2 = true">从上方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow2" position="top" class="zan-popup-2" :overlay="false">
|
||||
<zan-button block @click="popupShow3 = true">从上方弹出popup</zan-button>
|
||||
<zan-popup v-model="popupShow3" position="top" class="zan-popup-3" :overlay="false">
|
||||
更新成功
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow3 = true">从右方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow3" position="right" class="zan-popup-3" :overlay="false">
|
||||
<zan-button @click.native="popupShow3 = false">关闭 popup</zan-button>
|
||||
<zan-button block @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>
|
||||
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" class="zan-popup-4">
|
||||
从中间弹出popup
|
||||
<zan-button block @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>
|
||||
|
||||
<script>
|
||||
@ -132,7 +188,6 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
@ -145,4 +200,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | | |
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | `false` | `true`, `false` |
|
||||
| overlay | 是否显示背景遮罩层 | `boolean` | `true` | `true`, `false` |
|
||||
| lockOnScroll | 背景是否跟随滚动 | `boolean` | `false` | `true`, `false` |
|
||||
| position | 弹出菜单位置 | `string` | | `top`, `bottom`, `right`, `left` |
|
||||
| closeOnClickOverlay | 点击遮罩层是否关闭弹出菜单 | `boolean` | `true` | `true`, `false` |
|
||||
| transition | 弹出菜单的`transition` | `string` | `popup-slide` | |
|
||||
|
||||
@ -10,9 +10,43 @@
|
||||
</style>
|
||||
|
||||
|
||||
## Progress
|
||||
## Progress 进度条
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Progress } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/progress.css';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
|
||||
|
||||
```js
|
||||
import { Progress } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-progress': Progress
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -29,7 +63,10 @@
|
||||
:::
|
||||
|
||||
|
||||
### Inactive
|
||||
#### Inactive
|
||||
|
||||
是否置灰进度条，一般用于进度条被取消时。
|
||||
|
||||
:::demo Inactive
|
||||
```html
|
||||
<div class="demo-progress__wrapper">
|
||||
@ -40,14 +77,17 @@
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" :inactive="true" :percentage="100"></zan-progress>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 自定义颜色和文字
|
||||
:::demo 自定义颜色
|
||||
#### 自定义颜色和文字
|
||||
|
||||
可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
|
||||
|
||||
:::demo 自定义颜色和文字
|
||||
```html
|
||||
</div>
|
||||
<div class="demo-progress__wrapper">
|
||||
<zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
|
||||
</div>
|
||||
@ -64,7 +104,7 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否只会 | `boolean` | `false` | `true`, `false` |
|
||||
| inactive | 是否置灰 | `boolean` | `false` | `true`, `false` |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
|
||||
@ -23,9 +23,41 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Quantity
|
||||
## Quantity 数量选择
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Quantity } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/quantity.css';
|
||||
|
||||
Vue.component(Quantity.name, Quantity);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
|
||||
|
||||
```js
|
||||
import { Quantity } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-quantity': Quantity
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -34,7 +66,9 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用Quantity
|
||||
#### 禁用Quantity
|
||||
|
||||
设置`disabled`属性，此时`quantity`不可改变。
|
||||
|
||||
:::demo 禁用Quantity
|
||||
```html
|
||||
@ -42,7 +76,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性。
|
||||
|
||||
|
||||
@ -25,10 +25,44 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Radio组件
|
||||
## Radio 单选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Radio, RadioGroup } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/radio.css';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
Vue.component(RadioGroup.name, RadioGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
|
||||
|
||||
```js
|
||||
import { Radio, RadioGroup } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-radio': Radio,
|
||||
'zan-radio-group': RadioGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 基础用法
|
||||
|
||||
通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
@ -50,6 +84,8 @@ export default {
|
||||
|
||||
### 禁用状态
|
||||
|
||||
设置`disabled`属性即可，此时`Radio`不能点击。
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
@ -71,6 +107,8 @@ export default {
|
||||
|
||||
### radio组
|
||||
|
||||
需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
|
||||
|
||||
:::demo radio组
|
||||
```html
|
||||
<div class="zan-radios">
|
||||
@ -94,6 +132,8 @@ export default {
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
此时你需要再引入`Cell`和`CellGroup`组件。
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
|
||||
@ -3,18 +3,59 @@ export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Search 组件
|
||||
## Search 搜索
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Search } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/search.css';
|
||||
|
||||
Vue.component(Search.name, Search);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
|
||||
|
||||
```js
|
||||
import { Search } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-search': Search
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
如果你只需要在搜索时有个回调，只要监听一个`search`事件。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
@ -27,8 +68,42 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### 监听对应事件
|
||||
|
||||
除了`search`事件，还有`change`和`cancel`事件，`change`事件在`input`输入框每次`change`时触发，适用于实时搜索等，`cancel`在取消按钮点击时触发。
|
||||
|
||||
:::demo 监听对应事件
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch" @change="handleChange" @cancel="handleCancel"></zan-search>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
},
|
||||
handleChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
handleCancel() {
|
||||
alert('cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
||||
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值 |
|
||||
| cancel | 取消搜索 | |
|
||||
| search | 确定搜索 | value：当前`input`输入框的值 |
|
||||
|
||||
@ -30,11 +30,45 @@ export default {
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Steps, Step } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/steps.css';
|
||||
|
||||
Vue.component(Steps.name, Steps);
|
||||
Vue.component(Step.name, Step);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
|
||||
|
||||
```js
|
||||
import { Steps, Step } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-steps': Steps,
|
||||
'zan-step': Step
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
@ -61,7 +95,9 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 只显示步骤条
|
||||
#### 只显示步骤条
|
||||
|
||||
当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
@ -89,5 +125,6 @@ export default {
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| icon | 自定义icon区域 |
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
|
||||
@ -12,34 +12,132 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## Swipe
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoImages: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
],
|
||||
images: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
### 基础用法
|
||||
methods: {
|
||||
handlePageEnd(page, index) {
|
||||
console.log(page, index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Swipe 轮播
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/swipe.css';
|
||||
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
Vue.component(SwipeItem.name, SwipeItem);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
|
||||
|
||||
```js
|
||||
import { Swipe, SwipeItem } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-swipe': Swipe,
|
||||
'zan-swipe-item': SwipeItem
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-swipe>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
<zan-swipe-item v-for="img in images">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
images: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自动轮播
|
||||
#### 自动轮播
|
||||
|
||||
需要设置`auto-play`属性为`true`，即会自动轮播。
|
||||
|
||||
:::demo 自动轮播
|
||||
```html
|
||||
<zan-swipe :auto-play="true">
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
<zan-swipe auto-play @pagechange:end="handlePageEnd">
|
||||
<zan-swipe-item v-for="img in autoImages">
|
||||
<img v-lazy="img" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoImages: [
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
|
||||
'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePageEnd(page, index) {
|
||||
console.log(page, index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| autoPlay | 是否自动轮播 | `boolean` | `false` | `true`, `false` |
|
||||
| showIndicators | 是否显示指示器 | `boolean` | `true` | `true`, `false` |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| `pagechange:end` | 每一页轮播结束后触发 | `(elem, currIndex)`：`elem`为触发页当前的DOM节点 |
|
||||
|
||||
@ -1,83 +1,122 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
.examples {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
switchState1: true,
|
||||
switchState2: true,
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? ' ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Switch组件
|
||||
## Switch 开关
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Switch } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/switch.css';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
|
||||
|
||||
```js
|
||||
import { Switch } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-switch': Switch
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
|
||||
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
switchState1: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchState2" :on-change="updateState"></zan-switch>
|
||||
<div class="demo-switch__text">{{ switchState2 ? ' ON' : 'OFF' }}</div>
|
||||
|
||||
|
||||
<script>
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState2: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? ' ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
const state = newState ? '打开' : '关闭';
|
||||
Dialog.confirm({
|
||||
title: '提醒',
|
||||
message: '是否' + state + '开关？'
|
||||
}).then((action) => {
|
||||
this.switchState2 = newState;
|
||||
}, (error) => {
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -85,10 +124,62 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
设置`disabled`属性为`true`，此时开关不可点击。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, DISABLED</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :disabled="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, DISABLED</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
#### loading状态
|
||||
|
||||
设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<zan-switch class="some-customized-class" v-model="switchStateTrue" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">ON, LOADING</div>
|
||||
|
||||
<zan-switch class="some-customized-class" v-model="switchStateFalse" :loading="true"></zan-switch>
|
||||
<div class="demo-switch__text">OFF, LOADING</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStateTrue: true,
|
||||
switchStateFalse: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| checked | 开关状态 | `boolean` | `false` | `true`, `false` |
|
||||
| v-model | 开关状态 | `boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
|
||||
| onChange | 开关状态切换回调(默认则改变开关状态) | `function` | - | - |
|
||||
|
||||
@ -5,6 +5,22 @@
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zan-tabs--card .zan-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,14 +40,54 @@ export default {
|
||||
methods: {
|
||||
popalert() {
|
||||
alert('haha')
|
||||
},
|
||||
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Tab 组件
|
||||
## Tab 标签
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tab, Tabs } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/tab.css';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
|
||||
|
||||
```js
|
||||
import { Tab, Tabs } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-tab': Tab,
|
||||
'zan-tabs': Tabs
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
默认情况下是启用第一个`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -43,18 +99,38 @@ export default {
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
```
|
||||
|
||||
:::
|
||||
### 禁用用法
|
||||
:::demo 禁用用法
|
||||
|
||||
#### active特定tab
|
||||
|
||||
可以在`zan-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tabs :active="active">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
<zan-tab disable title="选项二" @disable="popalert">内容二</zan-tab>
|
||||
<zan-tab title="选项二">内容二</zan-tab>
|
||||
<zan-tab title="选项三">内容三</zan-tab>
|
||||
<zan-tab title="选项四">内容四</zan-tab>
|
||||
<zan-tab title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 禁用tab
|
||||
|
||||
在对应的`zan-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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
@ -67,8 +143,11 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### card样式用法
|
||||
:::demo card样式用法
|
||||
#### card样式
|
||||
|
||||
`Tabs`目前有两种样式：`line`和`card`，默认为`line`样式，也就上面基础用法中的样式，你可以在`zan-tabs`上设置`type`为`card`改为card样式。
|
||||
|
||||
:::demo card样式
|
||||
```html
|
||||
<zan-tabs type="card">
|
||||
<zan-tab title="选项一">内容一</zan-tab>
|
||||
@ -80,18 +159,12 @@ export default {
|
||||
```
|
||||
:::
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
@ -99,29 +172,27 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
### 自定义样式用法
|
||||
:::demo 自定义样式用法
|
||||
#### 自定义样式
|
||||
|
||||
可以在`zan-tabs`上设置对应的`class`，从而自定义某些样式。
|
||||
|
||||
:::demo 自定义样式
|
||||
```html
|
||||
<zan-tabs active="2" navclass="custom-tabwrap">
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
.custom-tabwrap .zan-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
.custom-tabwrap .zan-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
@ -131,6 +202,32 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
#### click事件
|
||||
|
||||
可以在`zan-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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleTabClick(index) {
|
||||
alert(index);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### zan-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
@ -141,8 +238,16 @@ export default {
|
||||
|
||||
|
||||
### zan-tab API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disable | 是否禁用这个tab | `boolean` | `false` | |
|
||||
| disabled | 是否禁用这个tab | `boolean` | `false` | |
|
||||
|
||||
### zan-tabs Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| click | 某个tab点击事件 | index：点击的`tab`的索引 |
|
||||
| disabled | 某个tab禁用时点击事件 | index：点击的`tab`的索引 |
|
||||
|
||||
|
||||
@ -8,15 +8,49 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag 组件
|
||||
## Tag 标记
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tag } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/tag.css';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
|
||||
|
||||
```js
|
||||
import { Tag } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-tag': Tag
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
<zan-tag plain>返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
@ -26,24 +60,26 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
#### 高级用法
|
||||
|
||||
设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
<zan-tag plain type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
<zan-tag plain type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
<zan-tag plain type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
<zan-tag type="danger" mark>返现</zan-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -38,9 +38,9 @@ export default {
|
||||
type: 'success',
|
||||
message: leftSec.toString()
|
||||
});
|
||||
window.setInterval(() => {
|
||||
const id = window.setInterval(() => {
|
||||
if (leftSec <= 1) {
|
||||
window.clearInterval();
|
||||
window.clearInterval(id);
|
||||
toast.message = '跳转中...'
|
||||
return;
|
||||
}
|
||||
@ -63,9 +63,19 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Toast
|
||||
## Toast 轻提示
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
`Toast`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它。
|
||||
|
||||
```js
|
||||
import { Toast } from '@youzan/zanui-vue';
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -106,9 +116,9 @@ export default {
|
||||
type: 'success',
|
||||
message: leftSec.toString()
|
||||
});
|
||||
window.setInterval(() => {
|
||||
const id = window.setInterval(() => {
|
||||
if (leftSec <= 1) {
|
||||
window.clearInterval();
|
||||
window.clearInterval(id);
|
||||
toast.message = '跳转中...'
|
||||
return;
|
||||
}
|
||||
@ -121,7 +131,7 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 手动关闭
|
||||
#### 手动关闭
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
@ -134,10 +144,10 @@ import { Toast } from 'src/index';
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
this.toast = Toast('我是提示文案，建议不超过十五字~');
|
||||
Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
Toast.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -146,7 +156,7 @@ export default {
|
||||
:::
|
||||
|
||||
|
||||
### 传入html
|
||||
#### 传入html
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
@ -171,7 +181,8 @@ export default {
|
||||
|
||||
|
||||
### 基础用法
|
||||
### Toast(options)
|
||||
|
||||
#### Toast(options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
@ -181,7 +192,8 @@ export default {
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### 快速用法
|
||||
### Toast(message) || Toast(message, options)
|
||||
|
||||
#### Toast(message) || Toast(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
@ -189,14 +201,14 @@ export default {
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.loading() || Toast.loading(message, options)
|
||||
#### Toast.loading() || Toast.loading(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.success(message) || Toast.success(message, options)
|
||||
#### Toast.success(message) || Toast.success(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
@ -204,7 +216,7 @@ export default {
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.fail(message) || Toast.fail(message, options)
|
||||
#### Toast.fail(message) || Toast.fail(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
@ -212,5 +224,6 @@ export default {
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### instanceOfToast.clear()
|
||||
#### Toast.clear()
|
||||
|
||||
关闭toast。
|
||||
|
||||
@ -12,9 +12,42 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
## Uploader 组件
|
||||
|
||||
### 基础用法
|
||||
## Uploader 图片上传
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Uploader } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
|
||||
|
||||
```js
|
||||
import { Uploader } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'zan-uploader': Uploader
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
@ -26,7 +59,9 @@ export default {
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
### 自定义上传图标
|
||||
|
||||
#### 自定义上传图标
|
||||
|
||||
:::demo 自定义上传图标
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
|
||||
@ -1,6 +1,34 @@
|
||||
## Waterfall 瀑布流
|
||||
|
||||
### 基础用法
|
||||
### 使用指南
|
||||
|
||||
#### 全局注册
|
||||
|
||||
`Waterfall`引入后就自动全局安装。如果需要，可以再次手动安装：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Waterfall } from '@youzan/zanui-vue';
|
||||
|
||||
Waterfall.install(Vue);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
|
||||
|
||||
```js
|
||||
import { Waterfall } from '@youzan/zanui-vue';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
WaterfallLower: Waterfall('lower'),
|
||||
WaterfallUpper: Waterfall('upper')
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -48,6 +76,8 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
#### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
@ -76,6 +106,8 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `function` | - | |
|
||||
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `function` | - | |
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `number` | `300` | |
|
||||
|
||||
|
||||
40
docs/src/ExamplesDocsApp.vue
Normal file
40
docs/src/ExamplesDocsApp.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<page-header></page-header>
|
||||
<div class="main-content">
|
||||
<div class="page-container clearfix">
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<page-footer></page-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import 'highlight.js/styles/color-brewer.css';
|
||||
import navConfig from './nav.config.js';
|
||||
import SideNav from './components/side-nav';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import FooterNav from './components/footer-nav';
|
||||
import PageHeader from './components/page-header';
|
||||
import PageFooter from './components/page-footer';
|
||||
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('footer-nav', FooterNav);
|
||||
Vue.component('page-header', PageHeader);
|
||||
Vue.component('page-footer', PageFooter);
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navConfig: navConfig
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -23,25 +23,27 @@ export default {
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.examples {
|
||||
width: 320px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0;
|
||||
min-height: 200px;
|
||||
max-height: 600px;
|
||||
padding: 10px 0;
|
||||
min-height: 60px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
background-color: #F8F8F8;
|
||||
border: 1px solid #E5E5E5;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-right: 345px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4px;
|
||||
margin-right: 345px;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.json';
|
||||
import navConfig from '../nav.config.js';
|
||||
import MobileNav from './mobile-nav';
|
||||
|
||||
export default {
|
||||
@ -6,7 +6,7 @@
|
||||
class="footer-nav__link footer-nav__left"
|
||||
@click="handleNavClick('prev')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
{{ leftNav.title }}
|
||||
<span>{{ leftNav.title }}</span>
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@ -14,13 +14,13 @@
|
||||
class="footer-nav__link footer-nav__right"
|
||||
@click="handleNavClick('next')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
{{ rightNav.title }}
|
||||
<span>{{ rightNav.title }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.json';
|
||||
import navConfig from '../nav.config.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -85,27 +85,25 @@ export default {
|
||||
<style>
|
||||
@component-namespace footer {
|
||||
@b nav {
|
||||
padding: 24px 0;
|
||||
font-size: 30px;
|
||||
padding: 24px 40px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
|
||||
@e link {
|
||||
color: #3388FF;
|
||||
overflow: hidden;
|
||||
padding-top: 35px;
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
|
||||
.zan-icon {
|
||||
width: 20px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border: 2px solid #3388FF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,8 +111,9 @@ export default {
|
||||
float: left;
|
||||
|
||||
.zan-icon {
|
||||
float: left;
|
||||
transform: rotate(180deg);
|
||||
left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -122,7 +121,8 @@ export default {
|
||||
float: right;
|
||||
|
||||
.zan-icon {
|
||||
right: 0;
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
23
docs/src/components/mobile-computed.js
Normal file
23
docs/src/components/mobile-computed.js
Normal file
@ -0,0 +1,23 @@
|
||||
import MobilePopup from './mobile-popup.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MobilePopup
|
||||
},
|
||||
|
||||
computed: {
|
||||
mobileUrl() {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
return '/vue/examples#' + location.pathname.slice(4);
|
||||
} else {
|
||||
return '/examples.html#' + location.pathname.slice(4);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mobileShow: false
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<zan-popup v-model="currentValue">
|
||||
<zan-popup v-model="currentValue" :lock-on-scroll="true">
|
||||
<div class="mobile-popup">
|
||||
<iframe :src="url" class="mobile-popup-iframe"></iframe>
|
||||
</div>
|
||||
59
docs/src/components/page-footer.vue
Normal file
59
docs/src/components/page-footer.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="page-footer">
|
||||
<ul class="page-footer__navs">
|
||||
<li class="page-footer__item">
|
||||
<a href="https://www.youzan.com/" class="page-footer__link" target="_blank">有赞官网</a>
|
||||
</li>
|
||||
<li class="page-footer__item">
|
||||
<a href="#" class="page-footer__link" target="_blank">有赞云</a>
|
||||
</li>
|
||||
<li class="page-footer__item">
|
||||
<a href="https://job.youzan.com/" class="page-footer__link" target="_blank">加入我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="page-footer__copyright">
|
||||
2012-{{ curYear }} © youzanyun.com - 浙公网安备 33010602004354号 增值电信业务经营许可证：浙B2-20140331 - 浙ICP备13037466号
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
curYear: (new Date()).getFullYear()
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b footer {
|
||||
height: 72px;
|
||||
margin-top: 40px;
|
||||
background-color: #34383B;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@e item {
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
@e link {
|
||||
display: block;
|
||||
color: #E5E5E5;
|
||||
font-size: 12px;
|
||||
line-height: 72px;
|
||||
}
|
||||
|
||||
@e copyright {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
line-height: 72px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
docs/src/components/page-header.vue
Normal file
123
docs/src/components/page-header.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<h1 class="page-header__logo">
|
||||
<a href="#"></a>
|
||||
</h1>
|
||||
<ul class="page-header__navs">
|
||||
<li class="page-header__item">
|
||||
<a href="/" class="page-header__link">首页</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="http://react.fe.qima-inc.com/" class="page-header__link">PC端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">移动端</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="https://github.com/youzan/zanui-weapp" class="page-header__link">微信小程序</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="page-header__subnavs">
|
||||
<li class="page-header__item">
|
||||
<a href="http://zanui.qima-inc.com/vue" class="page-header__link page-header__link--active">基础组件</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="http://zanui.qima-inc.com/captain" class="page-header__link">业务组件</a>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<span class="page-header__link">V{{ version }}</span>
|
||||
</li>
|
||||
<li class="page-header__item">
|
||||
<a href="#" class="page-header__github" target="_blank"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
version: window._global.version
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: #fbfbfb;
|
||||
|
||||
@e logo {
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
width: 78px;
|
||||
height: 20px;
|
||||
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fjm3aSwID8ROIV_5TO6dZdJ_IEgz.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 20px 0 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@e navs {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@e item {
|
||||
float: left;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@e subnavs {
|
||||
position: absolute;
|
||||
line-height: 50px;
|
||||
top: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background-color: #f2f2f2;
|
||||
|
||||
a,
|
||||
span {
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@e link {
|
||||
display: block;
|
||||
line-height: 60px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
margin: 0 20px;
|
||||
|
||||
&:hover {
|
||||
color: #3388FF;
|
||||
}
|
||||
|
||||
@m active {
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
|
||||
@e github {
|
||||
display: inline-block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
background-image: url(https://img.yzcdn.cn/upload_files/2017/03/30/Fil9peDfgzvk3kj-oFCsElS4FS1x.png);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
margin: 14px 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="side-nav">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="item in data">
|
||||
<a v-if="!item.path">{{item.name}}</a>
|
||||
<a href="javascript:void(0)" v-if="!item.path" @click="handleTitleClick(item)">{{item.name}}</a>
|
||||
<router-link
|
||||
v-else
|
||||
active-class="active"
|
||||
@ -50,16 +50,24 @@ export default {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleTitleClick(item) {
|
||||
const firstGroup = item.groups && item.groups[0];
|
||||
if (firstGroup && firstGroup.list && firstGroup.list.length !== 0) {
|
||||
return this.$router.replace(this.base + firstGroup.list[0].path);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 220px;
|
||||
width: 250px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0;
|
||||
display: table-cell;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
||||
li {
|
||||
@ -1,15 +1,18 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import navConfig from './nav.config.js';
|
||||
import routes from './router.config';
|
||||
import ZanUI from '../src/index';
|
||||
import ZanUI from 'src/index';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
import DemoList from './components/demo-list.vue';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
Vue.use(VueRouter);
|
||||
|
||||
let routesConfig = routes(navConfig, true);
|
||||
@ -1,13 +1,17 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesDocsApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import navConfig from './nav.config.js';
|
||||
import routes from './router.config';
|
||||
import SideNav from './components/side-nav';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import FooterNav from './components/footer-nav';
|
||||
import ZanUI from 'src/index.js';
|
||||
import packageJson from '../../package.json';
|
||||
|
||||
const global = {
|
||||
version: packageJson.version
|
||||
};
|
||||
window._global = global;
|
||||
|
||||
import '../assets/docs.css';
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
function isMobile() {
|
||||
@ -18,14 +22,14 @@ function isMobile() {
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('footer-nav', FooterNav);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
path: '/',
|
||||
redirect: '/component/button'
|
||||
redirect: '/component/install'
|
||||
});
|
||||
|
||||
const router = new VueRouter({
|
||||
@ -38,8 +42,10 @@ router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
const pathname = process.env.NODE_ENV === 'production' ? '/vue/examples' : '/examples.html';
|
||||
if (isMobile()) {
|
||||
window.location.replace(location.pathname + 'examples.html#' + route.path);
|
||||
window.location.replace(pathname);
|
||||
return;
|
||||
}
|
||||
document.title = route.meta.title || document.title;
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
module.exports = {
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "开发指南",
|
||||
@ -26,71 +26,79 @@
|
||||
"list": [
|
||||
{
|
||||
"path": "/button",
|
||||
"title": "Button"
|
||||
"title": "Button 按钮"
|
||||
},
|
||||
{
|
||||
"path": "/icon",
|
||||
"title": "Icon"
|
||||
"title": "Icon 图标"
|
||||
},
|
||||
{
|
||||
"path": "/cell",
|
||||
"title": "Cell"
|
||||
"title": "Cell 单元格"
|
||||
},
|
||||
{
|
||||
"path": "/progress",
|
||||
"title": "Progress"
|
||||
"title": "Progress 进度条"
|
||||
},
|
||||
{
|
||||
"path": "/panel",
|
||||
"title": "Panel"
|
||||
"title": "Panel 面板"
|
||||
},
|
||||
{
|
||||
"path": "/card",
|
||||
"title": "Card"
|
||||
"title": "Card 图文组件"
|
||||
},
|
||||
{
|
||||
"path": "/loading",
|
||||
"title": "Loading"
|
||||
"title": "Loading 加载"
|
||||
},
|
||||
{
|
||||
"path": "/layout",
|
||||
"title": "Layout 布局"
|
||||
},
|
||||
{
|
||||
"path": "/steps",
|
||||
"title": "Steps"
|
||||
"title": "Steps 步骤条"
|
||||
},
|
||||
{
|
||||
"path": "/tag",
|
||||
"title": "Tag"
|
||||
"title": "Tag 标记"
|
||||
},
|
||||
{
|
||||
"path": "/badge",
|
||||
"title": "Badge"
|
||||
"title": "Badge 徽章"
|
||||
},
|
||||
{
|
||||
"path": "/tab",
|
||||
"title": "Tab"
|
||||
"title": "Tab 标签"
|
||||
},
|
||||
{
|
||||
"path": "/popup",
|
||||
"title": "Popup"
|
||||
"title": "Popup 弹出菜单"
|
||||
},
|
||||
{
|
||||
"path": "/swipe",
|
||||
"title": "Swipe"
|
||||
"title": "Swipe 轮播"
|
||||
},
|
||||
{
|
||||
"path": "/search",
|
||||
"title": "Search"
|
||||
"title": "Search 搜索"
|
||||
},
|
||||
{
|
||||
"path": "/quantity",
|
||||
"title": "Quantity"
|
||||
"title": "Quantity 数量选择"
|
||||
},
|
||||
{
|
||||
"path": "/waterfall",
|
||||
"title": "Waterfall"
|
||||
"title": "Waterfall 瀑布流"
|
||||
},
|
||||
{
|
||||
"path": "/image-preview",
|
||||
"title": "ImagePreview"
|
||||
"title": "ImagePreview 图片预览"
|
||||
},
|
||||
{
|
||||
"path": "/lazyload",
|
||||
"title": "Lazyload 图片懒加载"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -99,23 +107,23 @@
|
||||
"list": [
|
||||
{
|
||||
"path": "/switch",
|
||||
"title": "Switch"
|
||||
"title": "Switch 开关"
|
||||
},
|
||||
{
|
||||
"path": "/field",
|
||||
"title": "Field"
|
||||
"title": "Field 输入框"
|
||||
},
|
||||
{
|
||||
"path": "/radio",
|
||||
"title": "Radio"
|
||||
"title": "Radio 单选框"
|
||||
},
|
||||
{
|
||||
"path": "/checkbox",
|
||||
"title": "Checkbox"
|
||||
"title": "Checkbox 复选框"
|
||||
},
|
||||
{
|
||||
"path": "/uploader",
|
||||
"title": "Uploader"
|
||||
"title": "Uploader 图片上传"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -124,23 +132,23 @@
|
||||
"list": [
|
||||
{
|
||||
"path": "/actionsheet",
|
||||
"title": "ActionSheet"
|
||||
"title": "ActionSheet 行动按钮"
|
||||
},
|
||||
{
|
||||
"path": "/toast",
|
||||
"title": "Toast"
|
||||
"title": "Toast 轻提示"
|
||||
},
|
||||
{
|
||||
"path": "/picker",
|
||||
"title": "Picker"
|
||||
"title": "Picker 选择器"
|
||||
},
|
||||
{
|
||||
"path": "/datetime-picker",
|
||||
"title": "Datetime Picker"
|
||||
"title": "Datetime Picker 时间选择"
|
||||
},
|
||||
{
|
||||
"path": "/dialog",
|
||||
"title": "Dialog"
|
||||
"title": "Dialog 弹出框"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -2,6 +2,10 @@ const registerRoute = (navConfig, isExample) => {
|
||||
let route = [];
|
||||
let navs = navConfig['zh-CN'];
|
||||
navs.forEach(nav => {
|
||||
if (isExample && !nav.showInMobile) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (nav.groups) {
|
||||
nav.groups.forEach(group => {
|
||||
group.list.forEach(nav => {
|
||||
@ -19,8 +23,8 @@ const registerRoute = (navConfig, isExample) => {
|
||||
|
||||
function addRoute(page) {
|
||||
const component = isExample
|
||||
? require(`./examples-dist${page.path}.vue`)
|
||||
: require(`./examples-docs${page.path}.md`);
|
||||
? require(`../examples-dist${page.path}.vue`)
|
||||
: require(`../examples-docs${page.path}.md`);
|
||||
route.push({
|
||||
path: '/component' + page.path,
|
||||
component: component.default || component
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-vue",
|
||||
"version": "0.0.42",
|
||||
"version": "0.1.0",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/zanui.js",
|
||||
"style": "lib/zanui-css/index.css",
|
||||
@ -22,7 +22,7 @@
|
||||
"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",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib",
|
||||
"lint": "eslint src/**/*.js packages/**/*.{js,vue} --quiet",
|
||||
"lint": "eslint src/**/*.js packages/**/*.{js,vue} build/**/*.js --quiet",
|
||||
"test": "karma start test/unit/karma.conf.js --single-run; npm run coverage",
|
||||
"test:watch": "karma start test/unit/karma.conf.js",
|
||||
"coverage": "find test/unit/coverage/lcov-report -name 'index.html' | sed -n 1,1p | xargs -I {} open {} ",
|
||||
@ -40,7 +40,8 @@
|
||||
"author": "youzanfe",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"raf.js": "0.0.4"
|
||||
"raf.js": "0.0.4",
|
||||
"vue-lazyload": "^1.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "2.1.8"
|
||||
@ -62,6 +63,7 @@
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-runtime": "^6.11.0",
|
||||
"chai": "^3.5.0",
|
||||
"chalk": "^1.1.3",
|
||||
"cheerio": "^0.22.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cp-cli": "^1.0.2",
|
||||
@ -102,6 +104,7 @@
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mocha": "^3.2.0",
|
||||
"optimize-css-assets-webpack-plugin": "^1.3.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-easy-import": "^2.0.0",
|
||||
"postcss-loader": "^1.3.3",
|
||||
|
||||
@ -56,6 +56,7 @@ export default {
|
||||
title: String,
|
||||
cancelText: String,
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
@ -89,7 +90,9 @@ export default {
|
||||
|
||||
methods: {
|
||||
handleItemClick(item) {
|
||||
|
||||
if (item.callback && typeof item.callback === 'function') {
|
||||
item.callback(item);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -14,6 +14,12 @@
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
badges: []
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
|
||||
<a class="zan-badge" :href="url" @click="handleClick" :class="{
|
||||
'zan-badge--select': isSelect
|
||||
}">
|
||||
<div class="zan-badge__active"></div>
|
||||
<div v-if="info" class="zan-badge__info">{{info}}</div>
|
||||
{{title}}
|
||||
@ -9,11 +11,8 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-badge',
|
||||
|
||||
props: {
|
||||
mark: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
@ -26,22 +25,26 @@ export default {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
|
||||
beforeCreate() {
|
||||
this.$parent.badges.push(this);
|
||||
},
|
||||
|
||||
computed: {
|
||||
isSelect() {
|
||||
const parent = this.$parent;
|
||||
return parent.badges.indexOf(this) === parent.activeKey;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
this.$emit('click', e, {
|
||||
mark: this.mark,
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
info: this.info
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return {
|
||||
'is-select': this.mark === this.$parent.activeKey
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -11,16 +11,23 @@
|
||||
* <zan-button size="large" type="primary">按钮</zan-button>
|
||||
*/
|
||||
|
||||
const allowedSize = ['mini', 'small', 'normal', 'large'];
|
||||
const allowedType = ['default', 'danger', 'primary'];
|
||||
import ZanLoading from 'packages/loading';
|
||||
|
||||
const ALLOWED_SIZE = ['mini', 'small', 'normal', 'large'];
|
||||
const ALLOWED_TYPE = ['default', 'danger', 'primary'];
|
||||
|
||||
export default {
|
||||
name: 'zan-button',
|
||||
|
||||
components: {
|
||||
'zan-loading': ZanLoading
|
||||
},
|
||||
|
||||
props: {
|
||||
disabled: Boolean,
|
||||
loading: Boolean,
|
||||
block: Boolean,
|
||||
bottomAction: Boolean,
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'button'
|
||||
@ -30,27 +37,28 @@ export default {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator(value) {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
return ALLOWED_TYPE.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
validator(value) {
|
||||
return allowedSize.indexOf(value) > -1;
|
||||
return ALLOWED_SIZE.indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
if (this.loading || this.disabled) return;
|
||||
this.$emit('click', e);
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
let { type, nativeType, size, disabled, loading, block } = this;
|
||||
let Tag = this.tag;
|
||||
const { type, nativeType, size, disabled, loading, block, bottomAction } = this;
|
||||
const Tag = this.tag;
|
||||
|
||||
return (
|
||||
<Tag
|
||||
@ -63,19 +71,20 @@ export default {
|
||||
{
|
||||
'zan-button--disabled': disabled,
|
||||
'zan-button--loading': loading,
|
||||
'zan-button--block': block
|
||||
'zan-button--block': block,
|
||||
'zan-button--bottom-action': bottomAction
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading ?
|
||||
<zan-loading
|
||||
class="zan-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}>
|
||||
</zan-loading> :
|
||||
null
|
||||
loading
|
||||
? <zan-loading
|
||||
class="zan-button__icon-loading"
|
||||
type="circle"
|
||||
color={type === 'default' ? 'black' : 'white'}>
|
||||
</zan-loading>
|
||||
: null
|
||||
}
|
||||
<span class="zan-button__text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="zan-card">
|
||||
<img :src="thumb" alt="" class="zan-card__img">
|
||||
<div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
|
||||
<div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
|
||||
<div class="zan-card__info">
|
||||
<slot name="title">
|
||||
<h4 v-text="title" class="zan-card__title"></h4>
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<a class="zan-cell" :href="url" @click="handleClick">
|
||||
<div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }" v-if="this.$slots.title || title || label">
|
||||
<a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
|
||||
<div
|
||||
class="zan-cell__title"
|
||||
v-if="this.$slots.title || title"
|
||||
>
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
|
||||
</slot>
|
||||
@ -9,10 +12,14 @@
|
||||
<span class="zan-cell__label" v-if="label" v-text="label"></span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="zan-cell__value" :class="{
|
||||
'is-link': isLink,
|
||||
'is-alone': !this.$slots.title && !title && !label
|
||||
}">
|
||||
<div
|
||||
class="zan-cell__value"
|
||||
v-if="value || this.$slots.default"
|
||||
:class="{
|
||||
'zan-cell__value--link': isLink,
|
||||
'zan-cell__value--alone': !this.$slots.title && !title && !label
|
||||
}"
|
||||
>
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
</slot>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<zan-picker
|
||||
ref="picker"
|
||||
:columns="columns"
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="handlePickerChange"
|
||||
@ -28,6 +29,10 @@ export default {
|
||||
return allowedType.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
format: {
|
||||
type: String,
|
||||
default: 'yyyy.mm.dd hh时 mm分'
|
||||
},
|
||||
visibleItemCount: {
|
||||
type: Number,
|
||||
default: 5
|
||||
@ -56,31 +61,45 @@ export default {
|
||||
},
|
||||
|
||||
data() {
|
||||
let value = this.value;
|
||||
if (!value) {
|
||||
if (this.type.indexOf('date') > -1) {
|
||||
value = this.minDate;
|
||||
} else {
|
||||
const minHour = this.minHour;
|
||||
value = `${minHour > 10 ? minHour : '0' + minHour}:00`;
|
||||
}
|
||||
} else {
|
||||
value = this.correctValue(value);
|
||||
}
|
||||
|
||||
return {
|
||||
innerValue: this.val
|
||||
innerValue: value
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.innerValue = val;
|
||||
val = this.correctValue(val);
|
||||
const isEqual = this.type === 'time' ? val === this.innerValue : val.valueOf() === this.innerValue.valueOf();
|
||||
if (!isEqual) this.innerValue = val;
|
||||
},
|
||||
innerValue(val) {
|
||||
console.log(val + '!!!');
|
||||
this.updateColumnValue(val);
|
||||
this.$emit('input', val);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
ranges() {
|
||||
console.log(this.innerValue + '!!');
|
||||
// return this.innerValue + '!!';
|
||||
if (this.type === 'time') {
|
||||
return [
|
||||
[this.minHour, this.maxHour],
|
||||
[0, 59]
|
||||
];
|
||||
}
|
||||
|
||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue);
|
||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
|
||||
|
||||
@ -96,7 +115,7 @@ export default {
|
||||
return result;
|
||||
},
|
||||
columns() {
|
||||
return this.ranges.map(range => {
|
||||
const results = this.ranges.map(range => {
|
||||
const values = this.times(range[1] - range[0] + 1, index => {
|
||||
const value = range[0] + index;
|
||||
return value < 10 ? `0${value}` : `${value}`;
|
||||
@ -106,10 +125,31 @@ export default {
|
||||
values
|
||||
};
|
||||
});
|
||||
return results;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
correctValue(value) {
|
||||
// 仅时间
|
||||
if (this.type === 'time') {
|
||||
const [hour, minute] = value.split(':');
|
||||
let correctedHour = Math.max(hour, this.minHour);
|
||||
correctedHour = Math.min(correctedHour, this.maxHour);
|
||||
|
||||
return `${correctedHour}:${minute}`;
|
||||
}
|
||||
|
||||
// 含有日期的情况
|
||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', value);
|
||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', value);
|
||||
const minDay = new Date(minYear, minMonth - 1, minDate, minHour, minMinute);
|
||||
const maxDay = new Date(maxYear, maxMonth - 1, maxDate, maxHour, maxMinute);
|
||||
value = Math.max(value, minDay);
|
||||
value = Math.min(value, maxDay);
|
||||
|
||||
return new Date(value);
|
||||
},
|
||||
times(n, iteratee) {
|
||||
let index = -1;
|
||||
const result = Array(n);
|
||||
@ -137,11 +177,11 @@ export default {
|
||||
if (value.getFullYear() === year) {
|
||||
month = boundary.getMonth() + 1;
|
||||
if (value.getMonth() + 1 === month) {
|
||||
date = value.getDate();
|
||||
date = boundary.getDate();
|
||||
if (value.getDate() === date) {
|
||||
hour = value.getHours();
|
||||
hour = boundary.getHours();
|
||||
if (value.getHours() === hour) {
|
||||
minute = value.getMinutes();
|
||||
minute = boundary.getMinutes();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -180,8 +220,9 @@ export default {
|
||||
handlePickerConfirm(values) {
|
||||
this.$emit('confirm', this.innerValue);
|
||||
},
|
||||
handlePickerChange(picker, values, index) {
|
||||
console.log(this.innerValue);
|
||||
handlePickerChange(picker) {
|
||||
const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
|
||||
console.log(values);
|
||||
let value;
|
||||
|
||||
if (this.type === 'time') {
|
||||
@ -200,21 +241,50 @@ export default {
|
||||
}
|
||||
value = new Date(year, month - 1, date, hour, minute);
|
||||
}
|
||||
value = this.correctValue(value);
|
||||
this.innerValue = value;
|
||||
console.log(value, this.innerValue);
|
||||
// this.$emit('input', value);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.innerValue = this.value;
|
||||
if (!this.innerValue) {
|
||||
if (this.type.indexOf('date') > -1) {
|
||||
this.innerValue = this.minDate;
|
||||
},
|
||||
updateColumnValue(value) {
|
||||
let values = [];
|
||||
if (this.type === 'time') {
|
||||
const currentValue = value.split(':');
|
||||
values = [
|
||||
currentValue[0],
|
||||
currentValue[1]
|
||||
];
|
||||
} else {
|
||||
const minHour = this.minHour;
|
||||
this.innerValue = `${minHour > 10 ? minHour : '0' + minHour}:00`;
|
||||
values = [
|
||||
`${value.getFullYear()}`,
|
||||
`0${value.getMonth() + 1}`.slice(-2),
|
||||
`0${value.getDate()}`.slice(-2)
|
||||
];
|
||||
if (this.type === 'datetime') {
|
||||
values.push(
|
||||
`0${value.getHours()}`.slice(-2),
|
||||
`0${value.getMinutes()}`.slice(-2)
|
||||
);
|
||||
}
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.setColumnByValues(values);
|
||||
});
|
||||
},
|
||||
setColumnByValues(values) {
|
||||
const setColumnValue = this.$refs.picker.setColumnValue;
|
||||
if (this.type === 'time') {
|
||||
setColumnValue(0, values[0]);
|
||||
setColumnValue(1, values[1]);
|
||||
} else {
|
||||
setColumnValue(0, values[0]);
|
||||
setColumnValue(1, values[1]);
|
||||
setColumnValue(2, values[2]);
|
||||
if (this.type === 'datetime') {
|
||||
setColumnValue(3, values[3]);
|
||||
setColumnValue(4, values[4]);
|
||||
}
|
||||
}
|
||||
[].forEach.call(this.$refs.picker.$children, child => child.doOnValueChange());
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -10,7 +10,7 @@ let dialogQueue = [];
|
||||
|
||||
const defaultCallback = action => {
|
||||
if (currentDialog) {
|
||||
let callback = currentDialog.callback;
|
||||
const callback = currentDialog.callback;
|
||||
|
||||
if (typeof callback === 'function') {
|
||||
callback(action);
|
||||
@ -40,9 +40,9 @@ const showNextDialog = () => {
|
||||
if (!instance.value && dialogQueue.length > 0) {
|
||||
currentDialog = dialogQueue.shift();
|
||||
|
||||
let options = currentDialog.options;
|
||||
const options = currentDialog.options;
|
||||
|
||||
for (let prop in options) {
|
||||
for (const prop in options) {
|
||||
if (options.hasOwnProperty(prop)) {
|
||||
instance[prop] = options[prop];
|
||||
}
|
||||
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
|
||||
if (this.lockOnScroll) {
|
||||
setTimeout(() => {
|
||||
if (this.modal && this.bodyOverflow !== 'hidden') {
|
||||
if (this.overlay && this.bodyOverflow !== 'hidden') {
|
||||
document.body.style.overflow = this.bodyOverflow;
|
||||
}
|
||||
this.bodyOverflow = null;
|
||||
|
||||
@ -53,7 +53,7 @@ export default {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'text',
|
||||
validate(value) {
|
||||
validator(value) {
|
||||
return VALID_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
@ -71,7 +71,7 @@ export default {
|
||||
autosize: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
validate(value) {
|
||||
validator(value) {
|
||||
if (value && this.type !== 'textarea') return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,10 @@
|
||||
name: 'zan-icon',
|
||||
|
||||
props: {
|
||||
name: String
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import Vue from 'vue';
|
||||
import ImagePreview from './image-preview.vue';
|
||||
import merge from 'src/utils/merge';
|
||||
|
||||
let instance;
|
||||
|
||||
|
||||
@ -3,9 +3,7 @@
|
||||
<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" :src="item" alt="" :class="{
|
||||
'zan-image-preview__image--center': true
|
||||
}">
|
||||
<img class="zan-image-preview__image" @load="handleLoad" :src="item" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
</div>
|
||||
@ -53,6 +51,22 @@ export default {
|
||||
this.value = false;
|
||||
},
|
||||
|
||||
handleLoad(event) {
|
||||
const containerSize = this.$refs.previewContainer.getBoundingClientRect();
|
||||
const ratio = containerSize.width / containerSize.height;
|
||||
const target = event.currentTarget;
|
||||
const targetRatio = target.width / target.height;
|
||||
|
||||
const centerClass = 'zan-image-preview__image--center';
|
||||
const bigClass = 'zan-image-preview__image--big';
|
||||
|
||||
if (targetRatio > ratio) {
|
||||
target.className += (' ' + centerClass);
|
||||
} else {
|
||||
target.className += (' ' + bigClass);
|
||||
}
|
||||
},
|
||||
|
||||
close() {
|
||||
if (this.closing) return;
|
||||
|
||||
|
||||
@ -1,79 +1,3 @@
|
||||
export default {
|
||||
install: function(Vue, options) {
|
||||
options = options || { fade: false, nohori: false };
|
||||
// scroll结束的时候触发scrollend事件
|
||||
var timer = null;
|
||||
var topValue = 0;
|
||||
var bodyEle = document.body;
|
||||
var scrollEnd = document.createEvent('HTMLEvents');
|
||||
scrollEnd.initEvent('scrollEnd', true, false);
|
||||
function enterFrame() {
|
||||
if (bodyEle.scrollTop === topValue) {
|
||||
window.cancelAnimationFrame(timer);
|
||||
window.dispatchEvent(scrollEnd);
|
||||
} else {
|
||||
topValue = bodyEle.scrollTop;
|
||||
}
|
||||
window.requestAnimationFrame(enterFrame);
|
||||
}
|
||||
document.addEventListener('scroll', function() {
|
||||
if (!timer) {
|
||||
timer = window.requestAnimationFrame(enterFrame);
|
||||
}
|
||||
}, true);
|
||||
// vue指令
|
||||
function update(value) {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
var isFadeIn = this.modifiers.fade || options.fade;
|
||||
var isNoHori = this.modifiers.nohori || options.nohori;
|
||||
// 用css3来控制过渡效果
|
||||
if (isFadeIn) {
|
||||
this.el.style.opacity = 0;
|
||||
this.el.style.transition = 'opacity .3s';
|
||||
this.el.style.webkitTransition = 'opacity .3s';
|
||||
}
|
||||
var compute = function() {
|
||||
if (this.el === null) {
|
||||
return;
|
||||
}
|
||||
var rect = this.el.getBoundingClientRect();
|
||||
var vpWidth = document.head.parentNode.clientWidth;
|
||||
var vpHeight = document.head.parentNode.clientHeight;
|
||||
var loadImg = function() {
|
||||
this.el.src = value;
|
||||
this.el.addEventListener('load', onloadEnd);
|
||||
window.removeEventListener('scrollEnd', compute, true);
|
||||
window.removeEventListener('resize', compute, true);
|
||||
}.bind(this);
|
||||
if (this.el.src === value) return;
|
||||
if (isNoHori) {
|
||||
if (rect.bottom >= 0 && rect.top <= vpHeight) {
|
||||
loadImg();
|
||||
}
|
||||
} else if (rect.bottom >= 0 && rect.top <= vpHeight && rect.right >= 0 && rect.left <= vpWidth) {
|
||||
loadImg();
|
||||
}
|
||||
}.bind(this);
|
||||
var onload = function() {
|
||||
compute();
|
||||
this.el && this.el.removeEventListener('load', onload);
|
||||
window.addEventListener('scrollEnd', compute, true);
|
||||
window.addEventListener('resize', compute, true);
|
||||
}.bind(this);
|
||||
var onloadEnd = function() {
|
||||
if (this.el === null) {
|
||||
return;
|
||||
}
|
||||
if (isFadeIn) {
|
||||
this.el.style.opacity = 1;
|
||||
}
|
||||
this.el.removeEventListener('load', onloadEnd);
|
||||
}.bind(this);
|
||||
// 元素load触发事件
|
||||
this.el.addEventListener('load', onload);
|
||||
}
|
||||
Vue.directive('lazyload', update);
|
||||
}
|
||||
};
|
||||
import Lazyload from 'vue-lazyload';
|
||||
|
||||
export default Lazyload;
|
||||
|
||||
@ -14,14 +14,14 @@ export default {
|
||||
type: {
|
||||
type: String,
|
||||
default: 'gradient-circle',
|
||||
validate(value) {
|
||||
validator(value) {
|
||||
return VALID_TYPES.indexOf(value) > -1;
|
||||
}
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'black',
|
||||
validate(value) {
|
||||
validator(value) {
|
||||
return VALID_COLORS.indexOf(value) > -1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -65,23 +65,19 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
values(val) {
|
||||
this.currentValues = val;
|
||||
},
|
||||
|
||||
currentValues(val) {
|
||||
if (this.valueIndex === -1) {
|
||||
this.currentValue = (val || [])[0];
|
||||
}
|
||||
},
|
||||
|
||||
currentValue(val) {
|
||||
this.doOnValueChange();
|
||||
|
||||
this.$emit('change', this);
|
||||
this.$emit('input', val);
|
||||
this.$emit('columnChange', this);
|
||||
}
|
||||
},
|
||||
|
||||
@ -236,8 +232,6 @@ export default {
|
||||
const value = this.currentValue;
|
||||
const wrapper = this.$refs.wrapper;
|
||||
|
||||
this.$emit('input', this.currentValue);
|
||||
|
||||
translateUtil.translateElement(wrapper, null, this.value2Translate(value));
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
:itemHeight="itemHeight"
|
||||
:visible-item-count="visibleItemCount"
|
||||
:value-key="valueKey"
|
||||
@change="columnValueChange(index)">
|
||||
@columnChange="columnValueChange(index)">
|
||||
</picker-column>
|
||||
<div class="zan-picker-center-highlight" :style="{ height: itemHeight + 'px', marginTop: -itemHeight / 2 + 'px' }"></div>
|
||||
</div>
|
||||
|
||||
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