mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
done
This commit is contained in:
zhuxiang
commit
fdf2868cc7
@ -16,7 +16,7 @@ indent_size = 2
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
|
||||
[*.pcss]
|
||||
[*.css]
|
||||
indent_size = 2
|
||||
|
||||
[Makefile]
|
||||
|
||||
166
.eslintrc.js
166
.eslintrc.js
@ -1,34 +1,146 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
ecmaVersion: 6,
|
||||
ecmaFeatures: {
|
||||
experimentalObjectRestSpread: true,
|
||||
jsx: true
|
||||
},
|
||||
sourceType: 'module'
|
||||
},
|
||||
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
|
||||
extends: 'standard',
|
||||
// required to lint *.vue files
|
||||
plugins: [
|
||||
'html'
|
||||
],
|
||||
// add your custom rules here
|
||||
'rules': {
|
||||
// allow paren-less arrow functions
|
||||
'arrow-parens': 0,
|
||||
// allow async-await
|
||||
'generator-star-spacing': 0,
|
||||
// allow debugger during development
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'semi': ['error', 'always'],
|
||||
'space-before-function-paren': ['error', 'never'],
|
||||
'no-useless-escape': 0,
|
||||
'no-extra-boolean-cast': 0,
|
||||
'no-new': 0
|
||||
|
||||
env: {
|
||||
es6: true,
|
||||
node: true,
|
||||
mocha: true
|
||||
},
|
||||
"globals": {
|
||||
"zanui": true,
|
||||
"location": true,
|
||||
"Swiper": true,
|
||||
"wysihtml5": true,
|
||||
"wysihtml5ParserRules": true
|
||||
|
||||
plugins: ['vue'],
|
||||
|
||||
globals: {
|
||||
expect: true,
|
||||
sinon: true,
|
||||
zanui: true,
|
||||
document: false,
|
||||
navigator: false,
|
||||
window: false,
|
||||
require: true
|
||||
},
|
||||
|
||||
rules: {
|
||||
'accessor-pairs': 2,
|
||||
'arrow-spacing': [2, { 'before': true, 'after': true }],
|
||||
'block-spacing': [2, 'always'],
|
||||
'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
|
||||
'camelcase': [2, { 'properties': 'always' }],
|
||||
'comma-dangle': [2, 'never'],
|
||||
'comma-spacing': [2, { 'before': false, 'after': true }],
|
||||
'comma-style': [2, 'last'],
|
||||
'constructor-super': 2,
|
||||
'curly': [2, 'multi-line'],
|
||||
'dot-location': [2, 'property'],
|
||||
'eol-last': 2,
|
||||
'eqeqeq': [2, 'allow-null'],
|
||||
'generator-star-spacing': [2, { 'before': true, 'after': true }],
|
||||
'handle-callback-err': [2, '^(err|error)$' ],
|
||||
'indent': [2, 2, { 'SwitchCase': 1 }],
|
||||
'jsx-quotes': [2, 'prefer-single'],
|
||||
'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
|
||||
'keyword-spacing': [2, { 'before': true, 'after': true }],
|
||||
'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
|
||||
'new-parens': 2,
|
||||
'no-array-constructor': 2,
|
||||
'no-caller': 2,
|
||||
'no-class-assign': 2,
|
||||
'no-cond-assign': 2,
|
||||
'no-const-assign': 2,
|
||||
'no-control-regex': 2,
|
||||
'no-delete-var': 2,
|
||||
'no-dupe-args': 2,
|
||||
'no-dupe-class-members': 2,
|
||||
'no-dupe-keys': 2,
|
||||
'no-duplicate-case': 2,
|
||||
'no-empty-character-class': 2,
|
||||
'no-empty-pattern': 2,
|
||||
'no-eval': 2,
|
||||
'no-ex-assign': 2,
|
||||
'no-extend-native': 2,
|
||||
'no-extra-bind': 2,
|
||||
'no-extra-boolean-cast': 2,
|
||||
'no-extra-parens': [2, 'functions'],
|
||||
'no-fallthrough': 2,
|
||||
'no-floating-decimal': 2,
|
||||
'no-func-assign': 2,
|
||||
'no-implied-eval': 2,
|
||||
'no-inner-declarations': [2, 'functions'],
|
||||
'no-invalid-regexp': 2,
|
||||
'no-irregular-whitespace': 2,
|
||||
'no-iterator': 2,
|
||||
'no-label-var': 2,
|
||||
'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
|
||||
'no-lone-blocks': 2,
|
||||
'no-mixed-spaces-and-tabs': 2,
|
||||
'no-multi-spaces': 2,
|
||||
'no-multi-str': 2,
|
||||
'no-multiple-empty-lines': [2, { 'max': 1 }],
|
||||
'no-native-reassign': 2,
|
||||
'no-negated-in-lhs': 2,
|
||||
'no-new-object': 2,
|
||||
'no-new-require': 2,
|
||||
'no-new-symbol': 2,
|
||||
'no-new-wrappers': 2,
|
||||
'no-obj-calls': 2,
|
||||
'no-octal': 2,
|
||||
'no-octal-escape': 2,
|
||||
'no-path-concat': 2,
|
||||
'no-proto': 2,
|
||||
'no-redeclare': 2,
|
||||
'no-regex-spaces': 2,
|
||||
'no-return-assign': [2, 'except-parens'],
|
||||
'no-self-assign': 2,
|
||||
'no-self-compare': 2,
|
||||
'no-sequences': 2,
|
||||
'no-shadow-restricted-names': 2,
|
||||
'no-spaced-func': 2,
|
||||
'no-sparse-arrays': 2,
|
||||
'no-this-before-super': 2,
|
||||
'no-throw-literal': 2,
|
||||
'no-trailing-spaces': 2,
|
||||
'no-undef': 2,
|
||||
'no-undef-init': 2,
|
||||
'no-unexpected-multiline': 2,
|
||||
'no-unmodified-loop-condition': 2,
|
||||
'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
|
||||
'no-unreachable': 2,
|
||||
'no-unsafe-finally': 2,
|
||||
'no-unused-vars': [2, { 'vars': 'all', 'args': 'none' }],
|
||||
'no-useless-call': 2,
|
||||
'no-useless-computed-key': 2,
|
||||
'no-useless-constructor': 2,
|
||||
'no-useless-escape': 0,
|
||||
'no-whitespace-before-property': 2,
|
||||
'no-with': 2,
|
||||
'one-var': [2, { 'initialized': 'never' }],
|
||||
'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
|
||||
'padded-blocks': [2, 'never'],
|
||||
'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
|
||||
'semi': [2, 'always'],
|
||||
'semi-spacing': [2, { 'before': false, 'after': true }],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'never'],
|
||||
'space-in-parens': [2, 'never'],
|
||||
'space-infix-ops': 2,
|
||||
'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
|
||||
'spaced-comment': [2, 'always', { 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] }],
|
||||
'template-curly-spacing': [2, 'never'],
|
||||
'use-isnan': 2,
|
||||
'valid-typeof': 2,
|
||||
'wrap-iife': [2, 'any'],
|
||||
'yield-star-spacing': [2, 'both'],
|
||||
'yoda': [2, 'never'],
|
||||
'prefer-const': 2,
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
|
||||
'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
|
||||
'array-bracket-spacing': [2, 'never'],
|
||||
'vue/jsx-uses-vars': 2
|
||||
}
|
||||
}
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -10,3 +10,4 @@ lib/*
|
||||
node_modules
|
||||
example/dist
|
||||
dist
|
||||
test/unit/coverage
|
||||
|
||||
4
Makefile
4
Makefile
@ -1,3 +1,4 @@
|
||||
.PHONY: test
|
||||
usage = "\
|
||||
Usage: make <option> \n\n\
|
||||
init componentname 初始化一个新组件，请忽视makefile的报错 \n\n\
|
||||
@ -12,3 +13,6 @@ init:
|
||||
|
||||
dev:
|
||||
npm run dev
|
||||
|
||||
test:
|
||||
npm run test
|
||||
|
||||
@ -50,7 +50,8 @@ ComponentNames.forEach(name => {
|
||||
|
||||
// services
|
||||
'Dialog',
|
||||
'Toast'
|
||||
'Toast',
|
||||
'ImagePreview'
|
||||
].indexOf(componentName) === -1) {
|
||||
installTemplate.push(render(ISNTALL_COMPONENT_TEMPLATE, {
|
||||
name: componentName,
|
||||
|
||||
93
build/genExamples.js
Normal file
93
build/genExamples.js
Normal file
@ -0,0 +1,93 @@
|
||||
var markdownIt = require('markdown-it');
|
||||
var markdownItContainer = require('markdown-it-container');
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var cheerio = require('cheerio');
|
||||
var striptags = require('./strip-tags');
|
||||
var Components = require('../components.json');
|
||||
|
||||
var parser = markdownIt('default', {
|
||||
html: true
|
||||
});
|
||||
|
||||
var renderVueTemplate = function (html, componentName) {
|
||||
var $ = cheerio.load(html, {
|
||||
decodeEntities: false,
|
||||
lowerCaseAttributeNames: false,
|
||||
lowerCaseTags: false
|
||||
});
|
||||
|
||||
var output = {
|
||||
style: $.html('style'),
|
||||
script: $.html('script'),
|
||||
'example-block': $.html('example-block')
|
||||
};
|
||||
var result;
|
||||
|
||||
$('style').remove();
|
||||
$('script').remove();
|
||||
|
||||
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);');
|
||||
} else {
|
||||
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' +
|
||||
output.style + '\n' +
|
||||
script;
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
function convert(str) {
|
||||
str = str.replace(/(&#x)(\w{4});/gi, function($0) {
|
||||
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g, '$2'), 16));
|
||||
});
|
||||
return str;
|
||||
}
|
||||
|
||||
parser.use(markdownItContainer, 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
|
||||
return `<example-block title="${description}">
|
||||
${html}
|
||||
</example-block>\n`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
var docsDir = path.resolve(__dirname, '../docs');
|
||||
for (var item in Components) {
|
||||
var itemMdFile = `${docsDir}/examples-docs/${item}.md`;
|
||||
if (!fs.existsSync(itemMdFile)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
var itemMd = fs.readFileSync(`${docsDir}/examples-docs/${item}.md`).toString();
|
||||
var content = parser.render(itemMd);
|
||||
var result = renderVueTemplate(content, item);
|
||||
|
||||
var exampleVueName = `${docsDir}/examples-dist/${item}.vue`;
|
||||
|
||||
if (!fs.existsSync(exampleVueName)) {
|
||||
fs.closeSync(fs.openSync(exampleVueName, 'w'));
|
||||
}
|
||||
fs.writeFileSync(exampleVueName, result, {
|
||||
encoding: 'utf8'
|
||||
});
|
||||
}
|
||||
|
||||
console.log('generate examples success!');
|
||||
|
||||
@ -11,7 +11,7 @@ config.output = {
|
||||
};
|
||||
|
||||
config.externals = {
|
||||
vue: 'Vue'
|
||||
vue: 'vue'
|
||||
};
|
||||
|
||||
delete config.devtool;
|
||||
|
||||
14
build/webpack.components.js
Normal file
14
build/webpack.components.js
Normal file
@ -0,0 +1,14 @@
|
||||
var Components = require('../components.json');
|
||||
var config = require('./webpack.config.js');
|
||||
|
||||
delete config.devtool;
|
||||
|
||||
config.entry = Components;
|
||||
|
||||
config.output = {
|
||||
path: './lib',
|
||||
filename: '[name].js',
|
||||
libraryTarget: 'umd'
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@ -78,15 +78,9 @@ if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.plugins = [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: 'production'
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new ExtractTextPlugin(`yzvue_base_${version}_min.css`),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
@ -96,14 +90,6 @@ if (process.env.NODE_ENV === 'production') {
|
||||
},
|
||||
sourceMap: false
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
];
|
||||
} else {
|
||||
// development 环境不会抽css - -
|
||||
module.exports.plugins = [
|
||||
new ExtractTextPlugin('style.dev.css'),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
@ -126,6 +112,81 @@ if (process.env.NODE_ENV === 'production') {
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
|
||||
return `<demo-block class="demo-box">
|
||||
<div class="examples" slot="examples">${html}</div>
|
||||
<div class="highlight" slot="highlight">`;
|
||||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
MarkdownIt.renderer.rules.table_open = function() {
|
||||
return '<table class="table">';
|
||||
};
|
||||
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
|
||||
return source;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
} else {
|
||||
module.exports.plugins = [
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
postcss: getPoastcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
eslint: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
},
|
||||
vue: {
|
||||
autoprefixer: false,
|
||||
postcss: getPoastcssPlugin
|
||||
},
|
||||
vueMarkdown: {
|
||||
use: [
|
||||
[require('markdown-it-anchor'), {
|
||||
level: 2,
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
|
||||
return `<demo-block class="demo-box">
|
||||
<div class="examples" slot="examples">${html}</div>
|
||||
<div class="highlight" slot="highlight">`;
|
||||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
|
||||
@ -24,5 +24,9 @@
|
||||
"step": "./packages/step/index.js",
|
||||
"tabs": "./packages/tabs/index.js",
|
||||
"tab": "./packages/tab/index.js",
|
||||
"lazyload": "./packages/lazyload/index.js"
|
||||
"lazyload": "./packages/lazyload/index.js",
|
||||
"image-preview": "./packages/image-preview/index.js",
|
||||
"col": "./packages/col/index.js",
|
||||
"row": "./packages/row/index.js",
|
||||
"actionsheet": "./packages/actionsheet/index.js"
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
.demo-title {
|
||||
font-size: 20px;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
@ -72,8 +72,8 @@ export default {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
.demo-sub-title {
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,6 @@
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<mobile></mobile>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -59,37 +58,22 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
margin-left: 320px;
|
||||
padding: 0 20px;
|
||||
|
||||
section > p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
margin: 14px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 52%;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
float: left;
|
||||
width: 30%;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin: 20px 20px 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 365px;
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
width: 100%;
|
||||
border: 5px solid #f5f5f5;
|
||||
|
||||
10952
docs/build/0.ce826a4b.js
vendored
10952
docs/build/0.ce826a4b.js
vendored
File diff suppressed because it is too large
Load Diff
1
docs/build/0.ce826a4b.js.map
vendored
1
docs/build/0.ce826a4b.js.map
vendored
File diff suppressed because one or more lines are too long
13135
docs/build/0.js
vendored
13135
docs/build/0.js
vendored
File diff suppressed because one or more lines are too long
1
docs/build/0.js.map
vendored
1
docs/build/0.js.map
vendored
File diff suppressed because one or more lines are too long
199
docs/build/1.ce826a4b.js
vendored
199
docs/build/1.ce826a4b.js
vendored
@ -1,199 +0,0 @@
|
||||
webpackJsonp([1],{
|
||||
|
||||
/***/ 169:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
/* styles */
|
||||
__webpack_require__(263)
|
||||
|
||||
var Component = __webpack_require__(0)(
|
||||
/* script */
|
||||
__webpack_require__(179),
|
||||
/* template */
|
||||
__webpack_require__(237),
|
||||
/* scopeId */
|
||||
null,
|
||||
/* cssModules */
|
||||
null
|
||||
)
|
||||
|
||||
module.exports = Component.exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 179:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _navConfig = __webpack_require__(7);
|
||||
|
||||
var _navConfig2 = _interopRequireDefault(_navConfig);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.default = {
|
||||
data: function data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
data: _navConfig2.default['zh-CN'],
|
||||
base: '/component'
|
||||
};
|
||||
}
|
||||
}; //
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 197:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(4)();
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 237:
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
|
||||
return _c('div', {
|
||||
staticClass: "side-nav"
|
||||
}, [_c('ul', _vm._l((_vm.data), function(item) {
|
||||
return _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + item.path,
|
||||
"exact": ""
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(item.title || item.name)
|
||||
}
|
||||
}), _vm._v(" "), (item.children) ? _c('ul', {
|
||||
staticClass: "pure-menu-list sub-nav"
|
||||
}, _vm._l((item.children), function(navItem) {
|
||||
return _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [_c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + navItem.path
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(navItem.title || navItem.name)
|
||||
}
|
||||
})], 1)
|
||||
})) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
|
||||
return _c('div', {
|
||||
staticClass: "nav-group"
|
||||
}, [_c('div', {
|
||||
staticClass: "nav-group__title"
|
||||
}, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
|
||||
staticClass: "pure-menu-list"
|
||||
}, [_vm._l((group.list), function(navItem) {
|
||||
return [(!navItem.disabled) ? _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [_c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + navItem.path
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(navItem.title)
|
||||
}
|
||||
})], 1) : _vm._e()]
|
||||
})], 2)])
|
||||
}) : _vm._e()], 2)
|
||||
}))])
|
||||
},staticRenderFns: []}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 263:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// style-loader: Adds some css to the DOM by adding a <style> tag
|
||||
|
||||
// load the styles
|
||||
var content = __webpack_require__(197);
|
||||
if(typeof content === 'string') content = [[module.i, content, '']];
|
||||
if(content.locals) module.exports = content.locals;
|
||||
// add the styles to the DOM
|
||||
var update = __webpack_require__(14)("1517d9c0", content, true);
|
||||
// Hot Module Replacement
|
||||
if(false) {
|
||||
// When the styles change, update the <style> tags
|
||||
if(!content.locals) {
|
||||
module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
|
||||
var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
|
||||
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
||||
update(newContent);
|
||||
});
|
||||
}
|
||||
// When the module is disposed, remove the <style> tags
|
||||
module.hot.dispose(function() { update(); });
|
||||
}
|
||||
|
||||
/***/ })
|
||||
|
||||
});
|
||||
//# sourceMappingURL=1.ce826a4b.js.map
|
||||
1
docs/build/1.ce826a4b.js.map
vendored
1
docs/build/1.ce826a4b.js.map
vendored
File diff suppressed because one or more lines are too long
200
docs/build/1.js
vendored
200
docs/build/1.js
vendored
@ -1,199 +1 @@
|
||||
webpackJsonp([1],{
|
||||
|
||||
/***/ 194:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
|
||||
/* styles */
|
||||
__webpack_require__(307)
|
||||
|
||||
var Component = __webpack_require__(0)(
|
||||
/* script */
|
||||
__webpack_require__(204),
|
||||
/* template */
|
||||
__webpack_require__(274),
|
||||
/* scopeId */
|
||||
null,
|
||||
/* cssModules */
|
||||
null
|
||||
)
|
||||
|
||||
module.exports = Component.exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 204:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _navConfig = __webpack_require__(7);
|
||||
|
||||
var _navConfig2 = _interopRequireDefault(_navConfig);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
exports.default = {
|
||||
data: function data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
data: _navConfig2.default['zh-CN'],
|
||||
base: '/component'
|
||||
};
|
||||
}
|
||||
}; //
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 224:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
exports = module.exports = __webpack_require__(4)();
|
||||
// imports
|
||||
|
||||
|
||||
// module
|
||||
exports.push([module.i, ".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}", ""]);
|
||||
|
||||
// exports
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 274:
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
|
||||
return _c('div', {
|
||||
staticClass: "side-nav"
|
||||
}, [_c('ul', _vm._l((_vm.data), function(item) {
|
||||
return _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [(!item.path) ? _c('a', [_vm._v(_vm._s(item.name))]) : _c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + item.path,
|
||||
"exact": ""
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(item.title || item.name)
|
||||
}
|
||||
}), _vm._v(" "), (item.children) ? _c('ul', {
|
||||
staticClass: "pure-menu-list sub-nav"
|
||||
}, _vm._l((item.children), function(navItem) {
|
||||
return _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [_c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + navItem.path
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(navItem.title || navItem.name)
|
||||
}
|
||||
})], 1)
|
||||
})) : _vm._e(), _vm._v(" "), (item.groups) ? _vm._l((item.groups), function(group) {
|
||||
return _c('div', {
|
||||
staticClass: "nav-group"
|
||||
}, [_c('div', {
|
||||
staticClass: "nav-group__title"
|
||||
}, [_vm._v(_vm._s(group.groupName))]), _vm._v(" "), _c('ul', {
|
||||
staticClass: "pure-menu-list"
|
||||
}, [_vm._l((group.list), function(navItem) {
|
||||
return [(!navItem.disabled) ? _c('li', {
|
||||
staticClass: "nav-item"
|
||||
}, [_c('router-link', {
|
||||
attrs: {
|
||||
"active-class": "active",
|
||||
"to": _vm.base + navItem.path
|
||||
},
|
||||
domProps: {
|
||||
"textContent": _vm._s(navItem.title)
|
||||
}
|
||||
})], 1) : _vm._e()]
|
||||
})], 2)])
|
||||
}) : _vm._e()], 2)
|
||||
}))])
|
||||
},staticRenderFns: []}
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ 307:
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
// style-loader: Adds some css to the DOM by adding a <style> tag
|
||||
|
||||
// load the styles
|
||||
var content = __webpack_require__(224);
|
||||
if(typeof content === 'string') content = [[module.i, content, '']];
|
||||
if(content.locals) module.exports = content.locals;
|
||||
// add the styles to the DOM
|
||||
var update = __webpack_require__(14)("1517d9c0", content, true);
|
||||
// Hot Module Replacement
|
||||
if(false) {
|
||||
// When the styles change, update the <style> tags
|
||||
if(!content.locals) {
|
||||
module.hot.accept("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue", function() {
|
||||
var newContent = require("!!../../node_modules/css-loader/index.js?minimize!../../node_modules/vue-loader/lib/style-rewriter.js?id=data-v-0a10052a!../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./demo-list.vue");
|
||||
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
|
||||
update(newContent);
|
||||
});
|
||||
}
|
||||
// When the module is disposed, remove the <style> tags
|
||||
module.hot.dispose(function() { update(); });
|
||||
}
|
||||
|
||||
/***/ })
|
||||
|
||||
});
|
||||
//# sourceMappingURL=1.js.map
|
||||
webpackJsonp([1],{212:function(t,e,a){a(357);var i=a(0)(a(225),a(316),null,null);t.exports=i.exports},225:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(24),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},258:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},316:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},357:function(t,e,a){var i=a(258);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(25)("1517d9c0",i,!0)}});
|
||||
1
docs/build/1.js.map
vendored
1
docs/build/1.js.map
vendored
File diff suppressed because one or more lines are too long
10649
docs/build/zanui-docs.ce826a4b.js
vendored
10649
docs/build/zanui-docs.ce826a4b.js
vendored
File diff suppressed because it is too large
Load Diff
1
docs/build/zanui-docs.ce826a4b.js.map
vendored
1
docs/build/zanui-docs.ce826a4b.js.map
vendored
File diff suppressed because one or more lines are too long
10655
docs/build/zanui-docs.js
vendored
10655
docs/build/zanui-docs.js
vendored
File diff suppressed because one or more lines are too long
1
docs/build/zanui-docs.js.map
vendored
1
docs/build/zanui-docs.js.map
vendored
File diff suppressed because one or more lines are too long
15284
docs/build/zanui-examples.ce826a4b.js
vendored
15284
docs/build/zanui-examples.ce826a4b.js
vendored
File diff suppressed because one or more lines are too long
1
docs/build/zanui-examples.ce826a4b.js.map
vendored
1
docs/build/zanui-examples.ce826a4b.js.map
vendored
File diff suppressed because one or more lines are too long
16062
docs/build/zanui-examples.js
vendored
16062
docs/build/zanui-examples.js
vendored
File diff suppressed because one or more lines are too long
1
docs/build/zanui-examples.js.map
vendored
1
docs/build/zanui-examples.js.map
vendored
File diff suppressed because one or more lines are too long
71
docs/components/demo-block.vue
Normal file
71
docs/components/demo-block.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div
|
||||
class="demo-block"
|
||||
:class="blockClass">
|
||||
<slot name="examples"></slot>
|
||||
<slot name="highlight">
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
blockClass() {
|
||||
return `demo-${this.$route.path.split('/').pop()}`;
|
||||
},
|
||||
|
||||
codeAreaHeight() {
|
||||
return Math.max(this.$el.getElementsByClassName('examples')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.getElementsByClassName('highlight')[0].style.height = `${this.codeAreaHeight + 1}px`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block {
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
|
||||
.examples {
|
||||
width: 375px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 0;
|
||||
min-height: 200px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-right: 375px;
|
||||
box-sizing: border-box;
|
||||
border-right: solid 1px #eaeefb;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
margin: 0;
|
||||
border: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
docs/components/example-block.vue
Normal file
14
docs/components/example-block.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="example-block">
|
||||
<h2 class="demo-sub-title" v-text="title"></h2>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div class="mobile-wrapper">
|
||||
<div class="mobile">
|
||||
<iframe class="demo-page" :src="'./examples.html#' + $route.path" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -62,7 +62,7 @@
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 18%;
|
||||
width: 320px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 20px;
|
||||
float: left;
|
||||
|
||||
12
docs/examples-dist/badge.vue
Normal file
12
docs/examples-dist/badge.vue
Normal file
@ -0,0 +1,12 @@
|
||||
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></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);</script>
|
||||
81
docs/examples-dist/button.vue
Normal file
81
docs/examples-dist/button.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block="">default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block="">primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block="">danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block="">diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="按钮尺寸">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block="">normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block="">small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block="">mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="自定义按钮标签">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</example-block><example-block title="loading按钮">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading="" block="">loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading="" block=""></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
|
||||
</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></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.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>
|
||||
24
docs/examples-dist/card.vue
Normal file
24
docs/examples-dist/card.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
53
docs/examples-dist/cell.vue
Normal file
53
docs/examples-dist/cell.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="带图标">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="可点击的链接">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link=""></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link=""></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-cell-group>
|
||||
<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">
|
||||
</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);
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
80
docs/examples-dist/checkbox.vue
Normal file
80
docs/examples-dist/checkbox.vue
Normal file
@ -0,0 +1,80 @@
|
||||
<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用Checkbox组">
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<div class="page-dialog">
|
||||
<h1 class="page-title">Dialog</h1>
|
||||
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="基础用法">
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleAlertClick">点击我打开alert提示框</zan-button>
|
||||
</div>
|
||||
<zan-button @click="handleConfirmClick">confirm</zan-button>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="handleConfirmClick">点击我打开confirm提示框</zan-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
import { Dialog } from 'src/index';
|
||||
|
||||
export default {
|
||||
@ -39,16 +34,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b dialog {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
21
docs/examples-dist/field.vue
Normal file
21
docs/examples-dist/field.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="无label的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="监听change事件">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
4
docs/examples-dist/image-preview.vue
Normal file
4
docs/examples-dist/image-preview.vue
Normal file
@ -0,0 +1,4 @@
|
||||
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
41
docs/examples-dist/loading.vue
Normal file
41
docs/examples-dist/loading.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
65
docs/examples-dist/panel.vue
Normal file
65
docs/examples-dist/panel.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="商品SKU1，商品SKU2" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.zan-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -1,13 +1,10 @@
|
||||
<template>
|
||||
<div class="page-picker">
|
||||
<h1 class="page-title">Picker</h1>
|
||||
<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
</div>
|
||||
</template>
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
@ -36,4 +33,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
35
docs/examples-dist/popup.vue
Normal file
35
docs/examples-dist/popup.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<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-button-1">
|
||||
<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-button-1">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
一些内容
|
||||
</zan-popup>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
63
docs/examples-dist/radio.vue
Normal file
63
docs/examples-dist/radio.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="禁用状态">
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="radio组">
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="与Cell组件一起使用">
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
16
docs/examples-dist/search.vue
Normal file
16
docs/examples-dist/search.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
50
docs/examples-dist/steps.vue
Normal file
50
docs/examples-dist/steps.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<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-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="只显示步骤条">
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
docs/examples-dist/switch.vue
Normal file
44
docs/examples-dist/switch.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<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" :on-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>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
40
docs/examples-dist/tag.vue
Normal file
40
docs/examples-dist/tag.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<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>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="高级用法">
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
18
docs/examples-dist/waterfall.vue
Normal file
18
docs/examples-dist/waterfall.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
|
||||
<div class="waterfall">
|
||||
<div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
|
||||
<div class="waterfall-item" v-for="item in list" style="text-align: center;">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="loading" style="text-align: center;">
|
||||
loading
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
@ -10,6 +11,7 @@
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### z-badge-group API
|
||||
|
||||
|
||||
@ -1,80 +1,123 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.zan-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.zan-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.button-group {
|
||||
font-size: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
|
||||
### 按钮功能
|
||||
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
|
||||
:::demo 按钮功能
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button>default</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="primary">primary</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="danger">danger</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button block>default</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" block>primary</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button type="danger" block>danger</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button disabled>diabled</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button disabled block>diabled</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-button-group" :style="{ width: '50%' }">
|
||||
<div class="zan-button-3">
|
||||
<zan-button type="primary">normal</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
<zan-row gutter="10">
|
||||
<zan-col span="8">
|
||||
<zan-button type="primary" block>normal</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="small" block>small</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="8">
|
||||
<zan-button size="mini" block>mini</zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### loading按钮
|
||||
|
||||
表示loading状态
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<zan-row>
|
||||
<zan-col span="24">
|
||||
<zan-button type="primary" loading block>loading</zan-button>
|
||||
</zan-col>
|
||||
<zan-col span="24">
|
||||
<zan-button loading block></zan-button>
|
||||
</zan-col>
|
||||
</zan-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### button group
|
||||
|
||||
一组按钮。
|
||||
|
||||
:::demo button group
|
||||
```html
|
||||
<div class="zan-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>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -4,19 +4,21 @@
|
||||
|
||||
当没有底部按钮时，右侧内容会居中显示。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
@ -36,6 +38,7 @@
|
||||
</div>
|
||||
</zan-card>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -20,50 +20,59 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 标题带描述信息
|
||||
|
||||
传入`label`属性，属性值为描述信息的值。
|
||||
|
||||
:::demo 标题带描述信息
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带图标
|
||||
|
||||
传入`icon`属性。
|
||||
|
||||
:::demo 带图标
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 可点击的链接
|
||||
|
||||
传入`url`属性，传入`isLink`属性则会在右侧显示箭头。
|
||||
|
||||
:::demo 可点击的链接
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容。包含三个`slot`，默认`slot`，`icon`和`title`的`slot`。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-cell value="进入店铺" icon="home" url="http://youzan.com" is-link>
|
||||
@ -75,6 +84,7 @@ export default {
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,9 +1,49 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.zan-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Checkbox组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -15,11 +55,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox v-model="checkbox2">复选框2</zan-checkbox>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -31,13 +75,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox组
|
||||
|
||||
:::demo Checkbox组
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -60,13 +108,17 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用Checkbox组
|
||||
|
||||
:::demo 禁用Checkbox组
|
||||
```html
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
<div class="zan-checkbox-wrapper">
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -83,9 +135,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
@ -110,6 +164,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkbox API
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-button @click="handleAlertClick">alert</zan-button>
|
||||
|
||||
@ -63,6 +64,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
根据`type`属性显示不同的输入框。
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
@ -13,26 +14,31 @@
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 无label的输入框
|
||||
|
||||
不传入`label`属性即可。
|
||||
|
||||
:::demo 无label的输入框
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### 监听change事件
|
||||
|
||||
监听组件的`change`事件。
|
||||
|
||||
:::demo 监听change事件
|
||||
```html
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
3
docs/examples-docs/image-preview.md
Normal file
3
docs/examples-docs/image-preview.md
Normal file
@ -0,0 +1,3 @@
|
||||
## ImagePreview 图片预览
|
||||
|
||||
|
||||
7
docs/examples-docs/install.md
Normal file
7
docs/examples-docs/install.md
Normal file
@ -0,0 +1,7 @@
|
||||
## 安装
|
||||
|
||||
### ynpm安装
|
||||
|
||||
```shell
|
||||
npm i @youzan/zanui-vue -S
|
||||
```
|
||||
0
docs/examples-docs/layout.md
Normal file
0
docs/examples-docs/layout.md
Normal file
@ -1,14 +1,45 @@
|
||||
l## Switch组件
|
||||
<style>
|
||||
.demo-loading__example{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.demo-loading {
|
||||
padding: 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<h1 class="page-title">Loading</h1>
|
||||
<h2 class="page-sub-title">Loading展示</h2>
|
||||
<div class="page-loading__example1">
|
||||
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
<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>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -1,38 +1,55 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.zan-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Panel 面板
|
||||
|
||||
面板只是一个容器，里面可以放入自定义的内容。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
<div class="panel-content">
|
||||
panel内容
|
||||
</div>
|
||||
</zan-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
使用具名`slot`自定义内容。
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
@ -61,6 +78,7 @@
|
||||
</div>
|
||||
</zan-panel>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,12 +1,45 @@
|
||||
<script>
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德'],
|
||||
'湖南': ['长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pickerColumns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水'],
|
||||
className: 'column2'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Picker组件
|
||||
|
||||
模仿iOS中的`UIPickerView`。
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,30 +1,54 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Popup组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="zan-button-1">
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<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-button-1">
|
||||
<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-button-1">
|
||||
<div class="zan-row">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
@ -54,6 +78,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
23
docs/examples-docs/quickstart.md
Normal file
23
docs/examples-docs/quickstart.md
Normal file
@ -0,0 +1,23 @@
|
||||
## 快速上手
|
||||
|
||||
### 完整引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import ZanUI from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/index.css';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
```
|
||||
|
||||
### 按需引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell } from '@youzan/zanui-vue';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/button.css';
|
||||
import '@youzan/zanui-vue/lib/zanui-css/cell.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
@ -1,8 +1,25 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.zan-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio: '1'
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -12,9 +29,12 @@ export default {
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -26,12 +46,16 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用状态
|
||||
|
||||
:::demo 禁用状态
|
||||
```html
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
<div class="zan-radios">
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
@ -43,15 +67,19 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### radio组
|
||||
|
||||
:::demo radio组
|
||||
```html
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<div class="zan-radios">
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@ -62,9 +90,11 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 与Cell组件一起使用
|
||||
|
||||
:::demo 与Cell组件一起使用
|
||||
```html
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
@ -83,6 +113,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### Radio API
|
||||
|
||||
|
||||
@ -1,17 +1,4 @@
|
||||
## Search 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
||||
```html
|
||||
<zan-search
|
||||
placeholder="商品名称"
|
||||
@search="goSearch"
|
||||
>
|
||||
</zan-search>
|
||||
```
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
@ -19,7 +6,26 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
## Search 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,4 +1,93 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
|
||||
<zan-button @click="nextStep">下一步</zan-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
nextStep() {
|
||||
if (++this.active > 3) this.active = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### 只显示步骤条
|
||||
|
||||
:::demo 只显示步骤条
|
||||
```html
|
||||
<zan-steps :active="active">
|
||||
<zan-step>买家下单</zan-step>
|
||||
<zan-step>商家接单</zan-step>
|
||||
<zan-step>买家提货</zan-step>
|
||||
<zan-step>交易完成</zan-step>
|
||||
</zan-steps>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Steps API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
|
||||
| icon | 当前步骤的icon | string | '' | '' |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
|
||||
| title | 当前步骤从标题 | string | '' | '' |
|
||||
| description | 当前步骤描述 | string | '' | '' |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
|-----------|-----------|
|
||||
| message-extra | 状态栏添加额外的元素 |
|
||||
|
||||
|
||||
@ -1,33 +1,47 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@e wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@e text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Switch组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="page-switch">
|
||||
<h1 class="page-title">Switch</h1>
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="page-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="demo-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-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>
|
||||
|
||||
<script>
|
||||
@ -50,6 +64,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,17 +1,52 @@
|
||||
<style>
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Tag 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 高级用法
|
||||
|
||||
:::demo 高级用法
|
||||
```html
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag type="success" :plain="true">返现</zan-tag>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="waterfall">
|
||||
<div
|
||||
@ -62,6 +63,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="page-badge">
|
||||
<h1 class="page-title">Badge</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
</zan-badge-group>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,72 +0,0 @@
|
||||
<template>
|
||||
<div class="page-button">
|
||||
<h1 class="page-title">Button</h1>
|
||||
<h2 class="page-sub-title">按钮功能</h2>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button>default</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="primary">primary</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-1">
|
||||
<zan-button type="danger">danger</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button disabled>diabled</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">按钮尺寸</h2>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button size="large">large</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-3">
|
||||
<zan-button type="primary">normal</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="small">small</zan-button>
|
||||
</div>
|
||||
<div class="zan-button-3">
|
||||
<zan-button size="mini">mini</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">自定义按钮标签</h2>
|
||||
<div class="zan-button-group">
|
||||
<div class="zan-button-1">
|
||||
<zan-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="page-sub-title">button group</h2>
|
||||
<div class="zan-button-group">
|
||||
<zan-button type="primary" size="small">确认付款</zan-button>
|
||||
<zan-button size="small">确认收货</zan-button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@b button {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@component-namespace zan {
|
||||
@b button-group {
|
||||
.zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<h1 class="page-title">Card</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="描述"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
</zan-card>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,62 +0,0 @@
|
||||
<template>
|
||||
<div class="page-cell">
|
||||
<h1 class="page-title">Cell</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" value="单元格1内容"></zan-cell>
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">标题带描述信息</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
<zan-cell title="单元格2" label="描述信息"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">带图标</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" icon="home"></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">可点击的链接</h2>
|
||||
<zan-cell-group>
|
||||
<zan-cell title="起码运动馆" value="进入店铺" icon="home" url="http://youzan.com" is-link></zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<zan-cell-group>
|
||||
<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">
|
||||
</template>
|
||||
</zan-cell>
|
||||
<zan-cell title="线下门店" icon="location" url="http://youzan.com" is-link></zan-cell>
|
||||
</zan-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick() {
|
||||
console.log('cell click');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.official-img {
|
||||
width: 31px;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="page-checkbox">
|
||||
<h1 class="page-title">Checkbox</h1>
|
||||
|
||||
<div class="checkbox-demo-wrapper">
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<zan-checkbox v-model="checkbox2" disabled>复选框2</zan-checkbox>
|
||||
|
||||
<h2 class="page-sub-title">Checkbox组</h2>
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
|
||||
<h2 class="page-sub-title">禁用Checkbox组</h2>
|
||||
<zan-checkbox-group v-model="result" disabled>
|
||||
<zan-checkbox v-for="item in list" :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-checkbox-group>
|
||||
|
||||
<h2 class="page-sub-title">与Cell组件一起使用</h2>
|
||||
</div>
|
||||
|
||||
<zan-checkbox-group v-model="result">
|
||||
<zan-cell-group>
|
||||
<zan-cell v-for="item in list">
|
||||
<zan-checkbox :name="item">复选框{{item}}</zan-checkbox>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox1: true,
|
||||
checkbox2: true,
|
||||
list: [
|
||||
'a',
|
||||
'b',
|
||||
'c'
|
||||
],
|
||||
result: ['a', 'b']
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
result(val) {
|
||||
console.log(val);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.checkbox-demo-wrapper {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="page-field">
|
||||
<h1 class="page-title">Field</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">无label的输入框</h2>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
<h2 class="page-sub-title">监听change事件</h2>
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" @change="handleChange"></zan-field>
|
||||
</zan-cell-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: ''
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log(this.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +0,0 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<h1 class="page-title">Loading</h1>
|
||||
<h2 class="page-sub-title">Loading展示</h2>
|
||||
<div class="page-loading__example1">
|
||||
<zan-loading class="some-customized-class" style="padding-top: 50px; text-align: center;"></zan-loading>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<div class="page-panel">
|
||||
<h1 class="page-title">Panel</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
</zan-panel>
|
||||
|
||||
<h2 class="page-sub-title">高级用法</h2>
|
||||
<zan-panel title="标题" desc="标题描述" status="状态">
|
||||
<zan-card
|
||||
title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
|
||||
desc="商品SKU1，商品SKU2"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
|
||||
<div class="zan-card__row" slot="title">
|
||||
<h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
|
||||
<span class="zan-card__price">¥ 2.00</span>
|
||||
</div>
|
||||
<div class="zan-card__row" slot="desc">
|
||||
<h4 class="zan-card__desc">商品sku</h4>
|
||||
<span class="zan-card__num">x 2</span>
|
||||
</div>
|
||||
<div class="zan-card__footer" slot="footer">
|
||||
<zan-button size="mini">按钮一</zan-button>
|
||||
<zan-button size="mini">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-card>
|
||||
<div class="zan-panel-sum">
|
||||
合计：<span>¥ 1999.90</span>
|
||||
</div>
|
||||
<div class="zan-panel-buttons" slot="footer">
|
||||
<zan-button size="small">按钮一</zan-button>
|
||||
<zan-button size="small" type="danger">按钮二</zan-button>
|
||||
</div>
|
||||
</zan-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.zan-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.zan-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.zan-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div class="page-popup">
|
||||
<h1 class="page-title">Popup</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="zan-button-1">
|
||||
<zan-button @click="popupShow1 = true">从下方弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow1" position="bottom" class="zan-popup-1">
|
||||
xxxx
|
||||
</zan-popup>
|
||||
|
||||
<div class="zan-button-1">
|
||||
<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-button-1">
|
||||
<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-button-1">
|
||||
<zan-button @click="popupShow4 = true">从中间弹出popup</zan-button>
|
||||
</div>
|
||||
<zan-popup v-model="popupShow4" transition="popup-fade" class="zan-popup-4">
|
||||
一些内容
|
||||
</zan-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
popupShow2: false,
|
||||
popupShow3: false,
|
||||
popupShow4: false
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
popupShow2(val) {
|
||||
if (val) {
|
||||
setTimeout(() => {
|
||||
this.popupShow2 = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.zan-popup-1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.zan-popup-2 {
|
||||
width: 100%;
|
||||
line-height: 44px;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.zan-popup-4 {
|
||||
width: 50%;
|
||||
height: 200px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.page-popup .zan-button-1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.page-sub-title {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="page-radio">
|
||||
<h1 class="page-title">Radio</h1>
|
||||
|
||||
<div class="radio-demo-wrapper">
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
|
||||
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>
|
||||
|
||||
<h2 class="page-sub-title">禁用状态</h2>
|
||||
<zan-radio name="1" v-model="radio2" disabled>未选中禁用</zan-radio>
|
||||
<zan-radio name="2" v-model="radio2" disabled>选中且禁用</zan-radio>
|
||||
|
||||
<h2 class="page-sub-title">radio组</h2>
|
||||
<zan-radio-group v-model="radio3">
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<h2 class="page-sub-title">禁用radio组</h2>
|
||||
<zan-radio-group v-model="radio3" disabled>
|
||||
<zan-radio name="1">单选框1</zan-radio>
|
||||
<zan-radio name="2">单选框2</zan-radio>
|
||||
</zan-radio-group>
|
||||
|
||||
<h2 class="page-sub-title">与Cell组件一起使用</h2>
|
||||
</div>
|
||||
|
||||
<zan-radio-group v-model="radio4">
|
||||
<zan-cell-group>
|
||||
<zan-cell><zan-radio name="1">单选框1</zan-radio></zan-cell>
|
||||
<zan-cell><zan-radio name="2">单选框2</zan-radio></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-radio-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: '1',
|
||||
radio2: '2',
|
||||
radio3: '1',
|
||||
radio4: '1'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.radio-demo-wrapper {
|
||||
padding: 0 15px;
|
||||
|
||||
.zan-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
goSearch(value) {
|
||||
alert(value)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="page-search">
|
||||
<h1 class="page-title">Search</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<zan-search placeholder="商品名称" @search="goSearch">
|
||||
</zan-search>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-badge {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<div class="page-switch">
|
||||
<h1 class="page-title">Switch</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div class="page-switch">
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></zan-switch>
|
||||
<div class="page-switch__text">{{switchStateText}}</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, DISABLED</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">ON, LOADING</div>
|
||||
</div>
|
||||
<div class="page-switch__wrapper">
|
||||
<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
|
||||
<div class="page-switch__text">OFF, LOADING</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchState: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
switchStateText() {
|
||||
return this.switchState ? 'ON' : 'OFF';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateState(newState) {
|
||||
this.switchState = newState;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace page {
|
||||
@component switch {
|
||||
padding: 0 15px 15px;
|
||||
|
||||
@descendent wrapper {
|
||||
width: 33.33%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@descendent text {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div class="page-cell">
|
||||
<h1 class="page-title">Tag</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div>
|
||||
<div class="tags-container">
|
||||
<zan-tag>返现</zan-tag>
|
||||
<zan-tag :plain="true">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag type="danger">四字标签</zan-tag>
|
||||
<zan-tag type="danger">一</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="danger">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="primary">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="success">返现</zan-tag>
|
||||
<zan-tag :plain="true" type="success">返现</zan-tag>
|
||||
</div>
|
||||
<div class="tags-container">
|
||||
<zan-tag type="danger" :mark="true">返现</zan-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
.tags-container {
|
||||
padding: 5px 15px;
|
||||
|
||||
.zan-tag + .zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,64 +0,0 @@
|
||||
<template>
|
||||
<div class="page-card">
|
||||
<h1 class="page-title">Waterfall</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法</h2>
|
||||
<div>
|
||||
<div
|
||||
v-waterfall-lower="loadMore"
|
||||
v-waterfall-upper="loadMoreUpper"
|
||||
waterfall-disabled="isWaterfallDisabled"
|
||||
waterfall-offset="400"
|
||||
>
|
||||
<div v-for="item in list" class="zan-cell" style="text-align: center;">{{ item }}</div>
|
||||
<!-- <zan-loading v-if="loading" style="text-align: center;"></zan-loading> -->
|
||||
<div style="text-align: center;">loading</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [1, 2, 3, 4, 5],
|
||||
loading: false,
|
||||
finished: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loadMore() {
|
||||
if (this.list.length >= 200) {
|
||||
this.finished = true;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
let lastNumber = this.list[this.list.length - 1];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
lastNumber += 1;
|
||||
this.list.push(lastNumber);
|
||||
}
|
||||
this.loading = false;
|
||||
}, 2500);
|
||||
},
|
||||
loadMoreUpper() {
|
||||
if (this.list[0] < 0) return;
|
||||
this.list.unshift(-1);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isWaterfallDisabled: function() {
|
||||
return this.loading || this.finished;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-sub-title {
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -4,11 +4,15 @@ import App from './ExamplesDocsApp';
|
||||
import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import SideNav from './components/side-nav';
|
||||
import Mobile from './components/mobile';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import ZanUI from 'src/index.js';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('mobile', Mobile);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
@ -38,7 +42,6 @@ router.afterEach(route => {
|
||||
Vue.nextTick(() => {
|
||||
document.body.scrollTop = indexScrollTop;
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,5 +1,22 @@
|
||||
{
|
||||
"zh-CN": [
|
||||
{
|
||||
"name": "开发指南",
|
||||
"groups": [
|
||||
{
|
||||
"list": [
|
||||
{
|
||||
"path": "/install",
|
||||
"title": "安装"
|
||||
},
|
||||
{
|
||||
"path": "/quickstart",
|
||||
"title": "快速上手"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "ZanUI组件",
|
||||
"groups": [
|
||||
@ -113,8 +130,8 @@
|
||||
"title": "Waterfall"
|
||||
},
|
||||
{
|
||||
"path": "/img-preview",
|
||||
"title": "Img Preview"
|
||||
"path": "/image-preview",
|
||||
"title": "ImagePreview"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@ const registerRoute = (navConfig, isExample) => {
|
||||
route.push({
|
||||
path: '/component' + page.path,
|
||||
component: function(resolve) {
|
||||
require([isExample ? `./examples${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
|
||||
require([isExample ? `./examples-dist${page.path}.vue` : `./examples-docs${page.path}.md`], resolve);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
31
package.json
31
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-vue",
|
||||
"version": "0.0.8",
|
||||
"version": "0.0.15",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/zanui.js",
|
||||
"style": "lib/zanui-css/index.css",
|
||||
@ -11,15 +11,20 @@
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
|
||||
"dev": "npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
|
||||
"build:components": "webpack --progress --hide-modules --config build/webpack.components.js",
|
||||
"build:zanui": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:zanui && npm run build:utils && npm run build:zanui-css",
|
||||
"builddocs": "webpack --progress --hide-modules --config build/webpack.config.js && set NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.js",
|
||||
"build:example": "node build/genExamples.js",
|
||||
"build:docs": "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} --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 {} "
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -39,6 +44,7 @@
|
||||
"vue": "^2.1.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"2webpack2": "^1.2.1",
|
||||
"autoprefixer": "^6.7.5",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.17.0",
|
||||
@ -49,8 +55,10 @@
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-runtime": "^6.11.0",
|
||||
"chai": "^3.5.0",
|
||||
"cheerio": "^0.22.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cp-cli": "^1.0.2",
|
||||
@ -63,6 +71,7 @@
|
||||
"eslint-plugin-html": "^1.3.0",
|
||||
"eslint-plugin-promise": "^1.0.8",
|
||||
"eslint-plugin-standard": "^1.3.2",
|
||||
"eslint-plugin-vue": "^2.0.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0-beta.5",
|
||||
"file-loader": "^0.9.0",
|
||||
"file-save": "^0.2.0",
|
||||
@ -78,11 +87,20 @@
|
||||
"isparta-loader": "^2.0.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"json-templater": "^1.0.4",
|
||||
"karma": "^1.5.0",
|
||||
"karma-chrome-launcher": "^2.0.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-sinon-chai": "^1.2.4",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.30",
|
||||
"karma-webpack": "^2.0.2",
|
||||
"lerna": "2.0.0-beta.31",
|
||||
"lolex": "^1.5.1",
|
||||
"markdown-it": "^6.1.1",
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mocha": "^3.2.0",
|
||||
"pixrem": "^3.0.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-calc": "^5.0.0",
|
||||
@ -100,9 +118,12 @@
|
||||
"postcss-utils": "^1.0.1",
|
||||
"precss": "^1.4.0",
|
||||
"prismjs": "^1.5.1",
|
||||
"progress-bar-webpack-plugin": "^1.9.3",
|
||||
"rimraf": "^2.5.4",
|
||||
"run-sequence": "^1.2.2",
|
||||
"saladcss-bem": "^0.0.1",
|
||||
"sinon": "^1.17.7",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"style-loader": "^0.13.1",
|
||||
"theaterjs": "^3.0.0",
|
||||
"transliteration": "^1.1.11",
|
||||
|
||||
8
packages/actionsheet/CHANGELOG.md
Normal file
8
packages/actionsheet/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/actionsheet/README.md
Normal file
26
packages/actionsheet/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
3
packages/actionsheet/index.js
Normal file
3
packages/actionsheet/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import ActionSheet from './src/actionsheet';
|
||||
|
||||
export default ActionSheet;
|
||||
10
packages/actionsheet/package.json
Normal file
10
packages/actionsheet/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
70
packages/actionsheet/src/actionsheet.vue
Normal file
70
packages/actionsheet/src/actionsheet.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<transition name="actionsheet-float">
|
||||
<div class="zan-actionsheet" v-show="currentValue">
|
||||
<div class="zan-actionsheet-header" v-if="title">
|
||||
<h3 v-text="title"></h3>
|
||||
</div>
|
||||
<slot>
|
||||
<ul class="zan-actionsheet-list">
|
||||
<li v-for="item in actions" class="zan-actionsheet-item" :class="item.className" @click.stop="handleItemClick(item)">{{ item.name }}</li>
|
||||
</ul>
|
||||
<a class="zan-actionsheet-button" @click.stop="currentValue = false" v-if="cancelText">{{ cancelText }}</a>
|
||||
</slot>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from 'src/mixins/popup';
|
||||
|
||||
export default {
|
||||
name: 'zan-actionsheet',
|
||||
|
||||
mixins: [Popup],
|
||||
|
||||
props: {
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
title: String,
|
||||
cancelText: String,
|
||||
overlay: {
|
||||
default: true
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.value) {
|
||||
this.currentValue = true;
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleItemClick(item) {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -5,6 +5,7 @@
|
||||
{{title}}
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-badge',
|
||||
@ -37,4 +38,4 @@ export default {
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -61,17 +61,23 @@ export default {
|
||||
'zan-button--' + type,
|
||||
'zan-button--' + size,
|
||||
{
|
||||
'is-disabled': disabled,
|
||||
'is-loading': loading,
|
||||
'is-block': block
|
||||
'zan-button--disabled': disabled,
|
||||
'zan-button--loading': loading,
|
||||
'zan-button--block': block
|
||||
}
|
||||
]}
|
||||
onClick={this.handleClick}
|
||||
>
|
||||
{
|
||||
loading ? <i class="zan-icon-loading"></i> : 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>
|
||||
<span class="zan-button__text">{this.$slots.default}</span>
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<div class="zan-cell__value" :class="{
|
||||
'is-link': isLink,
|
||||
'is-alone': !title && !label
|
||||
'is-alone': !this.$slots.title && !title && !label
|
||||
}">
|
||||
<slot>
|
||||
<span v-text="value"></span>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div
|
||||
class="zan-checkbox"
|
||||
:class="{
|
||||
'is-disabled': isDisabled
|
||||
'zan-checkbox--disabled': isDisabled
|
||||
}">
|
||||
<span class="zan-checkbox__input">
|
||||
<input
|
||||
@ -54,14 +54,14 @@ export default {
|
||||
|
||||
set(val) {
|
||||
if (this.isGroup && this.parentGroup) {
|
||||
let parentValue = this.parentGroup.value.slice();
|
||||
const parentValue = this.parentGroup.value.slice();
|
||||
if (val) {
|
||||
if (parentValue.indexOf(this.name) === -1) {
|
||||
parentValue.push(this.name);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
}
|
||||
} else {
|
||||
let index = parentValue.indexOf(this.name);
|
||||
const index = parentValue.indexOf(this.name);
|
||||
if (index !== -1) {
|
||||
parentValue.splice(index, 1);
|
||||
this.parentGroup.$emit('input', parentValue);
|
||||
|
||||
8
packages/col/CHANGELOG.md
Normal file
8
packages/col/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/col/README.md
Normal file
26
packages/col/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
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