mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge remote-tracking branch 'upstream/dev' into dev
This commit is contained in:
niunai
commit
e8cc4a3bf8
7
.babelrc
7
.babelrc
@ -1,9 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
"es2015"
|
||||
[
|
||||
"es2015",
|
||||
{ "modules": false }
|
||||
]
|
||||
],
|
||||
"plugins": [
|
||||
"transform-runtime",
|
||||
"transform-vue-jsx"
|
||||
]
|
||||
}
|
||||
}
|
||||
64
README.md
64
README.md
@ -9,62 +9,76 @@
|
||||
|
||||
[](https://travis-ci.org/youzan/vant) [](https://codecov.io/github/youzan/vant?branch=dev) [](https://www.npmjs.com/package/vant) [](https://www.npmjs.com/package/vant)
|
||||
|
||||
## 一、安装
|
||||
[访问中文版](./README.zh-CN.md)
|
||||
|
||||
## Install
|
||||
|
||||
```shell
|
||||
npm i -S vant
|
||||
```
|
||||
|
||||
## 二、使用
|
||||
## Usage
|
||||
|
||||
### Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
|
||||
|
||||
```js
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vant", "style": true }]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Then you can import components from vant, equivalent to import manually below.
|
||||
|
||||
```js
|
||||
// import js and css modularly, parsed by babel-plugin-import
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
### Manually import
|
||||
|
||||
```jsx
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
```
|
||||
|
||||
|
||||
### 1. 导入所有组件
|
||||
### Import all components
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import vant from 'vant';
|
||||
// 你也可以使用自己的主题
|
||||
import 'vant/lib/vant-css/index.css';
|
||||
|
||||
Vue.use(vant);
|
||||
```
|
||||
|
||||
### 2. 按需导入组件
|
||||
## Development
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
|
||||
## 三、开发
|
||||
|
||||
### 1. 新建一个组件
|
||||
### Add a new component
|
||||
|
||||
```shell
|
||||
make init componentName
|
||||
```
|
||||
|
||||
### 2. 示例预览
|
||||
### Start coding
|
||||
|
||||
在`docs/nav.config.json`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 在`docs/examples-docs`目录里新建同名的md文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动server：
|
||||
Start development mode:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器访问[http://localhost:8080](http://localhost:8080)就可以看到所有组件的示例了。
|
||||
Visit [http://localhost:8080](http://localhost:8080) to see an example of all components.
|
||||
|
||||
## 四、手机预览
|
||||
## Preview
|
||||
|
||||
可以手机扫码以下二维码访问手机端demo：
|
||||
You can scan the following QR code to access the demo：
|
||||
|
||||
|
||||
|
||||
## 五、开源协议
|
||||
## LICENSE
|
||||
|
||||
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
|
||||
[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
|
||||
|
||||
82
README.zh-CN.md
Normal file
82
README.zh-CN.md
Normal file
@ -0,0 +1,82 @@
|
||||
<p>
|
||||
<a href="https://github.com/youzan/"><img alt="有赞logo" width="36px" src="https://img.yzcdn.cn/public_files/2017/02/09/e84aa8cbbf7852688c86218c1f3bbf17.png" alt="youzan">
|
||||
</a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<img alt="项目logo" src="https://img.yzcdn.cn/upload_files/2017/04/20/FlkVrSlOr-SGK9qQqtilN6-IFZyT.png">
|
||||
</p>
|
||||
<p align="center">A Vue.js 2.0 Mobile UI at YouZan</p>
|
||||
|
||||
[](https://travis-ci.org/youzan/vant) [](https://codecov.io/github/youzan/vant?branch=dev) [](https://www.npmjs.com/package/vant) [](https://www.npmjs.com/package/vant)
|
||||
|
||||
## 一、安装
|
||||
|
||||
```shell
|
||||
npm i -S vant
|
||||
```
|
||||
|
||||
## 二、使用
|
||||
|
||||
|
||||
### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
||||
|
||||
```js
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vant", "style": true }]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
接着你可以直接引入 vant 组件，等价于下方的按需引入组件
|
||||
|
||||
```js
|
||||
// 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
### 按需引入组件
|
||||
|
||||
```jsx
|
||||
import { Button } from 'vant/lib/button';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
```
|
||||
|
||||
### 导入所有组件
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import vant from 'vant';
|
||||
import 'vant/lib/vant-css/index.css';
|
||||
|
||||
Vue.use(vant);
|
||||
```
|
||||
|
||||
## 三、开发
|
||||
|
||||
### 1. 新建一个组件
|
||||
|
||||
```shell
|
||||
make init componentName
|
||||
```
|
||||
|
||||
### 2. 示例预览
|
||||
|
||||
在`docs/nav.config.json`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 在`docs/examples-docs`目录里新建同名的md文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动server：
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
浏览器访问[http://localhost:8080](http://localhost:8080)就可以看到所有组件的示例了。
|
||||
|
||||
## 四、手机预览
|
||||
|
||||
可以手机扫码以下二维码访问手机端demo：
|
||||
|
||||
|
||||
|
||||
## 五、开源协议
|
||||
|
||||
本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
|
||||
@ -3,18 +3,23 @@ var fs = require('fs');
|
||||
var render = require('json-templater/string');
|
||||
var uppercamelcase = require('uppercamelcase');
|
||||
var path = require('path');
|
||||
var chalk = require('chalk');
|
||||
|
||||
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
|
||||
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
|
||||
var ISNTALL_COMPONENT_TEMPLATE = ' Vue.component({{name}}.name, {{name}});';
|
||||
var ISNTALL_COMPONENT_TEMPLATE = ' {{name}}';
|
||||
var MAIN_TEMPLATE = `{{include}}
|
||||
|
||||
const version = '{{version}}';
|
||||
const components = [
|
||||
{{components}}
|
||||
];
|
||||
|
||||
const install = function(Vue) {
|
||||
/* istanbul ignore if */
|
||||
if (install.installed) return;
|
||||
|
||||
{{install}}
|
||||
components.forEach(component => {
|
||||
Vue.component(component.name, component);
|
||||
});
|
||||
};
|
||||
|
||||
/* istanbul ignore if */
|
||||
@ -22,9 +27,14 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
export {
|
||||
install,
|
||||
version: '{{version}}',
|
||||
version,
|
||||
{{list}}
|
||||
};
|
||||
export default {
|
||||
install,
|
||||
version,
|
||||
{{list}}
|
||||
};
|
||||
`;
|
||||
@ -66,11 +76,11 @@ ComponentNames.forEach(name => {
|
||||
|
||||
var template = render(MAIN_TEMPLATE, {
|
||||
include: includeComponentTemplate.join('\n'),
|
||||
install: installTemplate.join('\n'),
|
||||
version: process.env.VERSION || require('../../package.json').version,
|
||||
list: listTemplate.join(',\n')
|
||||
list: listTemplate.join(',\n'),
|
||||
components: installTemplate.join(',\n') || ' ',
|
||||
version: process.env.VERSION || require('../../package.json').version
|
||||
});
|
||||
|
||||
fs.writeFileSync(OUTPUT_PATH, template);
|
||||
console.log(chalk.green('[build entry] DONE:' + OUTPUT_PATH));
|
||||
console.log('[build entry] DONE:' + OUTPUT_PATH);
|
||||
|
||||
|
||||
91
build/bin/build-lib.js
Normal file
91
build/bin/build-lib.js
Normal file
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* Build npm lib
|
||||
* Steps:
|
||||
* 1. 清理目录
|
||||
* 2. 构建 JS 入口文件
|
||||
* 3. 打包 JS 文件：vant.js && vant.min.js
|
||||
* 4. 构建 CSS 文件：vant-css
|
||||
* 5. 构建每个组件对应的 [component].js
|
||||
* 6. 生成每个组件目录下的 style 入口
|
||||
* 7. 编译 utils
|
||||
*/
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const components = require('../../components.json');
|
||||
const chalk = require('chalk');
|
||||
require('shelljs/global');
|
||||
|
||||
// clean dir
|
||||
log('Starting', 'clean');
|
||||
exec('npm run clean --silent');
|
||||
log('Finished', 'clean');
|
||||
|
||||
// build entry
|
||||
log('Starting', 'build:entry');
|
||||
exec('npm run build:file --silent');
|
||||
log('Finished', 'build:entry');
|
||||
|
||||
// lint
|
||||
log('Starting', 'lint');
|
||||
exec('npm run lint --silent');
|
||||
log('Finished', 'lint');
|
||||
|
||||
// build vant.js
|
||||
log('Starting', 'build:vant');
|
||||
exec('npm run build:vant --silent');
|
||||
log('Finished', 'build:vant');
|
||||
|
||||
// build [component].js
|
||||
log('Starting', 'build:component');
|
||||
exec('npm run build:components --silent');
|
||||
log('Finished', 'build:component');
|
||||
|
||||
// build vant-css
|
||||
log('Starting', 'build:vant-css');
|
||||
exec('npm run build:vant-css --silent');
|
||||
log('Finished', 'build:vant-css');
|
||||
|
||||
// build style entrys
|
||||
log('Starting', 'build:style-entries');
|
||||
Object.keys(components).forEach((componentName) => {
|
||||
const dir = path.join(__dirname, '../../lib/', componentName, '/style');
|
||||
const file = path.join(dir, 'index.js');
|
||||
const cssPath = path.join(__dirname, '../../lib/vant-css/', `${componentName}.css`);
|
||||
const content = [];
|
||||
if (fs.existsSync(cssPath)) {
|
||||
content.push(`require('../../vant-css/${componentName}.css');`);
|
||||
}
|
||||
mkdir(dir);
|
||||
writeFile(file, content.join('\n'));
|
||||
});
|
||||
log('Finished', 'build:style-entries');
|
||||
|
||||
// build utils
|
||||
log('Starting', 'build:utils');
|
||||
exec('npm run build:utils --silent');
|
||||
log('Finished', 'build:utils');
|
||||
|
||||
// helpers
|
||||
function log(status, action, breakLine) {
|
||||
const now = new Date();
|
||||
const clock = `${breakLine ? '\n' : ''}[${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}]`;
|
||||
console.log(`${chalk.gray(clock)} ${status} '${action ? chalk.cyan.bold(action ) : ''}'`);
|
||||
}
|
||||
|
||||
function padZero(num) {
|
||||
return (num < 10 ? '0' : '') + num;
|
||||
}
|
||||
|
||||
function writeFile(pathname, content) {
|
||||
if (!fs.existsSync(pathname)) {
|
||||
fs.closeSync(fs.openSync(pathname, 'w'));
|
||||
}
|
||||
fs.writeFileSync(pathname, content, { encoding: 'utf8' });
|
||||
}
|
||||
|
||||
function mkdir(pathname) {
|
||||
if (!fs.existsSync(pathname)) {
|
||||
fs.mkdirSync(pathname);
|
||||
}
|
||||
}
|
||||
@ -11,8 +11,6 @@ function extract(watch = false) {
|
||||
});
|
||||
}
|
||||
|
||||
extract();
|
||||
|
||||
module.exports = function watch() {
|
||||
extract(true);
|
||||
module.exports = function watch(isProduction) {
|
||||
extract(!isProduction);
|
||||
};
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
/*!
|
||||
* strip-tags <https://github.com/jonschlinkert/strip-tags>
|
||||
*
|
||||
* Copyright (c) 2015 Jon Schlinkert, contributors.
|
||||
* Licensed under the MIT license.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var cheerio = require('cheerio');
|
||||
|
||||
exports.strip = function(str, tags) {
|
||||
var $ = cheerio.load(str, {decodeEntities: false});
|
||||
|
||||
if (!tags || tags.length === 0) {
|
||||
return str;
|
||||
}
|
||||
|
||||
tags = !Array.isArray(tags) ? [tags] : tags;
|
||||
var len = tags.length;
|
||||
|
||||
while (len--) {
|
||||
$(tags[len]).remove();
|
||||
}
|
||||
|
||||
return $.html();
|
||||
};
|
||||
|
||||
exports.fetch = function(str, tag) {
|
||||
var $ = cheerio.load(str, {decodeEntities: false});
|
||||
if (!tag) return str;
|
||||
|
||||
return $(tag).html();
|
||||
};
|
||||
@ -1,29 +0,0 @@
|
||||
var config = {
|
||||
'bem': {
|
||||
'shortcuts': {'component': 'b', 'modifier': 'm', 'descendent': 'e'},
|
||||
'separators': {'descendent': '__', 'modifier': '--'}
|
||||
}
|
||||
};
|
||||
|
||||
// https://github.com/trysound/postcss-easy-import
|
||||
var partialImport = require('postcss-easy-import')();
|
||||
|
||||
// 这不是bem，虽然名字叫bem，其实它是suit
|
||||
// https://github.com/saladcss/saladcss-bem
|
||||
var bem = require('saladcss-bem')(config.bem);
|
||||
|
||||
// https://github.com/jonathantneal/precss
|
||||
var precss = require('precss')();
|
||||
|
||||
// https://github.com/postcss/autoprefixer
|
||||
var autoprefixer = require('autoprefixer')();
|
||||
|
||||
module.exports = function (webpack) {
|
||||
// 顺序很重要
|
||||
return [
|
||||
partialImport,
|
||||
bem,
|
||||
precss,
|
||||
autoprefixer
|
||||
];
|
||||
};
|
||||
@ -1,13 +1,13 @@
|
||||
var webpack = require('webpack');
|
||||
var getPostcssPlugin = require('./utils/postcss_pipe');
|
||||
var config = require('./webpack.config.dev.js');
|
||||
const webpack = require('webpack');
|
||||
const config = require('./webpack.config.dev.js');
|
||||
const isMinify = process.argv.indexOf('-p') !== -1;
|
||||
|
||||
config.entry = {
|
||||
'vant': './src/index.js'
|
||||
};
|
||||
|
||||
config.output = {
|
||||
filename: './lib/[name].js',
|
||||
filename: isMinify ? './lib/[name].min.js' : './lib/[name].js',
|
||||
library: 'vant',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
@ -30,18 +30,13 @@ config.plugins = [
|
||||
minimize: true,
|
||||
debug: false,
|
||||
options: {
|
||||
postcss: getPostcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
vue: {
|
||||
autoprefixer: false,
|
||||
preserveWhitespace: false,
|
||||
postcss: getPostcssPlugin
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
})
|
||||
}),
|
||||
new webpack.optimize.ModuleConcatenationPlugin()
|
||||
];
|
||||
|
||||
delete config.devtool;
|
||||
|
||||
20
build/webpack.build.min.js
vendored
20
build/webpack.build.min.js
vendored
@ -1,20 +0,0 @@
|
||||
var webpack = require('webpack');
|
||||
var config = require('./webpack.build.js');
|
||||
|
||||
config.entry = {
|
||||
'index': './src/index.js'
|
||||
};
|
||||
|
||||
config.plugins = config.plugins.concat([
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
},
|
||||
output: {
|
||||
comments: false
|
||||
},
|
||||
sourceMap: false
|
||||
})
|
||||
]);
|
||||
|
||||
module.exports = config;
|
||||
@ -1,10 +1,16 @@
|
||||
var path = require('path');
|
||||
var Components = require('../components.json');
|
||||
var config = require('./webpack.build.js');
|
||||
const path = require('path');
|
||||
const Components = require('../components.json');
|
||||
const config = require('./webpack.build.js');
|
||||
const webpack = require('webpack');
|
||||
|
||||
delete config.devtool;
|
||||
|
||||
config.entry = Components;
|
||||
const entry = {};
|
||||
Object.keys(Components).forEach(key => {
|
||||
entry[key + '/index'] = Components[key];
|
||||
});
|
||||
|
||||
config.entry = entry;
|
||||
|
||||
config.externals = {
|
||||
vue: {
|
||||
@ -18,8 +24,8 @@ config.externals = {
|
||||
config.output = {
|
||||
path: path.join(__dirname, '../lib'),
|
||||
filename: '[name].js',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
libraryExport: "default",
|
||||
libraryTarget: 'umd'
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
|
||||
@ -1,44 +1,19 @@
|
||||
var webpack = require('webpack');
|
||||
var path = require('path');
|
||||
var slugify = require('transliteration').slugify;
|
||||
var striptags = require('./strip-tags');
|
||||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
var getPostcssPlugin = require('./utils/postcss_pipe');
|
||||
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
|
||||
const isProduction = process.env.NODE_ENV === 'production';
|
||||
const watchExample = require('./genExamples');
|
||||
|
||||
if (!isProduction) {
|
||||
watchExample();
|
||||
}
|
||||
|
||||
var StyleExtractPlugin;
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
StyleExtractPlugin = new ExtractTextPlugin('[name].[hash:8].css');
|
||||
} else {
|
||||
StyleExtractPlugin = new ExtractTextPlugin('[name].css');
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function wrap(render) {
|
||||
return function() {
|
||||
return render.apply(this, arguments)
|
||||
.replace(/\<code v-pre class=\"/, '<code v-pre class="hljs ');
|
||||
};
|
||||
};
|
||||
const styleLoaders = [
|
||||
{ loader: 'css-loader' },
|
||||
{ loader: 'postcss-loader', options: { sourceMap: true } }
|
||||
];
|
||||
require('./genExamples')(isProduction);
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
'vendor': ['vue', 'vue-router', 'zan-doc'],
|
||||
'vant-docs': './docs/src/index.js',
|
||||
'vant-examples': './docs/src/examples.js'
|
||||
},
|
||||
@ -46,7 +21,8 @@ module.exports = {
|
||||
path: path.join(__dirname, '../docs/dist'),
|
||||
publicPath: '/',
|
||||
filename: '[name].js',
|
||||
umdNamedDefine: true
|
||||
umdNamedDefine: true,
|
||||
chunkFilename: 'async.[name].js'
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: {
|
||||
@ -54,37 +30,41 @@ module.exports = {
|
||||
{ from: /^\/zanui\/vue\/examples/, to: '/examples.html' },
|
||||
{ from: /^\/zanui\/vue/, to: '/index.html' }
|
||||
]
|
||||
}
|
||||
},
|
||||
stats: 'errors-only'
|
||||
},
|
||||
resolve: {
|
||||
modules: [
|
||||
path.join(__dirname, '../node_modules'),
|
||||
'node_modules'
|
||||
],
|
||||
modules: [path.join(__dirname, '../node_modules'), 'node_modules'],
|
||||
extensions: ['.js', '.vue', '.css'],
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.runtime.common.js',
|
||||
'src': path.join(__dirname, '../src'),
|
||||
'packages': path.join(__dirname, '../packages'),
|
||||
'lib': path.join(__dirname, '../lib'),
|
||||
'components': path.join(__dirname, '../docs/src/components')
|
||||
vue: 'vue/dist/vue.runtime.esm.js',
|
||||
src: path.join(__dirname, '../src'),
|
||||
packages: path.join(__dirname, '../packages'),
|
||||
lib: path.join(__dirname, '../lib'),
|
||||
components: path.join(__dirname, '../docs/src/components')
|
||||
}
|
||||
},
|
||||
module: {
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
use: [{
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
css: ExtractTextPlugin.extract({
|
||||
use: 'css-loader!postcss-loader',
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
use: [
|
||||
{
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
postcss: ExtractTextPlugin.extract({
|
||||
use: styleLoaders,
|
||||
fallback: 'vue-style-loader'
|
||||
}),
|
||||
css: ExtractTextPlugin.extract({
|
||||
use: styleLoaders,
|
||||
fallback: 'vue-style-loader'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
@ -93,9 +73,7 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: 'css-loader!postcss-loader'
|
||||
})
|
||||
use: ExtractTextPlugin.extract({ use: styleLoaders })
|
||||
},
|
||||
{
|
||||
test: /\.md/,
|
||||
@ -113,34 +91,29 @@ module.exports = {
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
postcss: getPostcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
vue: {
|
||||
autoprefixer: false,
|
||||
postcss: getPostcssPlugin
|
||||
autoprefixer: false
|
||||
},
|
||||
vueMarkdown: {
|
||||
use: [
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
[
|
||||
require('markdown-it-container'),
|
||||
'demo',
|
||||
{
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
if (tokens[idx].nesting === 1) {
|
||||
return `<demo-block class="demo-box"><div class="highlight" slot="highlight">`;
|
||||
render: function(tokens, idx) {
|
||||
return tokens[idx].nesting === 1
|
||||
? `<demo-block class="demo-box"><div class="highlight" slot="highlight"å>`
|
||||
:`</div></demo-block>\n`;
|
||||
}
|
||||
return `</div></demo-block>\n`;
|
||||
}
|
||||
}]
|
||||
]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
MarkdownIt.renderer.rules.table_open = function() {
|
||||
return '<table class="zan-doc-table">';
|
||||
};
|
||||
MarkdownIt.renderer.rules.table_open = () => '<table class="zan-doc-table">';
|
||||
return source;
|
||||
}
|
||||
}
|
||||
@ -158,9 +131,16 @@ module.exports = {
|
||||
filename: 'examples.html',
|
||||
inject: true
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: 2
|
||||
}),
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new OptimizeCssAssetsPlugin(),
|
||||
StyleExtractPlugin,
|
||||
new ExtractTextPlugin({
|
||||
filename: isProduction ? '[name].[hash:8].css' : '[name].css',
|
||||
allChunks: true
|
||||
}),
|
||||
new FriendlyErrorsPlugin()
|
||||
]
|
||||
};
|
||||
|
||||
@ -6,9 +6,10 @@ var devConfig = require('./webpack.config.dev.js');
|
||||
module.exports = merge(devConfig, {
|
||||
output: {
|
||||
path: path.join(__dirname, '../docs/dist'),
|
||||
publicPath: 'https://b.yzcdn.cn/zanui/vue',
|
||||
publicPath: 'https://b.yzcdn.cn/zanui/vue/',
|
||||
filename: '[name].[hash:8].js',
|
||||
umdNamedDefine: true
|
||||
umdNamedDefine: true,
|
||||
chunkFilename: 'async.[name].[chunkhash:8].js'
|
||||
},
|
||||
devtool: false,
|
||||
plugins: [
|
||||
|
||||
@ -1,206 +0,0 @@
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button, input, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
line-height: 1.5;
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
font-size: 12px;
|
||||
padding: 20px;
|
||||
background-color: #f8f8f8;
|
||||
border: solid 1px #E5E5E5;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 4px;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
&::before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 130px 20px 40px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
|
||||
section {
|
||||
padding: 0 40px;
|
||||
|
||||
> h1,
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6 {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0;
|
||||
font-weight: normal;
|
||||
|
||||
.header-anchor {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
> h2 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
> h3 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
> h4 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
> h5 {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
> h6 {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
> ul li,
|
||||
> ol li {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin: 10px 0 10px 20px;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #999;
|
||||
border-radius: 50%;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p > code,
|
||||
.table code,
|
||||
li > code {
|
||||
background-color: #F2F2F2;
|
||||
display: inline-block;
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 2px 4px;
|
||||
color: #333;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border: 1px solid #E5E5E5;
|
||||
background-color: #F2F2F2;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #E5E5E5;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@ -1,27 +1,21 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06BF04;
|
||||
}
|
||||
.demo-actionsheet {
|
||||
.actionsheet-wx {
|
||||
color: #06BF04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.title-actionsheet p {
|
||||
padding: 20px;
|
||||
}
|
||||
.title-actionsheet p {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
data() {
|
||||
return {
|
||||
show1: false,
|
||||
@ -61,37 +55,6 @@ export default {
|
||||
|
||||
## ActionSheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`ActionSheet`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`ActionSheet`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { ActionSheet } from 'vant';
|
||||
import 'vant/lib/vant-css/actionSheet.css';
|
||||
|
||||
Vue.component(ActionSheet.name, ActionSheet);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`ActionSheet`组件，这样只能在你注册的组件中使用`ActionSheet`：
|
||||
|
||||
```js
|
||||
import { ActionSheet } from 'vant';
|
||||
import 'vant/lib/vant-css/actionSheet.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-actionSheet': ActionSheet
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -199,11 +162,6 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b badge {
|
||||
.badge-group-wrapper {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.demo-badge {
|
||||
.badge-group-wrapper {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.van-badge-group {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -30,39 +28,6 @@
|
||||
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/badge.css';
|
||||
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(BadgeGroup.name, BadgeGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
|
||||
|
||||
```js
|
||||
import { Badge, BadgeGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/badge.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-badge': Badge,
|
||||
'van-badge-group': BadgeGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b button {
|
||||
.van-button {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
user-select: none;
|
||||
}
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.van-col-24 {
|
||||
margin-bottom: 20px;
|
||||
.demo-button {
|
||||
.van-button {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
user-select: none;
|
||||
}
|
||||
.van-row {
|
||||
padding: 0 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.van-col-24 {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,37 +20,6 @@
|
||||
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Button`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Button`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Button`组件，这样只能在你注册的组件中使用`Button`：
|
||||
|
||||
```js
|
||||
import { Button } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-button': Button
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 按钮功能
|
||||
|
||||
@ -1,36 +1,5 @@
|
||||
## Card 图文组件
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Card } from 'vant';
|
||||
import 'vant/lib/vant-css/card.css';
|
||||
|
||||
Vue.component(Card.name, Card);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
|
||||
|
||||
```js
|
||||
import { Card } from 'vant';
|
||||
import 'vant/lib/vant-css/card.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-card': Card
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -22,36 +22,6 @@
|
||||
</style>
|
||||
## CellSwipe 滑动单元格
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Cell Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell Swipe`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { CellSwipe } from 'vant';
|
||||
import 'vant/lib/vant-css/cell-swipe.css';
|
||||
|
||||
Vue.component(CellSwipe.name, CellSwipe);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell Swipe`组件，这样只能在你注册的组件中使用`Cell Swipe`：
|
||||
|
||||
```js
|
||||
import { CellSwipe } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-cell-swipe': CellSwipe
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -10,39 +10,6 @@ export default {
|
||||
|
||||
## Cell 单元格
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Cell`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Cell`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
Vue.component(CellGroup.name, CellGroup);
|
||||
Vue.component(Cell.name, Cell);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Cell`组件，这样只能在你注册的组件中使用`Cell`：
|
||||
|
||||
```js
|
||||
import { Cell } from 'vant';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-cell-group': CellGroup,
|
||||
'van-cell': Cell
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,5 +1,79 @@
|
||||
## 更新日志
|
||||
|
||||
## [v0.7.8](https://github.com/youzan/vant/tree/v0.7.8) (2017-08-10)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.7...v0.7.8)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- not require reset.css by default [\#72](https://github.com/youzan/vant/pull/72) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 补充 babel-plugin-import 文档 [\#71](https://github.com/youzan/vant/pull/71) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
## [v0.7.7](https://github.com/youzan/vant/tree/v0.7.7) (2017-08-09)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.6...v0.7.7)
|
||||
|
||||
**修复:**
|
||||
|
||||
- Fixed: one page Swipe components error [\#70](https://github.com/youzan/vant/pull/70) ([Raistlin916](https://github.com/Raistlin916))
|
||||
|
||||
## [v0.7.6](https://github.com/youzan/vant/tree/v0.7.6) (2017-08-08)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.5...v0.7.6)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 新增几个icon [\#69](https://github.com/youzan/vant/pull/69) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.7.5](https://github.com/youzan/vant/tree/v0.7.5) (2017-08-08)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.3...v0.7.5)
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: one page swiper broken [\#68](https://github.com/youzan/vant/pull/68) ([Raistlin916](https://github.com/Raistlin916))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- 安装业务组件导致基础组件css样式文件引入失败 [\#65](https://github.com/youzan/vant/issues/65)
|
||||
|
||||
## [v0.7.3](https://github.com/youzan/vant/tree/v0.7.3) (2017-08-04)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.7.2...v0.7.3)
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- datetime-picker的问题 [\#45](https://github.com/youzan/vant/issues/45)
|
||||
|
||||
**合并的 Pull Request (可能有不兼容改动):**
|
||||
|
||||
- fix: utils 修复babel编译 [\#67](https://github.com/youzan/vant/pull/67) ([pangxie1991](https://github.com/pangxie1991))
|
||||
- README.md使用英文文档 [\#66](https://github.com/youzan/vant/pull/66) ([cookfront](https://github.com/cookfront))
|
||||
|
||||
## [v0.7.2](https://github.com/youzan/vant/tree/v0.7.2) (2017-07-31)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.6...v0.7.2)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 支持 babel-plugin-import [\#62](https://github.com/youzan/vant/pull/62) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 依赖更新 && 构建调整 [\#60](https://github.com/youzan/vant/pull/60) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- Switch 组件: 个人建议加了动画效果 [\#59](https://github.com/youzan/vant/pull/59) ([BosenY](https://github.com/BosenY))
|
||||
- 文档改版 [\#55](https://github.com/youzan/vant/pull/55) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 新增：Card 组件增加 centered 属性 [\#54](https://github.com/youzan/vant/pull/54) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**修复:**
|
||||
|
||||
- fix: datetimepicker cancel event not work [\#64](https://github.com/youzan/vant/pull/64) ([chenjiahan](https://github.com/chenjiahan))
|
||||
- 修复：popup多层级van-modal未插入到正确的位置 [\#63](https://github.com/youzan/vant/pull/63) ([cookfront](https://github.com/cookfront))
|
||||
- 新增几个图标 && 修复tabs组件为空报错的问题 [\#61](https://github.com/youzan/vant/pull/61) ([cookfront](https://github.com/cookfront))
|
||||
- Fix: deploy doc fail [\#56](https://github.com/youzan/vant/pull/56) ([chenjiahan](https://github.com/chenjiahan))
|
||||
|
||||
**处理的 Issue:**
|
||||
|
||||
- SVG's SMIL animations deprecated [\#46](https://github.com/youzan/vant/issues/46)
|
||||
|
||||
## [v0.6.6](https://github.com/youzan/vant/tree/v0.6.6) (2017-07-15)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.5...v0.6.6)
|
||||
|
||||
**非兼容更新和新特性:**
|
||||
|
||||
- 新增：Field 增加blur事件 && Field 支持尾部icon [\#53](https://github.com/youzan/vant/pull/53) ([pangxie1991](https://github.com/pangxie1991))
|
||||
|
||||
## [v0.6.5](https://github.com/youzan/vant/tree/v0.6.5) (2017-07-11)
|
||||
[Full Changelog](https://github.com/youzan/vant/compare/v0.6.4...v0.6.5)
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b checkbox {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
.demo-checkbox {
|
||||
.van-checkbox-wrapper {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.van-checkbox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,39 +35,6 @@ export default {
|
||||
|
||||
## Checkbox 复选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/checkbox.css';
|
||||
|
||||
Vue.component(Checkbox.name, Checkbox);
|
||||
Vue.component(CheckboxGroup.name, CheckboxGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
|
||||
|
||||
```js
|
||||
import { Checkbox, CheckboxGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/checkbox.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-checkbox': Checkbox,
|
||||
'van-checkbox-group': CheckboxGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -5,20 +5,21 @@ export default {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date(),
|
||||
currentDate: null
|
||||
currentDate1: null,
|
||||
currentDate2: null,
|
||||
currentDate3: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
// picker.setColumnValues(1, citys[values[0]]);
|
||||
console.log(values);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
console.log('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
console.log('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -26,36 +27,6 @@ export default {
|
||||
|
||||
## Datetime Picker 时间选择
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
Vue.component(DatetimePicker.name, DatetimePicker);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`DatetimePicker`组件，这样只能在你注册的组件中使用`DatetimePicker`：
|
||||
|
||||
```js
|
||||
import { DatetimePicker } from 'vant';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-datetime-picker': DatetimePicker
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -63,7 +34,7 @@ export default {
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
v-model="currentDate1"
|
||||
type="datetime"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
@ -98,7 +69,7 @@ export default {
|
||||
:::demo 选择日期
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
v-model="currentDate2"
|
||||
type="date"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
@ -114,13 +85,13 @@ export default {
|
||||
:::demo 选择时间
|
||||
```html
|
||||
<van-datetime-picker
|
||||
v-model="currentDate"
|
||||
v-model="currentDate3"
|
||||
type="time"
|
||||
format="yyyy.mm.dd hh时 mm分"
|
||||
:min-hour="minHour"
|
||||
:max-hour="maxHour"
|
||||
:min-date="minDate"
|
||||
@change="handlePickerChange">
|
||||
@change="handlePickerChange">
|
||||
</van-datetime-picker>
|
||||
```
|
||||
:::
|
||||
@ -145,6 +116,14 @@ export default {
|
||||
| defaultIndex | 初始选中值的索引，默认为0 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
|
||||
### Event
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| change | 当值变化时触发的事件 | picker 实例 |
|
||||
| confirm | 点击完成按钮时触发的事件 | 当前 value |
|
||||
| cancel | 点击取消按钮时触发的事件 | - |
|
||||
|
||||
### change事件
|
||||
|
||||
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
|
||||
|
||||
@ -1,20 +1,15 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
.demo-dialog {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { Dialog } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleAlertClick() {
|
||||
Dialog.alert({
|
||||
@ -120,11 +115,6 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法
|
||||
|
||||
#### Dialog.alert(options)
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.demo-field {
|
||||
.van-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,37 +29,6 @@ export default {
|
||||
|
||||
表单中`input`或`textarea`的输入框。
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Field } from 'vant';
|
||||
import 'vant/lib/vant-css/field.css';
|
||||
|
||||
Vue.component(Field.name, Field);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
|
||||
|
||||
```js
|
||||
import { Field } from 'vant';
|
||||
import 'vant/lib/vant-css/field.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-field': Field
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,57 +1,24 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b icon {
|
||||
.examples {
|
||||
max-height: none;
|
||||
}
|
||||
.demo-icon {
|
||||
.examples {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
}
|
||||
.van-col {
|
||||
text-align: center;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.van-icon {
|
||||
font-size: 45px;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Icon 图标
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Icon`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Icon`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Icon } from 'vant';
|
||||
import 'vant/lib/vant-css/icon.css';
|
||||
|
||||
Vue.component(Icon.name, Icon);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Icon`组件，这样只能在你注册的组件中使用`Icon`：
|
||||
|
||||
```js
|
||||
import { Icon } from 'vant';
|
||||
import 'vant/lib/vant-css/icon.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-icon': Icon
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -331,6 +298,46 @@ export default {
|
||||
<van-icon name="after-sale"></van-icon>
|
||||
<span>after-sale</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="edit-data"></van-icon>
|
||||
<span>edit-data</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="question"></van-icon>
|
||||
<span>question</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="delete"></van-icon>
|
||||
<span>delete</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="records"></van-icon>
|
||||
<span>records</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="description"></van-icon>
|
||||
<span>description</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="card"></van-icon>
|
||||
<span>card</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gift-card"></van-icon>
|
||||
<span>gift-card</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="coupon"></van-icon>
|
||||
<span>coupon</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="clock"></van-icon>
|
||||
<span>clock</span>
|
||||
</van-col>
|
||||
<van-col span="8">
|
||||
<van-icon name="gold-coin"></van-icon>
|
||||
<span>gold-coin</span>
|
||||
</van-col>
|
||||
</van-row>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -1,20 +1,15 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.demo-image-preview {
|
||||
.van-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'src/index';
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
methods: {
|
||||
handleImagePreview() {
|
||||
ImagePreview([
|
||||
@ -62,11 +57,6 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### 方法参数
|
||||
|
||||
| 参数名 | 说明 | 类型 |
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b layout {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.demo-layout {
|
||||
.van-row {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.van-col {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,41 +30,6 @@
|
||||
|
||||
主要提供了`van-row`和`van-col`两个组件来进行行列布局。
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Row, Col } from 'vant';
|
||||
import 'vant/lib/vant-css/col.css';
|
||||
import 'vant/lib/vant-css/row.css';
|
||||
|
||||
Vue.component(Row.name, Row);
|
||||
Vue.component(Col.name, Col);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
|
||||
|
||||
```js
|
||||
import { Row, Col } from 'vant';
|
||||
import 'vant/lib/vant-css/col.css';
|
||||
import 'vant/lib/vant-css/row.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-row': Row,
|
||||
'van-col': Col
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 常规用法
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b lazyload {
|
||||
.lazy-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.demo-lazyload {
|
||||
.lazy-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.lazy-background {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.lazy-background {
|
||||
height: 300px;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,58 +1,25 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.demo-loading {
|
||||
.van-loading {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
.circle-loading {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(17, 17, 17, 0.7);
|
||||
margin: 0 auto;
|
||||
width: 120px;
|
||||
padding: 45px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.demo-loading__example--with-bg {
|
||||
background-color: rgba(17, 17, 17, 0.7);
|
||||
margin: 0 auto;
|
||||
width: 120px;
|
||||
padding: 45px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading 加载
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Loading } from 'vant';
|
||||
import 'vant/lib/vant-css/loading.css';
|
||||
|
||||
Vue.component(Loading.name, Loading);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
|
||||
|
||||
```js
|
||||
import { Loading } from 'vant';
|
||||
import 'vant/lib/vant-css/loading.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-loading': Loading
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 渐变深色spinner
|
||||
|
||||
@ -1,67 +1,34 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b panel {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
.demo-panel {
|
||||
.van-panel-sum {
|
||||
background: #fff;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
padding-right: 15px;
|
||||
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
span {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
.van-panel-buttons {
|
||||
text-align: right;
|
||||
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.van-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
.panel-content {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Panel 面板
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Panel } from 'vant';
|
||||
import 'vant/lib/vant-css/panel.css';
|
||||
|
||||
Vue.component(Panel.name, Panel);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
|
||||
|
||||
```js
|
||||
import { Panel } from 'vant';
|
||||
import 'vant/lib/vant-css/panel.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-panel': Panel
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -38,37 +38,6 @@ export default {
|
||||
|
||||
## Picker 选择器
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Picker`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Picker`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Picker } from 'vant';
|
||||
import 'vant/lib/vant-css/picker.css';
|
||||
|
||||
Vue.component(Picker.name, Picker);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Picker`组件，这样只能在你注册的组件中使用`Picker`：
|
||||
|
||||
```js
|
||||
import { Picker } from 'vant';
|
||||
import 'vant/lib/vant-css/picker.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-picker': Picker
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,48 +1,43 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b popup {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
.demo-popup {
|
||||
.van-button {
|
||||
margin: 10px 15px;
|
||||
}
|
||||
|
||||
.van-popup-1 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.van-popup-1 {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
.van-popup-2 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
box-sizing: border-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
.van-popup-3 {
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, 0.701961);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.van-popup-4,
|
||||
.van-popup-5 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import MobileComputed from 'components/mobile-computed';
|
||||
import Dialog from 'packages/dialog';
|
||||
|
||||
export default {
|
||||
mixins: [MobileComputed],
|
||||
|
||||
data() {
|
||||
return {
|
||||
popupShow1: false,
|
||||
@ -80,37 +75,6 @@ export default {
|
||||
|
||||
## Popup 弹出菜单
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Popup`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Popup`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Popup } from 'vant';
|
||||
import 'vant/lib/vant-css/popup.css';
|
||||
|
||||
Vue.component(Popup.name, Popup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Popup`组件，这样只能在你注册的组件中使用`Popup`：
|
||||
|
||||
```js
|
||||
import { Popup } from 'vant';
|
||||
import 'vant/lib/vant-css/popup.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-popup': Popup
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -188,11 +152,6 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
点击以下按钮查看手机端效果：
|
||||
|
||||
<van-button @click="mobileShow = true">点击查看手机端效果</van-button>
|
||||
<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|
||||
@ -1,48 +1,15 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b progress {
|
||||
@e wrapper {
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-progress {
|
||||
&__wrapper {
|
||||
padding: 5px;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
## Progress 进度条
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Progress } from 'vant';
|
||||
import 'vant/lib/vant-css/progress.css';
|
||||
|
||||
Vue.component(Progress.name, Progress);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
|
||||
|
||||
```js
|
||||
import { Progress } from 'vant';
|
||||
import 'vant/lib/vant-css/progress.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-progress': Progress
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b quantity {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.demo-quantity {
|
||||
.van-quantity {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.curr-quantity {
|
||||
margin: 15px;
|
||||
}
|
||||
.curr-quantity {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -25,37 +23,6 @@ export default {
|
||||
|
||||
## Quantity 数量选择
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Quantity`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Quantity`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Quantity } from 'vant';
|
||||
import 'vant/lib/vant-css/quantity.css';
|
||||
|
||||
Vue.component(Quantity.name, Quantity);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Quantity`组件，这样只能在你注册的组件中使用`Quantity`：
|
||||
|
||||
```js
|
||||
import { Quantity } from 'vant';
|
||||
import 'vant/lib/vant-css/quantity.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-quantity': Quantity
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
|
||||
一套基于`Vue.js 2.0`的 Mobile 组件库
|
||||
|
||||
[查看业务组件库 Captain-UI](https://www.youzanyun.com/zanui/captain/component/quickstart)
|
||||
|
||||
### 安装
|
||||
|
||||
```shell
|
||||
@ -12,26 +10,39 @@ npm i vant -S
|
||||
|
||||
### 引入组件
|
||||
|
||||
#### 完整引入
|
||||
#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
|
||||
|
||||
```js
|
||||
// .babelrc or babel-loader option
|
||||
{
|
||||
"plugins": [
|
||||
["import", { "libraryName": "vant", "style": true }]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
接着你可以直接引入 vant 组件，等价于下方的按需引入组件
|
||||
|
||||
```js
|
||||
// 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
|
||||
import { Button } from 'vant';
|
||||
```
|
||||
|
||||
#### 按需引入组件
|
||||
|
||||
```jsx
|
||||
import { Button } from 'vant/lib/button';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
```
|
||||
|
||||
#### 导入所有组件
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import ZanUI from 'vant';
|
||||
import vant from 'vant';
|
||||
import 'vant/lib/vant-css/index.css';
|
||||
|
||||
Vue.use(ZanUI);
|
||||
```
|
||||
|
||||
#### 按需引入
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { Button, Cell } from 'vant';
|
||||
import 'vant/lib/vant-css/button.css';
|
||||
import 'vant/lib/vant-css/cell.css';
|
||||
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Cell.name, Cell);
|
||||
Vue.use(vant);
|
||||
```
|
||||
|
||||
### 自定义主题
|
||||
@ -42,7 +53,7 @@ Vue.component(Cell.name, Cell);
|
||||
|
||||
可以通过Github或npm来下载主题：
|
||||
|
||||
```shell
|
||||
```bash
|
||||
# npm
|
||||
npm i vant-css -D
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b radio {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
.demo-radio {
|
||||
.van-radios {
|
||||
padding: 0 20px;
|
||||
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.van-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,38 +25,6 @@ export default {
|
||||
|
||||
## Radio 单选框
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Radio, RadioGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/radio.css';
|
||||
|
||||
Vue.component(Radio.name, Radio);
|
||||
Vue.component(RadioGroup.name, RadioGroup);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
|
||||
|
||||
```js
|
||||
import { Radio, RadioGroup } from 'vant';
|
||||
import 'vant/lib/vant-css/radio.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-radio': Radio,
|
||||
'van-radio-group': RadioGroup
|
||||
}
|
||||
};
|
||||
```
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -16,37 +16,6 @@ export default {
|
||||
|
||||
## Search 搜索
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Search`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Search`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Search } from 'vant';
|
||||
import 'vant/lib/vant-css/search.css';
|
||||
|
||||
Vue.component(Search.name, Search);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Search`组件，这样只能在你注册的组件中使用`Search`：
|
||||
|
||||
```js
|
||||
import { Search } from 'vant';
|
||||
import 'vant/lib/vant-css/search.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-search': Search
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
.demo-steps {
|
||||
.steps-success {
|
||||
color: #06bf04;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
.van-button {
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -30,39 +28,6 @@ export default {
|
||||
|
||||
## Steps 步骤条
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Steps, Step } from 'vant';
|
||||
import 'vant/lib/vant-css/steps.css';
|
||||
|
||||
Vue.component(Steps.name, Steps);
|
||||
Vue.component(Step.name, Step);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
|
||||
|
||||
```js
|
||||
import { Steps, Step } from 'vant';
|
||||
import 'vant/lib/vant-css/steps.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-steps': Steps,
|
||||
'van-step': Step
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
.demo-swipe {
|
||||
.van-swipe {
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -37,39 +35,6 @@ export default {
|
||||
|
||||
## Swipe 轮播
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Swipe`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Swipe`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
import 'vant/lib/vant-css/swipe.css';
|
||||
|
||||
Vue.component(Swipe.name, Swipe);
|
||||
Vue.component(SwipeItem.name, SwipeItem);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Swipe`组件，这样只能在你注册的组件中使用`Swipe`：
|
||||
|
||||
```js
|
||||
import { Swipe, SwipeItem } from 'vant';
|
||||
import 'vant/lib/vant-css/swipe.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-swipe': Swipe,
|
||||
'van-swipe-item': SwipeItem
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b switch {
|
||||
.van-switch {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
@e text {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.demo-switch {
|
||||
.van-switch {
|
||||
float: left;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
line-height: 32px;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
@ -45,37 +43,6 @@ export default {
|
||||
|
||||
## Switch 开关
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Switch } from 'vant';
|
||||
import 'vant/lib/vant-css/switch.css';
|
||||
|
||||
Vue.component(Switch.name, Switch);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
|
||||
|
||||
```js
|
||||
import { Switch } from 'vant';
|
||||
import 'vant/lib/vant-css/switch.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-switch': Switch
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,26 +1,24 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
.demo-tab {
|
||||
.van-tab__pane {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
.van-tabs--card .van-tab__pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.custom-tabwrap .van-tab-active {
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .van-tabs-nav-bar {
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -51,39 +49,6 @@ export default {
|
||||
|
||||
## Tab 标签
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tab`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tab`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tab, Tabs } from 'vant';
|
||||
import 'vant/lib/vant-css/tab.css';
|
||||
|
||||
Vue.component(Tab.name, Tab);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tab`组件，这样只能在你注册的组件中使用`Tab`：
|
||||
|
||||
```js
|
||||
import { Tab, Tabs } from 'vant';
|
||||
import 'vant/lib/vant-css/tab.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-tab': Tab,
|
||||
'van-tabs': Tabs
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -10,37 +10,6 @@
|
||||
|
||||
## Tag 标记
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Tag } from 'vant';
|
||||
import 'vant/lib/vant-css/tag.css';
|
||||
|
||||
Vue.component(Tag.name, Tag);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
|
||||
|
||||
```js
|
||||
import { Tag } from 'vant';
|
||||
import 'vant/lib/vant-css/tag.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-tag': Tag
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b toast {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
.demo-toast {
|
||||
.van-button {
|
||||
margin: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -16,37 +16,6 @@ export default {
|
||||
|
||||
## Uploader 图片上传
|
||||
|
||||
### 使用指南
|
||||
|
||||
如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
|
||||
|
||||
#### 全局注册
|
||||
|
||||
你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Uploader } from 'vant';
|
||||
import 'vant/lib/vant-css/uploader.css';
|
||||
|
||||
Vue.component(Uploader.name, Uploader);
|
||||
```
|
||||
|
||||
#### 局部注册
|
||||
|
||||
如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
|
||||
|
||||
```js
|
||||
import { Uploader } from 'vant';
|
||||
import 'vant/lib/vant-css/uploader.css';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'van-uploader': Uploader
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
@ -66,28 +66,26 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b waterfall {
|
||||
.waterfall {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.waterfall-item {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
}
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
.van-loading {
|
||||
margin: 10px auto;
|
||||
}
|
||||
.demo-waterfall {
|
||||
.waterfall {
|
||||
max-height: 360px;
|
||||
overflow: scroll;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
.waterfall-item {
|
||||
line-height: 50px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
background: #fff;
|
||||
}
|
||||
.page-desc {
|
||||
padding: 5px 0;
|
||||
line-height: 1.4;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
.van-loading {
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<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,19 +0,0 @@
|
||||
import MobilePopup from './mobile-popup.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MobilePopup
|
||||
},
|
||||
|
||||
computed: {
|
||||
mobileUrl() {
|
||||
return '/zanui/vue/examples' + location.pathname.slice(10);
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
mobileShow: false
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -62,82 +62,79 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace mobile {
|
||||
@b nav-group {
|
||||
border-radius: 2px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
|
||||
<style lang="postcss">
|
||||
.mobile-nav-group {
|
||||
border-radius: 2px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
|
||||
|
||||
@e basetitle {
|
||||
padding-left: 20px;
|
||||
&__basetitle {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 56px;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
&--open {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@e title {
|
||||
font-size: 16px;
|
||||
a {
|
||||
color: #333;
|
||||
line-height: 56px;
|
||||
position: relative;
|
||||
display: block;
|
||||
user-select: none;
|
||||
padding-left: 20px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
@m open {
|
||||
color: #999;
|
||||
&:active {
|
||||
background: #ECECEC;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
display: block;
|
||||
user-select: none;
|
||||
padding-left: 20px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
&:active {
|
||||
background: #ECECEC;
|
||||
}
|
||||
|
||||
> p {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
.van-icon-arrow {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
top: 24px;
|
||||
right: 20px;
|
||||
> p {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
@e list-wrapper {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@m open {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@e list {
|
||||
transform: translateY(-50%);
|
||||
transition: transform .2s ease-out;
|
||||
|
||||
@m open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
.van-icon-arrow {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
top: 24px;
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__list-wrapper {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&--open {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
transform: translateY(-50%);
|
||||
transition: transform .2s ease-out;
|
||||
|
||||
&--open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<van-popup v-model="currentValue" :lock-on-scroll="true">
|
||||
<div class="mobile-popup">
|
||||
<iframe :src="url" class="mobile-popup-iframe"></iframe>
|
||||
</div>
|
||||
</van-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
url: String,
|
||||
value: {}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentValue(val) {
|
||||
this.$emit('input', val);
|
||||
},
|
||||
value(val) {
|
||||
console.log(val);
|
||||
this.currentValue = val;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.mobile-popup {
|
||||
width: 375px;
|
||||
height: 650px;
|
||||
background: url(https://b.yzcdn.cn/v2/image/wap/zanui-mobile-container.png) no-repeat;
|
||||
}
|
||||
|
||||
.mobile-popup-iframe {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-left: 1px solid #e5e5e5;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
position: relative;
|
||||
top: 64px;
|
||||
height: 586px;
|
||||
}
|
||||
</style>
|
||||
@ -30,6 +30,10 @@ module.exports = {
|
||||
"path": "/changelog",
|
||||
"title": "更新日志",
|
||||
noExample: true
|
||||
},
|
||||
{
|
||||
"title": "业务组件",
|
||||
"link": "/zanui/captain/component/quickstart"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -2,17 +2,8 @@ import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './ExamplesDocsApp';
|
||||
import routes from './router.config';
|
||||
import ZanUI from 'src/index.js';
|
||||
import ZanDoc from 'zan-doc';
|
||||
import packageJson from '../../package.json';
|
||||
import DemoBlock from './components/demo-block';
|
||||
|
||||
const global = {
|
||||
version: packageJson.version
|
||||
};
|
||||
window._global = global;
|
||||
|
||||
import '../assets/docs.css';
|
||||
import 'packages/vant-css/src/index.css';
|
||||
|
||||
function isMobile() {
|
||||
@ -22,11 +13,7 @@ function isMobile() {
|
||||
}
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.use(ZanDoc);
|
||||
Vue.use(ZanUI.Lazyload, {
|
||||
lazyComponent: true
|
||||
});
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
|
||||
const routesConfig = routes();
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
const navs = require('./doc.config')['zh-CN'].nav;
|
||||
import componentDocs from '../examples-dist/entry-docs';
|
||||
import componentDemos from '../examples-dist/entry-demos';
|
||||
|
||||
const registerRoute = (isExample) => {
|
||||
let route = [];
|
||||
@ -9,31 +11,26 @@ const registerRoute = (isExample) => {
|
||||
|
||||
if (nav.groups) {
|
||||
nav.groups.forEach(group => {
|
||||
group.list.forEach(nav => {
|
||||
addRoute(nav);
|
||||
});
|
||||
group.list.forEach(addRoute);
|
||||
});
|
||||
} else if (nav.children) {
|
||||
nav.children.forEach(nav => {
|
||||
addRoute(nav);
|
||||
});
|
||||
nav.children.forEach(addRoute);
|
||||
} else {
|
||||
addRoute(nav);
|
||||
}
|
||||
});
|
||||
|
||||
function addRoute(page) {
|
||||
const component = isExample
|
||||
? require(`../examples-dist${page.path}.vue`)
|
||||
: require(`../examples-docs${page.path}.md`);
|
||||
route.push({
|
||||
path: '/component' + page.path,
|
||||
component: component.default || component
|
||||
});
|
||||
const { path } = page;
|
||||
if (path) {
|
||||
const name = path.replace('/', '');
|
||||
route.push({
|
||||
path: '/component' + path,
|
||||
component: isExample ? componentDemos[name] : componentDocs[name]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(route);
|
||||
|
||||
return route;
|
||||
};
|
||||
|
||||
|
||||
130
package.json
130
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant",
|
||||
"version": "0.6.6",
|
||||
"version": "0.7.9",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/vant.js",
|
||||
"style": "lib/vant-css/index.css",
|
||||
@ -12,17 +12,16 @@
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "yarn || npm i",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.dev.js --content-base ./",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js --content-base ./",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js && cp-cli packages/vant-css/lib lib/vant-css",
|
||||
"build:components": "webpack --progress --hide-modules --config build/webpack.components.js",
|
||||
"build:vant": "webpack --progress --hide-modules --config build/webpack.build.js && webpack --progress --hide-modules --config build/webpack.build.min.js",
|
||||
"build:example": "node build/genExamples.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js --presets=es2015",
|
||||
"build:components": "cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.components.js --color",
|
||||
"build:vant-css": "gulp build --gulpfile packages/vant-css/gulpfile.js --color && cp -R packages/vant-css/lib/ lib/vant-css",
|
||||
"build:vant": "cross-env NODE_ENV=production webpack --progress --hide-modules --color --config build/webpack.build.js && cross-env NODE_ENV=production webpack -p --progress --hide-modules --color --config build/webpack.build.js",
|
||||
"deploy": "npm run deploy:docs && npm run deploy:cdn && gh-pages -d docs/dist --remote youzan && rimraf docs/dist",
|
||||
"deploy:cdn": "superman cdn /zanui/vue docs/dist/*.js docs/dist/*.css",
|
||||
"deploy:docs": "rimraf docs/dist && npm run build:example && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.prod.js",
|
||||
"dist": "npm run clean && npm run build:file && npm run lint && npm run build:vant && npm run build:components && npm run build:utils && npm run build:vant-css",
|
||||
"deploy:docs": "rimraf docs/dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config build/webpack.config.prod.js",
|
||||
"dist": "node build/bin/build-lib.js",
|
||||
"clean": "rimraf lib && rimraf packages/*/lib",
|
||||
"lint": "felint lint src/**/*.js packages/**/*.{js,vue} build/**/*.js",
|
||||
"test": "karma start test/unit/karma.conf.js --single-run",
|
||||
@ -43,98 +42,79 @@
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"raf.js": "0.0.4",
|
||||
"vue-lazyload": "^1.0.3"
|
||||
"vue-lazyload": "^1.0.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "2.3.4"
|
||||
"vue": "2.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.5",
|
||||
"avoriaz": "^2.0.0",
|
||||
"autoprefixer": "^7.1.2",
|
||||
"avoriaz": "2.0.0",
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.17.0",
|
||||
"babel-eslint": "^6.1.2",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.2",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-module-resolver": "^2.2.0",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-module-resolver": "^2.7.1",
|
||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.3.0",
|
||||
"babel-plugin-transform-vue-jsx": "^3.5.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-runtime": "^6.11.0",
|
||||
"chai": "^3.5.0",
|
||||
"chalk": "^1.1.3",
|
||||
"babel-runtime": "^6.25.0",
|
||||
"chai": "^4.1.1",
|
||||
"cheerio": "^0.22.0",
|
||||
"codecov": "^2.1.0",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"cp-cli": "^1.0.2",
|
||||
"cross-env": "^3.1.3",
|
||||
"css-loader": "^0.24.0",
|
||||
"decamelize": "^1.2.0",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-vue": "^2.0.1",
|
||||
"extract-text-webpack-plugin": "^2.0.0-beta.5",
|
||||
"codecov": "^2.2.0",
|
||||
"cross-env": "^5.0.5",
|
||||
"css-loader": "^0.28.4",
|
||||
"eslint-plugin-vue": "^2.1.0",
|
||||
"extract-text-webpack-plugin": "2.1.2",
|
||||
"felint": "^0.5.0-alpha.3",
|
||||
"file-loader": "^0.9.0",
|
||||
"file-save": "^0.2.0",
|
||||
"friendly-errors-webpack-plugin": "^1.6.1",
|
||||
"gh-pages": "^0.12.0",
|
||||
"gh-pages": "^1.0.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-util": "^3.0.8",
|
||||
"highlight.js": "^9.8.0",
|
||||
"html-loader": "^0.4.3",
|
||||
"html-webpack-plugin": "^2.22.0",
|
||||
"inject-loader": "^3.0.0-beta2",
|
||||
"highlight.js": "^9.12.0",
|
||||
"html-webpack-plugin": "^2.29.0",
|
||||
"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": "^1.7.0",
|
||||
"karma-chrome-launcher": "^2.2.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-mocha": "^1.3.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"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",
|
||||
"karma-spec-reporter": "^0.0.31",
|
||||
"karma-webpack": "^2.0.4",
|
||||
"lerna": "^2.0.0",
|
||||
"markdown-it": "^8.3.2",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mocha": "^3.2.0",
|
||||
"optimize-css-assets-webpack-plugin": "^1.3.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-easy-import": "^2.0.0",
|
||||
"postcss-loader": "^1.3.3",
|
||||
"precss": "^1.4.0",
|
||||
"prismjs": "^1.5.1",
|
||||
"progress-bar-webpack-plugin": "^1.9.3",
|
||||
"mocha": "^3.4.2",
|
||||
"optimize-css-assets-webpack-plugin": "^3.0.0",
|
||||
"postcss": "^6.0.8",
|
||||
"postcss-easy-import": "^2.1.0",
|
||||
"postcss-loader": "^2.0.6",
|
||||
"precss": "^2.0.0",
|
||||
"progress-bar-webpack-plugin": "^1.10.0",
|
||||
"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",
|
||||
"uppercamelcase": "^1.1.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue": "2.3.4",
|
||||
"run-sequence": "^2.1.0",
|
||||
"sinon": "^2.4.1",
|
||||
"sinon-chai": "^2.12.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"uppercamelcase": "^3.0.0",
|
||||
"url-loader": "^0.5.9",
|
||||
"vue": "^2.4.2",
|
||||
"vue-hot-reload-api": "^2.1.0",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^12.0.0",
|
||||
"vue-markdown-loader": "^1.0.0",
|
||||
"vue-router": "^2.5.0",
|
||||
"vue-loader": "^13.0.4",
|
||||
"vue-markdown-loader": "^2.0.0",
|
||||
"vue-router": "^2.7.0",
|
||||
"vue-style-loader": "^3.0.0",
|
||||
"vue-template-compiler": "2.3.4",
|
||||
"vue-template-es2015-compiler": "^1.4.2",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-server": "^1.16.3",
|
||||
"webpack-merge": "^2.0.0",
|
||||
"webpack-node-externals": "^1.5.4",
|
||||
"webpack-vendor-chunk-plugin": "^1.0.0",
|
||||
"zan-doc": "^0.1.0"
|
||||
"vue-template-compiler": "^2.4.2",
|
||||
"vue-template-es2015-compiler": "^1.5.3",
|
||||
"webpack": "^3.5.1",
|
||||
"webpack-dev-server": "^2.7.1",
|
||||
"webpack-merge": "^4.1.0",
|
||||
"zan-doc": "0.1.12"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,2 +1,3 @@
|
||||
import CellSwipe from './components/CellSwipe.vue'
|
||||
import CellSwipe from './src/cell-swipe';
|
||||
|
||||
export default CellSwipe;
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -5,6 +5,7 @@
|
||||
:visible-item-count="visibleItemCount"
|
||||
@change="handlePickerChange"
|
||||
@confirm="handlePickerConfirm"
|
||||
@cancel="$emit('cancel')"
|
||||
showToolbar>
|
||||
</van-picker>
|
||||
</template>
|
||||
@ -85,7 +86,6 @@ export default {
|
||||
if (!isEqual) this.innerValue = val;
|
||||
},
|
||||
innerValue(val) {
|
||||
console.log(val + '!!!');
|
||||
this.updateColumnValue(val);
|
||||
this.$emit('input', val);
|
||||
}
|
||||
@ -217,12 +217,11 @@ export default {
|
||||
isShortMonth(month) {
|
||||
return [4, 6, 9, 11].indexOf(month) > -1;
|
||||
},
|
||||
handlePickerConfirm(values) {
|
||||
handlePickerConfirm() {
|
||||
this.$emit('confirm', this.innerValue);
|
||||
},
|
||||
handlePickerChange(picker) {
|
||||
const values = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue);
|
||||
console.log(values);
|
||||
let value;
|
||||
|
||||
if (this.type === 'time') {
|
||||
@ -243,7 +242,7 @@ export default {
|
||||
}
|
||||
value = this.correctValue(value);
|
||||
this.innerValue = value;
|
||||
console.log(value, this.innerValue);
|
||||
this.$emit('change', picker);
|
||||
},
|
||||
updateColumnValue(value) {
|
||||
let values = [];
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -69,12 +69,6 @@ extend(Scroll.prototype, {
|
||||
var leftOffset = offset - wrapWidth;
|
||||
var rightOffset = offset + wrapWidth;
|
||||
|
||||
page = this.getCurrentPage();
|
||||
if (page) {
|
||||
page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
|
||||
page.style['display'] = 'block';
|
||||
}
|
||||
|
||||
leftPage = this.pages[this.mapLoopPage(currentOffsetPage - 1)];
|
||||
if (leftPage) {
|
||||
if (Math.abs(leftOffset) <= wrapWidth) {
|
||||
@ -96,6 +90,12 @@ extend(Scroll.prototype, {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
page = this.getCurrentPage();
|
||||
if (page) {
|
||||
page.style['-webkit-transform'] = 'translate3d(' + offset + 'px, 0, 0)';
|
||||
page.style['display'] = 'block';
|
||||
}
|
||||
},
|
||||
|
||||
movePage: function(dist, isEnd) {
|
||||
|
||||
@ -10,6 +10,13 @@ export default {
|
||||
|
||||
beforeCreate() {
|
||||
this.$parent.swipes.push(this);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
const index = this.$parent.swipes.indexOf(this)
|
||||
if (index > -1) {
|
||||
this.$parent.swipes.splice(index, 1)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -61,10 +61,28 @@ export default {
|
||||
}).on('autoPlay', function(dist, isEnd) {
|
||||
scroll.movePage(dist.x, isEnd);
|
||||
});
|
||||
this.dummy = dummy
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.scroll.update();
|
||||
watch: {
|
||||
swipes(value) {
|
||||
if (this.autoPlay && value.length > 1) {
|
||||
this.dummy.initMove()
|
||||
} else {
|
||||
this.dummy.clearMove()
|
||||
}
|
||||
this.scroll.update();
|
||||
return value
|
||||
},
|
||||
|
||||
autoPlay(value) {
|
||||
if (value && this.swipes.length > 1) {
|
||||
this.dummy.initMove()
|
||||
} else {
|
||||
this.dummy.clearMove()
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -92,7 +92,7 @@
|
||||
* `type`为`line`时，tab下方的横线的样式
|
||||
*/
|
||||
navBarStyle() {
|
||||
if (!this.isReady || this.type !== 'line') return;
|
||||
if (!this.isReady || this.type !== 'line' || !this.$refs.tabkey) return;
|
||||
|
||||
const tabKey = this.curActive;
|
||||
const elem = this.$refs.tabkey[tabKey];
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,26 +0,0 @@
|
||||
# @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)
|
||||
@ -1,7 +1,8 @@
|
||||
import Vue from 'vue';
|
||||
import merge from 'src/utils/merge';
|
||||
import ToastComponent from './toast.vue';
|
||||
|
||||
const ToastConstructor = Vue.extend(require('./toast.vue'));
|
||||
const ToastConstructor = Vue.extend(ToastComponent);
|
||||
let instance;
|
||||
|
||||
const getInstance = () => {
|
||||
@ -24,6 +25,7 @@ var Toast = (options = {}) => {
|
||||
const duration = options.duration || 3000;
|
||||
|
||||
const instance = getInstance();
|
||||
|
||||
instance.closed = false;
|
||||
clearTimeout(instance.timer);
|
||||
instance.type = options.type ? options.type : 'text';
|
||||
|
||||
@ -1,24 +1,18 @@
|
||||
<template>
|
||||
<transition name="van-toast-fade">
|
||||
<div class="van-toast-wrapper" v-show="visible">
|
||||
<div class="van-toast" :class="['van-toast--' + displayStyle]">
|
||||
<div :class="['van-toast', 'van-toast--' + displayStyle]">
|
||||
<!-- 只显示文字 -->
|
||||
<template v-if="displayStyle === 'text'" >
|
||||
<div class="van-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<div v-if="displayStyle === 'text'" class="van-toast__text">{{ message }}</div>
|
||||
<!-- 加载中 -->
|
||||
<template v-if="displayStyle === 'loading'">
|
||||
<van-loading v-if="type === 'loading'" type="gradient-circle" color="white"></van-loading>
|
||||
</template>
|
||||
<van-loading v-if="displayStyle === 'loading' && type === 'loading'" type="gradient-circle" color="white"></van-loading>
|
||||
<!-- 图案加文字 -->
|
||||
<template v-if="displayStyle === 'default'">
|
||||
<van-icon class="van-toast__icon" :name="type"></van-icon>
|
||||
<div class="van-toast__text">{{message}}</div>
|
||||
<div class="van-toast__text">{{ message }}</div>
|
||||
</template>
|
||||
<!-- 传入html -->
|
||||
<template v-if="displayStyle === 'html'">
|
||||
<div class="van-toast__text" v-html="message"></div>
|
||||
</template>
|
||||
<div v-if="displayStyle === 'html'" class="van-toast__text" v-html="message"></div>
|
||||
</div>
|
||||
<div class="van-toast__overlay" v-if="forbidClick"></div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
@ -1,11 +1,10 @@
|
||||
var gulp = require('gulp');
|
||||
var postcss = require('gulp-postcss');
|
||||
var cssmin = require('gulp-cssmin');
|
||||
var postcssPlugin = require('../../build/utils/postcss_pipe')();
|
||||
|
||||
gulp.task('compile', function() {
|
||||
return gulp.src('./src/*.css')
|
||||
.pipe(postcss(postcssPlugin))
|
||||
.pipe(postcss())
|
||||
.pipe(cssmin())
|
||||
.pipe(gulp.dest('./lib'));
|
||||
});
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vant-css",
|
||||
"version": "0.6.6",
|
||||
"version": "0.7.9",
|
||||
"description": "vant css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
@ -14,13 +14,12 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.7.5",
|
||||
"autoprefixer": "^7.1.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-cssmin": "^0.1.7",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"postcss-easy-import": "^2.0.0",
|
||||
"precss": "^1.4.0",
|
||||
"saladcss-bem": "^0.0.1"
|
||||
"gulp-cssmin": "^0.2.0",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
"postcss-easy-import": "^2.1.0",
|
||||
"precss": "^2.0.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
||||
|
||||
@ -341,8 +341,58 @@ module.exports = {
|
||||
},
|
||||
{
|
||||
keywords: ['after', 'sale'],
|
||||
src: '售后记录.svg',
|
||||
src: '售后.svg',
|
||||
css: 'after-sale'
|
||||
},
|
||||
{
|
||||
keywords: ['edit', 'data'],
|
||||
src: '编辑资料.svg',
|
||||
css: 'edit-data'
|
||||
},
|
||||
{
|
||||
keywords: ['question'],
|
||||
src: '答疑.svg',
|
||||
css: 'question'
|
||||
},
|
||||
{
|
||||
keywords: ['delete'],
|
||||
src: '删除.svg',
|
||||
css: 'delete'
|
||||
},
|
||||
{
|
||||
keywords: ['records'],
|
||||
src: '记录.svg',
|
||||
css: 'records'
|
||||
},
|
||||
{
|
||||
keywords: ['description'],
|
||||
src: '描述.svg',
|
||||
css: 'description'
|
||||
},
|
||||
{
|
||||
keywords: ['card'],
|
||||
src: '卡.svg',
|
||||
css: 'card'
|
||||
},
|
||||
{
|
||||
keywords: ['gift', 'card'],
|
||||
src: '礼卡.svg',
|
||||
css: 'gift-card'
|
||||
},
|
||||
{
|
||||
keywords: ['coupon'],
|
||||
src: '优惠券卡.svg',
|
||||
css: 'coupon'
|
||||
},
|
||||
{
|
||||
keywords: ['clock'],
|
||||
src: '时钟.svg',
|
||||
css: 'clock'
|
||||
},
|
||||
{
|
||||
keywords: ['gold-coin'],
|
||||
src: '金币.svg',
|
||||
css: 'gold-coin'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -2,74 +2,72 @@
|
||||
@import './mixins/border_retina.css';
|
||||
@import './popup.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b actionsheet {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
background-color: #e0e0e0;
|
||||
.van-actionsheet {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
backface-visibility: hidden;
|
||||
transition: .2s ease-out;
|
||||
background-color: #e0e0e0;
|
||||
|
||||
@m withtitle {
|
||||
background-color: $c-white;
|
||||
&--withtitle {
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
&__item {
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
background-color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
&__subname {
|
||||
color: $c-gray-darker;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__loading {
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
line-height: 50px;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
&__header {
|
||||
line-height: 44px;
|
||||
color: $c-black;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
@e item {
|
||||
line-height: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
background-color: $c-white;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
@e subname {
|
||||
color: $c-gray-darker;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@e loading {
|
||||
margin: 0 auto;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@e button {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
line-height: 50px;
|
||||
color: $c-black;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: $c-white;
|
||||
}
|
||||
|
||||
@e header {
|
||||
line-height: 44px;
|
||||
color: $c-black;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top, bottom);
|
||||
}
|
||||
|
||||
.van-icon-close {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
}
|
||||
.van-icon-close {
|
||||
position: absolute;
|
||||
font-size: 22px;
|
||||
line-height: 22px;
|
||||
top: 11px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,77 +1,77 @@
|
||||
@import './common/var.css';
|
||||
@import './mixins/border_retina.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b badge-group {
|
||||
.van-badge {
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.4;
|
||||
background-color: $c-background;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
|
||||
&-group {
|
||||
position: relative;
|
||||
width: 85px;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
}
|
||||
}
|
||||
|
||||
@b badge {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 1.4;
|
||||
background-color: $c-background;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
word-break: break-all;
|
||||
|
||||
@m select {
|
||||
font-weight: bold;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
.van-badge__active {
|
||||
display: block;
|
||||
}
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
}
|
||||
&--select {
|
||||
font-weight: bold;
|
||||
color: $c-black;
|
||||
background-color: $c-white;
|
||||
.van-badge__active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@e active {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: #FF4444;
|
||||
}
|
||||
|
||||
@e info {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
transform:scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #FF4444;
|
||||
color: $c-white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (right);
|
||||
@mixin border-retina (left);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
&__active {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background-color: #FF4444;
|
||||
}
|
||||
|
||||
&__info {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 10px;
|
||||
transform:scale(0.8);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding: 0 6px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border-radius: 9px;
|
||||
background-color: #FF4444;
|
||||
color: $c-white;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
5
packages/vant-css/src/base.css
Normal file
5
packages/vant-css/src/base.css
Normal file
@ -0,0 +1,5 @@
|
||||
/**
|
||||
* 基本样式入口
|
||||
*/
|
||||
|
||||
@import './reset.css';
|
||||
@ -1,154 +1,152 @@
|
||||
@import './common/var.css';
|
||||
@import './loading.css';
|
||||
|
||||
@component-namespace van {
|
||||
@b button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
.van-button {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not(.is-disabled):active::after {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
&__icon-loading {
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
line-height: 43px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&--default {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #cacaca;
|
||||
background-color: $c-gray-light;
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
border: 1px solid $button-primary-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #00AA00;
|
||||
background-color: #00AA00;
|
||||
color: #66CC66;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: $button-danger-color;
|
||||
background-color: $button-danger-background-color;
|
||||
border: 1px solid $button-danger-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #D43333;
|
||||
background-color: #D43333;
|
||||
}
|
||||
}
|
||||
|
||||
&--large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
appearance: none;
|
||||
outline: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
&--normal {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
&--mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
|
||||
& + .van-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
&--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--loading {
|
||||
.van-button__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--bottom-action {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: $bottom-action-button-default-background-color;
|
||||
color: $bottom-action-button-default-color;
|
||||
font-size: 16px;
|
||||
|
||||
&:active {
|
||||
border-color: #DD6F44;
|
||||
background-color: #DD6F44;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:not(.is-disabled):active::after {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
@e icon-loading {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@m default {
|
||||
color: $button-default-color;
|
||||
background-color: $button-default-background-color;
|
||||
border: 1px solid $button-default-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #cacaca;
|
||||
background-color: $c-gray-light;
|
||||
color: $c-gray-dark;
|
||||
}
|
||||
}
|
||||
|
||||
@m primary {
|
||||
color: $button-primary-color;
|
||||
background-color: $button-primary-background-color;
|
||||
border: 1px solid $button-primary-border-color;
|
||||
|
||||
&:active {
|
||||
border-color: #00AA00;
|
||||
background-color: #00AA00;
|
||||
color: #66CC66;
|
||||
}
|
||||
}
|
||||
|
||||
@m danger {
|
||||
color: $button-danger-color;
|
||||
background-color: $button-danger-background-color;
|
||||
border: 1px solid $button-danger-border-color;
|
||||
&.van-button--primary {
|
||||
background-color: $bottom-action-button-primary-background-color;
|
||||
color: $bottom-action-button-primary-color;
|
||||
|
||||
&:active {
|
||||
border-color: #D43333;
|
||||
background-color: #D43333;
|
||||
}
|
||||
}
|
||||
|
||||
@m large {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@m normal {
|
||||
padding: 0 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@m small {
|
||||
min-width: 60px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*
|
||||
mini图标默认宽度50px，文字不能超过4个
|
||||
*/
|
||||
@m mini {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
font-size: 10px;
|
||||
|
||||
& + .van-button--mini {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@m disabled {
|
||||
color: $button-disabled-color;
|
||||
background-color: $button-disabled-background-color;
|
||||
border: 1px solid $button-disabled-border-color;
|
||||
}
|
||||
|
||||
@m block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@m loading {
|
||||
.van-button__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@m bottom-action {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background-color: $bottom-action-button-default-background-color;
|
||||
color: $bottom-action-button-default-color;
|
||||
font-size: 16px;
|
||||
|
||||
&:active {
|
||||
border-color: #DD6F44;
|
||||
background-color: #DD6F44;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.van-button--primary {
|
||||
background-color: $bottom-action-button-primary-background-color;
|
||||
color: $bottom-action-button-primary-color;
|
||||
|
||||
&:active {
|
||||
border-color: #D43333;
|
||||
background-color: #D43333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,27 +1,30 @@
|
||||
|
||||
.van-cell-swipe .van-cell-wrapper, .van-cell-swipe .van-cell-left, .van-cell-swipe .van-cell-right {
|
||||
-webkit-transition: -webkit-transform 150ms ease-in-out;
|
||||
transition: -webkit-transform 150ms ease-in-out;
|
||||
transition: transform 150ms ease-in-out;
|
||||
transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
|
||||
}
|
||||
|
||||
.van-cell-swipe{
|
||||
.van-cell {
|
||||
&-swipe {
|
||||
position: relative;
|
||||
min-height: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.van-cell-right{
|
||||
|
||||
.van-cell-wrapper,
|
||||
.van-cell-left,
|
||||
.van-cell-right {
|
||||
transition: transform 150ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&-left,
|
||||
&-right {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transform: translate3d(100%,0,0);
|
||||
}
|
||||
.van-cell-left {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-left {
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate3d(-100%,0,0);
|
||||
}
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
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