mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue
This commit is contained in:
taiyong
commit
c7a9cf0521
2
.gitignore
vendored
2
.gitignore
vendored
@ -9,5 +9,5 @@ lib/*
|
||||
!lib/style.css
|
||||
node_modules
|
||||
example/dist
|
||||
dist
|
||||
./dist
|
||||
test/unit/coverage
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
/**
|
||||
* Created by tsxuehu on 17/1/4.
|
||||
*/
|
||||
var config = {
|
||||
|
||||
"bem": {
|
||||
"shortcuts": {"component": "b", "modifier": "m", "descendent": "e"},
|
||||
"separators": {"descendent": "__", "modifier": "--"}
|
||||
}/*,
|
||||
"autoprefixer": {"browsers": ["ie > 8", "last 2 versions"]},
|
||||
"rem": {"browsers": ["ie > 8", "last 2 versions"]}*/
|
||||
'bem': {
|
||||
'shortcuts': {'component': 'b', 'modifier': 'm', 'descendent': 'e'},
|
||||
'separators': {'descendent': '__', 'modifier': '--'}
|
||||
}
|
||||
};
|
||||
// https://github.com/trysound/postcss-easy-import
|
||||
var partialImport = require("postcss-easy-import");
|
||||
var partialImport = require("postcss-easy-import")();
|
||||
|
||||
// 这不是bem，虽然名字叫bem，其实它是suit
|
||||
// https://github.com/saladcss/saladcss-bem
|
||||
@ -20,47 +14,15 @@ var bem = require("saladcss-bem")(config.bem);
|
||||
// https://github.com/jonathantneal/precss
|
||||
var precss = require("precss")();
|
||||
|
||||
// https://github.com/adam-h/postcss-sass-color-functions
|
||||
var sassColor = require("postcss-sass-color-functions")();
|
||||
|
||||
// eleme的组件---
|
||||
// https://npmjs.com/package/postcss-css-reset
|
||||
// http://elemefe.github.io/postcss-salad/
|
||||
var reset = require("postcss-css-reset")();
|
||||
|
||||
// eleme的组件---
|
||||
// https://npmjs.com/package/postcss-utils
|
||||
// http://elemefe.github.io/postcss-salad/
|
||||
var utils = require("postcss-utils")();
|
||||
|
||||
// https://github.com/postcss/postcss-calc
|
||||
var calc = require("postcss-calc")();
|
||||
|
||||
// https://github.com/maximkoretskiy/postcss-initial
|
||||
var initial = require("postcss-initial")();
|
||||
|
||||
// https://github.com/trysound/postcss-inline-svg
|
||||
var inlineSvg = require("postcss-inline-svg")();
|
||||
|
||||
// https://github.com/jonathantneal/postcss-short
|
||||
var short = require("postcss-short")();
|
||||
|
||||
// eleme的组件---
|
||||
// https://github.com/baiyaaaaa/postcss-shape
|
||||
// http://elemefe.github.io/postcss-salad/
|
||||
var shape = require("postcss-shape")();
|
||||
|
||||
// https://github.com/robwierzbowski/node-pixrem
|
||||
var rem = require("pixrem")();
|
||||
|
||||
// https://github.com/postcss/autoprefixer
|
||||
var autoprefixer = require("autoprefixer")();
|
||||
|
||||
// https://github.com/jo-asakura/postcss-neat
|
||||
var neat = require("postcss-neat")();
|
||||
|
||||
module.exports = function (webpack) {
|
||||
// 顺序很重要
|
||||
return [partialImport({ addDependencyTo: webpack }), bem, precss, sassColor, reset,
|
||||
utils, calc, initial, inlineSvg, short, shape, rem, autoprefixer, neat];
|
||||
return [
|
||||
partialImport,
|
||||
bem,
|
||||
precss,
|
||||
autoprefixer
|
||||
];
|
||||
};
|
||||
|
||||
@ -28,8 +28,8 @@ module.exports = {
|
||||
'zanui-examples': './docs/examples.js'
|
||||
},
|
||||
output: {
|
||||
path: './docs/build/',
|
||||
publicPath: 'docs/build/',
|
||||
path: './docs/dist/',
|
||||
publicPath: '/vue/docs/dist/',
|
||||
filename: '[name].js'
|
||||
},
|
||||
resolve: {
|
||||
@ -72,12 +72,67 @@ module.exports = {
|
||||
}
|
||||
]
|
||||
},
|
||||
devtool: 'source-map'
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
postcss: getPoastcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
eslint: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
},
|
||||
vue: {
|
||||
autoprefixer: false,
|
||||
postcss: getPoastcssPlugin
|
||||
},
|
||||
vueMarkdown: {
|
||||
use: [
|
||||
[require('markdown-it-anchor'), {
|
||||
level: 2,
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
|
||||
return `<demo-block class="demo-box" description="${description}">
|
||||
<div class="examples" slot="examples">${html}</div>
|
||||
<div class="highlight" slot="highlight">`;
|
||||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
MarkdownIt.renderer.rules.table_open = function() {
|
||||
return '<table class="table">';
|
||||
};
|
||||
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
|
||||
return source;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
delete module.exports.devtool;
|
||||
module.exports.plugins = [
|
||||
module.exports.plugins = module.exports.plugins.concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
|
||||
@ -92,114 +147,5 @@ if (process.env.NODE_ENV === 'production') {
|
||||
},
|
||||
sourceMap: false
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
postcss: getPoastcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
eslint: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
},
|
||||
vue: {
|
||||
autoprefixer: false,
|
||||
postcss: getPoastcssPlugin
|
||||
},
|
||||
vueMarkdown: {
|
||||
use: [
|
||||
[require('markdown-it-anchor'), {
|
||||
level: 2,
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
|
||||
return `<demo-block class="demo-box">
|
||||
<div class="examples" slot="examples">${html}</div>
|
||||
<div class="highlight" slot="highlight">`;
|
||||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
MarkdownIt.renderer.rules.table_open = function() {
|
||||
return '<table class="table">';
|
||||
};
|
||||
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
|
||||
return source;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
} else {
|
||||
module.exports.plugins = [
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
options: {
|
||||
postcss: getPoastcssPlugin,
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime', 'transform-vue-jsx']
|
||||
},
|
||||
eslint: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
},
|
||||
vue: {
|
||||
autoprefixer: false,
|
||||
postcss: getPoastcssPlugin
|
||||
},
|
||||
vueMarkdown: {
|
||||
use: [
|
||||
[require('markdown-it-anchor'), {
|
||||
level: 2,
|
||||
slugify: slugify,
|
||||
permalink: true,
|
||||
permalinkBefore: true
|
||||
}],
|
||||
[require('markdown-it-container'), 'demo', {
|
||||
validate: function(params) {
|
||||
return params.trim().match(/^demo\s*(.*)$/);
|
||||
},
|
||||
|
||||
render: function(tokens, idx) {
|
||||
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
var description = (m && m.length > 1) ? m[1] : '';
|
||||
var content = tokens[idx + 1].content;
|
||||
var html = convert(striptags.strip(content, ['script', 'style']));
|
||||
|
||||
return `<demo-block class="demo-box">
|
||||
<div class="examples" slot="examples">${html}</div>
|
||||
<div class="highlight" slot="highlight">`;
|
||||
}
|
||||
return '</div></demo-block>\n';
|
||||
}
|
||||
}]
|
||||
],
|
||||
preprocess: function(MarkdownIt, source) {
|
||||
MarkdownIt.renderer.rules.table_open = function() {
|
||||
return '<table class="table">';
|
||||
};
|
||||
MarkdownIt.renderer.rules.fence = wrap(MarkdownIt.renderer.rules.fence);
|
||||
return source;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
};
|
||||
]);
|
||||
}
|
||||
|
||||
@ -1,8 +1,19 @@
|
||||
<template>
|
||||
<div class="page-container clearfix">
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
<div class="app">
|
||||
<div class="page-header">
|
||||
header
|
||||
</div>
|
||||
<div class="main-content">
|
||||
<div class="page-container clearfix">
|
||||
<side-nav :data="navConfig['zh-CN']" base="/component"></side-nav>
|
||||
<div class="page-content">
|
||||
<router-view></router-view>
|
||||
<footer-nav></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
footer
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -22,93 +33,4 @@ export default {
|
||||
|
||||
<style lang="css">
|
||||
@import './assets/docs.css';
|
||||
|
||||
.page-container {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #1f2d3d;
|
||||
margin: 20px 0;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
section > h3 {
|
||||
font-size: 22px;
|
||||
margin: 23px 0;
|
||||
}
|
||||
|
||||
h2, h3, h4, h5 {
|
||||
font-weight: normal;
|
||||
color: #1f2f3d;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
margin-left: -20px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
height: inherit;
|
||||
margin-left: 320px;
|
||||
padding: 0 20px;
|
||||
|
||||
section > p {
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
p > code {
|
||||
background-color: #eee;
|
||||
padding: 2px 4px;
|
||||
color: #26a2ff;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-page {
|
||||
width: 100%;
|
||||
border: 5px solid #f5f5f5;
|
||||
height: 580px;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #5e6d82;
|
||||
font-size: 14px;
|
||||
margin-bottom: 45px;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
border-top: 1px solid #eaeefb;
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
background-color: #eff2f7;
|
||||
padding: 10px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #eaeefb;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,16 +18,11 @@ time, mark, audio, video {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100%;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -42,7 +37,7 @@ button, input, select, textarea {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
ul {
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@ -71,3 +66,154 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
height: 60px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 40px 15px;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
box-sizing: border-box;
|
||||
margin-left: 220px;
|
||||
padding: 0 40px;
|
||||
display: table-cell;
|
||||
|
||||
section {
|
||||
> h1,
|
||||
> h2,
|
||||
> h3,
|
||||
> h4,
|
||||
> h5,
|
||||
> h6 {
|
||||
color: #333;
|
||||
line-height: 1.5;
|
||||
margin: 20px 0;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover a {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
a {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
height: 150px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
17
docs/build/0.js
vendored
17
docs/build/0.js
vendored
File diff suppressed because one or more lines are too long
2
docs/build/1.js
vendored
2
docs/build/1.js
vendored
@ -1 +1 @@
|
||||
webpackJsonp([1],{259:function(e,t,n){n(490);var i=n(0)(n(273),n(431),null,null);e.exports=i.exports},273:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(30),a=i(o),s=n(372),r=i(s);t.default={data:function(){return{highlights:[],navState:[],data:a.default["zh-CN"],base:"/component"}},components:{MobileNav:r.default}}},275:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{group:{type:Object,default:function(){return[]}},base:String},data:function(){return{isOpen:!1}}}},325:function(e,t,n){t=e.exports=n(18)(),t.push([e.i,".side-nav{width:100%;box-sizing:border-box;padding:90px 15px 20px;position:relative;z-index:1}.side-nav .zanui-desc,.side-nav .zanui-title{text-align:center;font-weight:400}.side-nav .zanui-title{font-size:26px;color:#333}.side-nav .zanui-desc{font-size:14px;color:#666;margin-bottom:50px}",""])},341:function(e,t,n){t=e.exports=n(18)(),t.push([e.i,".mobile-nav-group{border-radius:2px;margin-bottom:15px;padding-left:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.mobile-nav-group li{list-style:none}.mobile-nav-group ul{padding:0;margin:0;overflow:hidden}.mobile-nav-group__title{font-size:16px;color:#333;line-height:56px;position:relative}.mobile-nav-group__title a{color:#333;display:block;border-top:1px solid #e5e5e5}.mobile-nav-group__title .zan-icon-arrow{position:absolute;font-size:12px;line-height:1;top:24px;right:20px}.mobile-nav-group__title--open{color:#999}",""])},372:function(e,t,n){n(506);var i=n(0)(n(275),n(450),null,null);e.exports=i.exports},431:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"side-nav"},[n("h1",{staticClass:"zanui-title"},[e._v("Zan UI Wap")]),e._v(" "),n("h2",{staticClass:"zanui-desc"},[e._v("有赞移动wap端组件库")]),e._v(" "),n("div",{staticClass:"mobile-navs"},[e._l(e.data,function(t){return[t.showInMobile?n("div",{staticClass:"mobile-nav-item"},e._l(t.groups,function(t){return n("mobile-nav",{attrs:{group:t,base:e.base}})})):e._e()]})],2)])},staticRenderFns:[]}},450:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"mobile-nav-group"},[n("div",{staticClass:"mobile-nav-group__title",class:{"mobile-nav-group__title--open":e.isOpen},on:{click:function(t){e.isOpen=!e.isOpen}}},[e._v("\n "+e._s(e.group.groupName)+"\n ")]),e._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"pure-menu-list"},[e._l(e.group.list,function(t){return[t.disabled?e._e():n("li",{staticClass:"mobile-nav-group__title"},[n("router-link",{attrs:{"active-class":"active",to:e.base+t.path},domProps:{textContent:e._s(t.title)}}),e._v(" "),n("zan-icon",{attrs:{name:"arrow"}})],1)]})],2)])},staticRenderFns:[]}},490:function(e,t,n){var i=n(325);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("1517d9c0",i,!0)},506:function(e,t,n){var i=n(341);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("8bcdd7d6",i,!0)}});
|
||||
webpackJsonp([1],{270:function(e,t,n){n(509);var i=n(0)(n(286),n(448),null,null);e.exports=i.exports},286:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(30),a=i(o),s=n(387),r=i(s);t.default={data:function(){return{highlights:[],navState:[],data:a.default["zh-CN"],base:"/component"}},components:{MobileNav:r.default}}},288:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{group:{type:Object,default:function(){return[]}},base:String},data:function(){return{isOpen:!1}}}},340:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".side-nav{width:100%;box-sizing:border-box;padding:90px 15px 20px;position:relative;z-index:1}.side-nav .zanui-desc,.side-nav .zanui-title{text-align:center;font-weight:400}.side-nav .zanui-title{font-size:26px;color:#333}.side-nav .zanui-desc{font-size:14px;color:#666;margin-bottom:50px}",""])},356:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".mobile-nav-group{border-radius:2px;margin-bottom:15px;padding-left:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.mobile-nav-group li{list-style:none}.mobile-nav-group ul{padding:0;margin:0;overflow:hidden}.mobile-nav-group__title{font-size:16px;color:#333;line-height:56px;position:relative}.mobile-nav-group__title a{color:#333;display:block;border-top:1px solid #e5e5e5}.mobile-nav-group__title .zan-icon-arrow{position:absolute;font-size:12px;line-height:1;top:24px;right:20px}.mobile-nav-group__title--open{color:#999}",""])},387:function(e,t,n){n(525);var i=n(0)(n(288),n(469),null,null);e.exports=i.exports},448:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"side-nav"},[n("h1",{staticClass:"zanui-title"},[e._v("Zan UI Wap")]),e._v(" "),n("h2",{staticClass:"zanui-desc"},[e._v("有赞移动wap端组件库")]),e._v(" "),n("div",{staticClass:"mobile-navs"},[e._l(e.data,function(t){return[t.showInMobile?n("div",{staticClass:"mobile-nav-item"},e._l(t.groups,function(t){return n("mobile-nav",{attrs:{group:t,base:e.base}})})):e._e()]})],2)])},staticRenderFns:[]}},469:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"mobile-nav-group"},[n("div",{staticClass:"mobile-nav-group__title",class:{"mobile-nav-group__title--open":e.isOpen},on:{click:function(t){e.isOpen=!e.isOpen}}},[e._v("\n "+e._s(e.group.groupName)+"\n ")]),e._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"pure-menu-list"},[e._l(e.group.list,function(t){return[t.disabled?e._e():n("li",{staticClass:"mobile-nav-group__title"},[n("router-link",{attrs:{"active-class":"active",to:e.base+t.path},domProps:{textContent:e._s(t.title)}}),e._v(" "),n("zan-icon",{attrs:{name:"arrow"}})],1)]})],2)])},staticRenderFns:[]}},509:function(e,t,n){var i=n(340);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("1517d9c0",i,!0)},525:function(e,t,n){var i=n(356);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("8bcdd7d6",i,!0)}});
|
||||
12
docs/build/zanui-docs.js
vendored
12
docs/build/zanui-docs.js
vendored
File diff suppressed because one or more lines are too long
11
docs/build/zanui-examples.js
vendored
11
docs/build/zanui-examples.js
vendored
File diff suppressed because one or more lines are too long
@ -1,10 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
class="demo-block"
|
||||
:class="blockClass">
|
||||
<div class="demo-block" :class="blockClass">
|
||||
<slot name="examples"></slot>
|
||||
<slot name="highlight">
|
||||
</slot>
|
||||
<slot name="highlight"></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -13,44 +10,38 @@ export default {
|
||||
computed: {
|
||||
blockClass() {
|
||||
return `demo-${this.$route.path.split('/').pop()}`;
|
||||
},
|
||||
|
||||
codeAreaHeight() {
|
||||
return Math.max(this.$el.getElementsByClassName('examples')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$el.getElementsByClassName('highlight')[0].style.height = `${this.codeAreaHeight + 1}px`;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-block {
|
||||
border: solid 1px #eaeefb;
|
||||
border-radius: 4px;
|
||||
transition: .2s;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, Courier, monospace;
|
||||
}
|
||||
|
||||
.examples {
|
||||
width: 375px;
|
||||
width: 320px;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
padding: 20px 0;
|
||||
padding: 10px 0 0;
|
||||
min-height: 200px;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
background-color: #F8F8F8;
|
||||
border: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin-right: 375px;
|
||||
margin-right: 345px;
|
||||
box-sizing: border-box;
|
||||
border-right: solid 1px #eaeefb;
|
||||
border: 1px solid #E5E5E5;
|
||||
border-radius: 4px;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
@ -61,6 +52,8 @@ export default {
|
||||
border: none;
|
||||
max-height: none;
|
||||
border-radius: 0;
|
||||
padding: 20px;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
|
||||
130
docs/components/footer-nav.vue
Normal file
130
docs/components/footer-nav.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="footer-nav">
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="leftNav"
|
||||
class="footer-nav__link footer-nav__left"
|
||||
@click="handleNavClick('prev')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
{{ leftNav.title }}
|
||||
</a>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
v-if="rightNav"
|
||||
class="footer-nav__link footer-nav__right"
|
||||
@click="handleNavClick('next')">
|
||||
<zan-icon name="arrow"></zan-icon>
|
||||
{{ rightNav.title }}
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navConfig from '../nav.config.json';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentPath: null,
|
||||
nav: [],
|
||||
leftNav: null,
|
||||
rightNav: null
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
setNav() {
|
||||
let nav = navConfig['zh-CN'];
|
||||
for (let i = 0; i < nav.length; i++) {
|
||||
let navItem = nav[i];
|
||||
if (!navItem.groups) {
|
||||
this.nav.push(nav[i]);
|
||||
} else {
|
||||
for (let j = 0; j < navItem.groups.length; j++) {
|
||||
this.nav = this.nav.concat(navItem.groups[j].list);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateNav() {
|
||||
let baseUrl = '/component';
|
||||
let currentIndex;
|
||||
|
||||
this.currentPath = this.$route.path.slice(baseUrl.length);
|
||||
|
||||
for (let i = 0, len = this.nav.length; i < len; i++) {
|
||||
if (this.nav[i].path === this.currentPath) {
|
||||
currentIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.leftNav = this.nav[currentIndex - 1];
|
||||
this.rightNav = this.nav[currentIndex + 1];
|
||||
},
|
||||
|
||||
handleNavClick(direction) {
|
||||
this.$router.push(`/component${ direction === 'prev' ? this.leftNav.path : this.rightNav.path }`);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.setNav();
|
||||
this.updateNav();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@component-namespace footer {
|
||||
@b nav {
|
||||
padding: 24px 0;
|
||||
font-size: 30px;
|
||||
overflow: hidden;
|
||||
|
||||
@e link {
|
||||
color: #3388FF;
|
||||
overflow: hidden;
|
||||
padding-top: 35px;
|
||||
position: relative;
|
||||
|
||||
.zan-icon {
|
||||
width: 20px;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
border: 2px solid #3388FF;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e left {
|
||||
float: left;
|
||||
|
||||
.zan-icon {
|
||||
transform: rotate(180deg);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@e right {
|
||||
float: right;
|
||||
|
||||
.zan-icon {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
|
||||
computed: {
|
||||
mobileUrl() {
|
||||
return location.pathname + 'examples.html' + location.hash;
|
||||
return '/examples.html#' + location.pathname.slice(4);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -43,32 +43,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: []
|
||||
};
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.side-nav {
|
||||
width: 320px;
|
||||
width: 220px;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 20px;
|
||||
float: left;
|
||||
background: #f9fafb;
|
||||
height: inherit;
|
||||
overflow: auto;
|
||||
padding: 40px 0;
|
||||
display: table-cell;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
@ -82,7 +74,7 @@
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #5e6d82;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
@ -91,9 +83,11 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
padding: 0 20px;
|
||||
|
||||
&.active {
|
||||
color: #20a0ff;
|
||||
color: #3388FF;
|
||||
background-color: #F2F2F2;
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
@ -101,20 +95,19 @@
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 13px;
|
||||
padding-left: 24px;
|
||||
|
||||
font-size: 14px;
|
||||
padding-left: 44px;
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
color: #3388FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #99a9bf;
|
||||
padding-left: 8px;
|
||||
color: #666;
|
||||
padding-left: 28px;
|
||||
line-height: 26px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
1
docs/dist/0.js
vendored
Normal file
1
docs/dist/0.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
docs/dist/1.js
vendored
Normal file
1
docs/dist/1.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
webpackJsonp([1],{270:function(e,t,n){n(509);var i=n(0)(n(286),n(448),null,null);e.exports=i.exports},286:function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(30),a=i(o),s=n(387),r=i(s);t.default={data:function(){return{highlights:[],navState:[],data:a.default["zh-CN"],base:"/component"}},components:{MobileNav:r.default}}},288:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{group:{type:Object,default:function(){return[]}},base:String},data:function(){return{isOpen:!1}}}},340:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".side-nav{width:100%;box-sizing:border-box;padding:90px 15px 20px;position:relative;z-index:1}.side-nav .zanui-desc,.side-nav .zanui-title{text-align:center;font-weight:400}.side-nav .zanui-title{font-size:26px;color:#333}.side-nav .zanui-desc{font-size:14px;color:#666;margin-bottom:50px}",""])},356:function(e,t,n){t=e.exports=n(11)(),t.push([e.i,".mobile-nav-group{border-radius:2px;margin-bottom:15px;padding-left:20px;background-color:#fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1)}.mobile-nav-group li{list-style:none}.mobile-nav-group ul{padding:0;margin:0;overflow:hidden}.mobile-nav-group__title{font-size:16px;color:#333;line-height:56px;position:relative}.mobile-nav-group__title a{color:#333;display:block;border-top:1px solid #e5e5e5}.mobile-nav-group__title .zan-icon-arrow{position:absolute;font-size:12px;line-height:1;top:24px;right:20px}.mobile-nav-group__title--open{color:#999}",""])},387:function(e,t,n){n(525);var i=n(0)(n(288),n(469),null,null);e.exports=i.exports},448:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"side-nav"},[n("h1",{staticClass:"zanui-title"},[e._v("Zan UI Wap")]),e._v(" "),n("h2",{staticClass:"zanui-desc"},[e._v("有赞移动wap端组件库")]),e._v(" "),n("div",{staticClass:"mobile-navs"},[e._l(e.data,function(t){return[t.showInMobile?n("div",{staticClass:"mobile-nav-item"},e._l(t.groups,function(t){return n("mobile-nav",{attrs:{group:t,base:e.base}})})):e._e()]})],2)])},staticRenderFns:[]}},469:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"mobile-nav-group"},[n("div",{staticClass:"mobile-nav-group__title",class:{"mobile-nav-group__title--open":e.isOpen},on:{click:function(t){e.isOpen=!e.isOpen}}},[e._v("\n "+e._s(e.group.groupName)+"\n ")]),e._v(" "),n("ul",{directives:[{name:"show",rawName:"v-show",value:e.isOpen,expression:"isOpen"}],staticClass:"pure-menu-list"},[e._l(e.group.list,function(t){return[t.disabled?e._e():n("li",{staticClass:"mobile-nav-group__title"},[n("router-link",{attrs:{"active-class":"active",to:e.base+t.path},domProps:{textContent:e._s(t.title)}}),e._v(" "),n("zan-icon",{attrs:{name:"arrow"}})],1)]})],2)])},staticRenderFns:[]}},509:function(e,t,n){var i=n(340);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("1517d9c0",i,!0)},525:function(e,t,n){var i=n(356);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);n(31)("8bcdd7d6",i,!0)}});
|
||||
1
docs/dist/zanui-docs.js
vendored
Normal file
1
docs/dist/zanui-docs.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
docs/dist/zanui-examples.js
vendored
Normal file
1
docs/dist/zanui-examples.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -4,6 +4,11 @@
|
||||
<zan-cell title="单元格2" value="单元格2内容"></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="带*号，标明必填">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" required></zan-cell>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="标题带描述信息">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="单元格1" label="描述信息" is-link="" url="javascript:void(0)" @click="handleClick"></zan-cell>
|
||||
|
||||
33
docs/examples-dist/datetime-picker.vue
Normal file
33
docs/examples-dist/datetime-picker.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template><section class="demo-datetime-picker"><h1 class="demo-title">datetime-picker</h1><example-block title="基础用法">
|
||||
<zan-datetime-picker type="time" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
|
||||
</zan-datetime-picker>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
minHour: 10,
|
||||
maxHour: 20,
|
||||
minDate: new Date()
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handlePickerChange(picker, values) {
|
||||
// picker.setColumnValues(1, citys[values[0]]);
|
||||
console.log(values);
|
||||
},
|
||||
handlePickerCancel() {
|
||||
alert('picker cancel');
|
||||
},
|
||||
handlePickerConfirm() {
|
||||
alert('picker confirm');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,8 +1,8 @@
|
||||
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
|
||||
<zan-cell-group>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username"></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码"></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍"></zan-field>
|
||||
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
|
||||
<zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>
|
||||
<zan-field type="textarea" label="个人介绍：" placeholder="请输入个人介绍" required></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="无label的输入框">
|
||||
@ -25,6 +25,11 @@
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" error=""></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="错误的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="留言：" type="textarea" placeholder="请输入留言" rows="1" autosize=""></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
|
||||
@ -34,6 +34,8 @@
|
||||
.zan-icon {
|
||||
margin: 10px;
|
||||
font-size: 45px;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,10 +3,22 @@
|
||||
<zan-button @click="showLoadingToast">加载Toast</zan-button>
|
||||
<zan-button @click="showSuccessToast">成功</zan-button>
|
||||
<zan-button @click="showFailToast">失败</zan-button>
|
||||
<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
|
||||
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<zan-button @click="showToast">打开</zan-button>
|
||||
<zan-button @click="closeToast">关闭</zan-button>
|
||||
|
||||
|
||||
|
||||
</example-block><example-block title="手动关闭">
|
||||
<zan-button @click="showHtmlToast">打开</zan-button>
|
||||
|
||||
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@ -35,6 +47,12 @@ export default {
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showForbidClickToast() {
|
||||
Toast({
|
||||
message: '背景不能点击',
|
||||
forbidClick: true
|
||||
})
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
let leftSec = duration / 1000;
|
||||
let toast = Toast({
|
||||
@ -50,6 +68,18 @@ export default {
|
||||
}
|
||||
toast.message = (--leftSec).toString();
|
||||
}, 1000);
|
||||
},
|
||||
showToast() {
|
||||
this.toast = Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
},
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -100,11 +100,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| actions | 行动按钮数组 | Array | [] | |
|
||||
| title | 标题 | String | | |
|
||||
| cancelText | 取消按钮文案 | String | | |
|
||||
| overlay | 是否显示遮罩 | Boolean | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭ActionSheet | Boolean | | |
|
||||
| actions | 行动按钮数组 | `Array` | `[]` | |
|
||||
| title | 标题 | `String` | | |
|
||||
| cancelText | 取消按钮文案 | `String` | | |
|
||||
| overlay | 是否显示遮罩 | `Boolean` | | |
|
||||
| closeOnClickOverlay | 点击遮罩是否关闭`ActionSheet` | `Boolean` | | |
|
||||
|
||||
### actions
|
||||
|
||||
@ -115,4 +115,4 @@ export default {
|
||||
| name | 标题 |
|
||||
| subname | 二级标题 |
|
||||
| className | 为对应列添加特殊的`class` |
|
||||
| loading | 是否是loading状态 |
|
||||
| loading | 是否是`loading`状态 |
|
||||
|
||||
@ -1,14 +1,29 @@
|
||||
## Badge 组件
|
||||
## Badge
|
||||
|
||||
### 基础用法
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeKey: '2'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onItemClick(e, data) {
|
||||
this.activeKey = data.mark;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-badge-group active-key="2">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199"></zan-badge>
|
||||
<zan-badge-group :active-key="activeKey">
|
||||
<zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
|
||||
<zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
|
||||
</zan-badge-group>
|
||||
```
|
||||
:::
|
||||
@ -17,13 +32,13 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | |
|
||||
| active-key | 激活的`badge`的索引 | `string` | `0`但必须子badge里的mark是有`0`位索引 | |
|
||||
|
||||
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mark | badge的唯一key值 | string | '' | required |
|
||||
| title | badge的文案标题 | string | '' | required |
|
||||
| info | 当前badge的提示消息数量 | string | '' | |
|
||||
| url | 跳转链接 | string | 全连接直接跳转或者hash | |
|
||||
| mark | badge的唯一key值 | `string` | `''` | `required` |
|
||||
| title | badge的文案标题 | `string` | `''` | `required` |
|
||||
| info | 当前badge的提示消息数量 | `string` | `''` | |
|
||||
| url | 跳转链接 | `string` | 全连接直接跳转或者hash | |
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## Button组件
|
||||
## Button 按钮
|
||||
|
||||
### 按钮功能
|
||||
|
||||
只接受primary, default, danger三种类型，默认default。
|
||||
只接受`primary`, `default`, `danger`三种类型，默认`default`。
|
||||
|
||||
:::demo 按钮功能
|
||||
```html
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
### 按钮尺寸
|
||||
|
||||
只接受large, normal, small, mini四种尺寸，默认normal。
|
||||
只接受`large`, `normal`, `small`, `mini`四种尺寸，默认`normal`。
|
||||
|
||||
:::demo 按钮尺寸
|
||||
```html
|
||||
@ -76,7 +76,7 @@
|
||||
|
||||
### 自定义按钮标签
|
||||
|
||||
按钮默认是button标签，可以使用tag属性修改为一个a标签。
|
||||
按钮默认是`button`标签，可以使用`tag`属性修改为一个`a`标签。
|
||||
|
||||
:::demo 自定义按钮标签
|
||||
```html
|
||||
@ -90,8 +90,6 @@
|
||||
|
||||
### loading按钮
|
||||
|
||||
表示loading状态
|
||||
|
||||
:::demo loading按钮
|
||||
```html
|
||||
<zan-row>
|
||||
@ -107,8 +105,6 @@
|
||||
|
||||
### button group
|
||||
|
||||
一组按钮。
|
||||
|
||||
:::demo button group
|
||||
```html
|
||||
<div class="button-group">
|
||||
@ -123,9 +119,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 按钮类型 | string | 'default' | 'primary', 'danger' |
|
||||
| size | 按钮尺寸 | string | 'normal' | 'large', 'small', 'mini' |
|
||||
| tag | 按钮标签 | string | 'button' | 'a', 'span', ... |
|
||||
| diabled | 按钮是否禁用 | Boolean | | |
|
||||
| block | 按钮是否显示为块级元素 | Boolean | | |
|
||||
| type | 按钮类型 | `string` | `default` | `primary`, `danger` |
|
||||
| size | 按钮尺寸 | `string` | `normal` | `large`, `small`, `mini` |
|
||||
| tag | 按钮标签 | `string` | `button` | `a`, `span`, ... |
|
||||
| diabled | 按钮是否禁用 | `boolean` | | |
|
||||
| block | 按钮是否显示为块级元素 | `boolean` | | |
|
||||
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| thumb | 左侧图片 | string | '' | '' |
|
||||
| title | 标题 | string | '' | '' |
|
||||
| desc | 描述 | string | '' | '' |
|
||||
| thumb | 左侧图片 | `string` | | |
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
@ -16,7 +16,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
## Cell 组件
|
||||
## Cell
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -102,17 +102,17 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| icon | 左侧图标 | string | '' | '' |
|
||||
| title | 左侧标题 | string | '' | '' |
|
||||
| value | 右侧内容 | string | '' | '' |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | boolean | '' | '' |
|
||||
| url | 跳转链接 | string | '' | '' |
|
||||
| label | 描述信息，显示在标题下方 | string | '' | '' |
|
||||
| icon | 左侧图标 | `string` | | |
|
||||
| title | 左侧标题 | `string` | | |
|
||||
| value | 右侧内容 | `string` | | |
|
||||
| isLink | 是否为链接，链接会在右侧出现箭头 | `boolean` | | |
|
||||
| url | 跳转链接 | `string` | | |
|
||||
| label | 描述信息，显示在标题下方 | `string` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义显示内容 |
|
||||
| icon | 自定义icon |
|
||||
| title | 自定义title |
|
||||
| icon | 自定义`icon` |
|
||||
| title | 自定义`title` |
|
||||
|
||||
@ -170,14 +170,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| name | 根据这个来判断radio是否选中 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
|
||||
### CheckboxGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
|
||||
### CheckboxGroup Event
|
||||
|
||||
|
||||
@ -89,5 +89,5 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | String | '' | |
|
||||
| message | 内容 | String | '' | |
|
||||
| title | 标题 | `string` | | |
|
||||
| message | 内容 | `string` | | |
|
||||
|
||||
@ -101,15 +101,15 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 输入框类型 | string | text | text, number, email, url, tel, date, datetime, password, textarea |
|
||||
| placeholder | 输入框placeholder | string | '' | |
|
||||
| value | 输入框的值 | string | '' | |
|
||||
| label | 输入框标签 | string | '' | |
|
||||
| disabled | 是否禁用输入框 | boolean | false | |
|
||||
| error | 输入框是否有错误 | boolean | false | |
|
||||
| readonly | 输入框是否只读 | boolean | false | |
|
||||
| maxlength | 输入框maxlength | [String, Number] | '' | |
|
||||
| rows | textarea rows | [String, Number] | '' | |
|
||||
| cols | textarea cols | [String, Number] | '' | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | Boolean | false | true, false |
|
||||
| type | 输入框类型 | `string` | `text` | `text`, `number`, `email`, `url`, `tel`, `date`, `datetime`, `password`, `textarea` |
|
||||
| placeholder | 输入框placeholder | `string` | | |
|
||||
| value | 输入框的值 | `string` | | |
|
||||
| label | 输入框标签 | `string` | | |
|
||||
| disabled | 是否禁用输入框 | `boolean` | `false` | |
|
||||
| error | 输入框是否有错误 | `boolean` | `false` | |
|
||||
| readonly | 输入框是否只读 | `boolean` | `false` | |
|
||||
| maxlength | 输入框maxlength | `string`, `number` | | |
|
||||
| rows | textarea rows | `string`, `number` | | |
|
||||
| cols | textarea cols | `string`, `number` | | |
|
||||
| autosize | 自动调整高度(仅支持textarea) | `boolean` | `false` | `true`, `false` |
|
||||
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
.zan-icon {
|
||||
margin: 10px;
|
||||
font-size: 45px;
|
||||
width: 56px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,4 +51,4 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| name | icon名称 | string | '' | |
|
||||
| name | icon名称 | `string` | `''` | |
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
## Loading
|
||||
## Loading 加载中
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -43,3 +43,10 @@
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| color | `loading`颜色 | `string` | `black` | `black`, `white` |
|
||||
| type | `loading`类型 | `string` | `gradient-circle` | `gradient-circle`, `circle` |
|
||||
|
||||
@ -84,9 +84,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | 标题 | string | '' | '' |
|
||||
| desc | 描述 | string | '' | '' |
|
||||
| status | 状态 | string | '' | '' |
|
||||
| title | 标题 | `string` | | |
|
||||
| desc | 描述 | `string` | | |
|
||||
| status | 状态 | `string` | | |
|
||||
|
||||
|
||||
### Slot
|
||||
|
||||
@ -127,10 +127,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | Number | 5 | |
|
||||
| itemHeight | 选中元素区高度 | Number | 44 | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | Array | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | Boolean | true | |
|
||||
| visibileColumnCount | 每一列可见备选元素的个数 | `number` | `5` | |
|
||||
| itemHeight | 选中元素区高度 | `number` | `44` | |
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | | |
|
||||
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | |
|
||||
|
||||
### columns
|
||||
|
||||
|
||||
@ -145,4 +145,4 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | Boolean | '' | |
|
||||
| value | 利用`v-model`绑定当前组件是否显示 | `boolean` | | |
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</style>
|
||||
|
||||
|
||||
## Switch组件
|
||||
## Progress
|
||||
|
||||
### 基础用法
|
||||
|
||||
@ -64,9 +64,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| inactive | 是否只会 | boolean | false | true, false |
|
||||
| percentage | 进度百分比 | number | false | 0-100 |
|
||||
| pivotText | 文字显示 | string | 百分比文字 | - |
|
||||
| color | 进度条颜色 | string | #38f | hexvalue |
|
||||
| textColor | 进度条文字颜色 | string | #fff | hexvalue |
|
||||
| inactive | 是否只会 | `boolean` | `false` | `true`, `false` |
|
||||
| percentage | 进度百分比 | `number` | `false` | `0-100` |
|
||||
| pivotText | 文字显示 | `string` | 百分比文字 | - |
|
||||
| color | 进度条颜色 | `string` | `#38f` | hexvalue |
|
||||
| textColor | 进度条文字颜色 | `string` | `#fff` | hexvalue |
|
||||
|
||||
|
||||
@ -57,9 +57,9 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| min | 最小值 | string/number | 1 | '' |
|
||||
| max | 最大值 | string/number | '' | '' |
|
||||
| step | 步数 | string/number | 1 | '' |
|
||||
| disabled | 是否被禁用了 | boolean | false | '' |
|
||||
| defaultValue | 默认值 | string/number | 1 | '' |
|
||||
| min | 最小值 | `string`, `number` | `1` | |
|
||||
| max | 最大值 | `string`, `number` | | |
|
||||
| step | 步数 | `string`, `number` | `1` | |
|
||||
| disabled | 是否被禁用了 | `boolean` | `false` | |
|
||||
| defaultValue | 默认值 | `string`, `number` | `1` | |
|
||||
|
||||
|
||||
@ -119,14 +119,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| name | 根据这个来判断radio是否选中 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
| name | 根据这个来判断radio是否选中 | `boolean` | `false` | |
|
||||
|
||||
### RadioGroup API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| disabled | 是否禁用单选框 | Boolean | false | |
|
||||
| disabled | 是否禁用单选框 | `boolean` | `false` | |
|
||||
|
||||
### RadioGroup Event
|
||||
|
||||
|
||||
@ -31,4 +31,4 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| placeholder | input的placeholder文案 | string | | |
|
||||
| placeholder | `input`的`placeholder`文案 | `string` | | |
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.zan-button {
|
||||
margin-left: 15px;
|
||||
margin: 15px 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -79,11 +79,11 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active | 当前激活的步骤，从0开始 | Number | '' | '' |
|
||||
| icon | 当前步骤的icon | string | '' | '' |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | string | '' | '' |
|
||||
| title | 当前步骤从标题 | string | '' | '' |
|
||||
| description | 当前步骤描述 | string | '' | '' |
|
||||
| active | 当前激活的步骤，从0开始 | `number` | | |
|
||||
| icon | 当前步骤的icon | `string` | | |
|
||||
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
|
||||
| title | 当前步骤从标题 | `string` | | |
|
||||
| description | 当前步骤描述 | `string` | | |
|
||||
|
||||
### Steps Slot
|
||||
|
||||
|
||||
@ -89,6 +89,6 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| checked | 开关状态 | boolean | false | true, false |
|
||||
| loading | loading状态 | boolean | false | true, false |
|
||||
| disabled | 禁用状态 | boolean | false | true, false |
|
||||
| checked | 开关状态 | `boolean` | `false` | `true`, `false` |
|
||||
| loading | loading状态 | `boolean` | `false` | `true`, `false` |
|
||||
| disabled | 禁用状态 | `boolean` | `false` | `true`, `false` |
|
||||
|
||||
@ -124,14 +124,14 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| classtype | 两种UI | string | line | card |
|
||||
| active | 默认激活的tab | string || number | 0 | |
|
||||
| navclass | tabs的内部nav上的自定义classname | string | '' | |
|
||||
| classtype | 两种UI | `string` | `line` | `line`, `card` |
|
||||
| active | 默认激活的tab | `string`, `number` | `0` | |
|
||||
| navclass | tabs的内部nav上的自定义classname | `string` | | |
|
||||
|
||||
|
||||
### zan-tab API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| title | tab的标题 | string | '' | required |
|
||||
| disable | 是否禁用这个tab | Boolean | false | |
|
||||
| title | tab的标题 | `string` | | |
|
||||
| disable | 是否禁用这个tab | `boolean` | `false` | |
|
||||
|
||||
|
||||
@ -52,9 +52,9 @@
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| plain | 是否是空心tag | boolean | false | '' |
|
||||
| mark | 是否是标记 | boolean | false | '' |
|
||||
| type | tag类型 | string | '' | 'primary', 'success', 'danger' |
|
||||
| plain | 是否是空心tag | `boolean` | `false` | |
|
||||
| mark | 是否是标记 | `boolean` | `false` | |
|
||||
| type | tag类型 | `string` | `''` | `primary`, `success`, `danger` |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -25,6 +25,12 @@ export default {
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showForbidClickToast() {
|
||||
Toast({
|
||||
message: '背景不能点击',
|
||||
forbidClick: true
|
||||
})
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
let leftSec = duration / 1000;
|
||||
let toast = Toast({
|
||||
@ -40,6 +46,18 @@ export default {
|
||||
}
|
||||
toast.message = (--leftSec).toString();
|
||||
}, 1000);
|
||||
},
|
||||
showToast() {
|
||||
this.toast = Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
},
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -55,6 +73,7 @@ export default {
|
||||
<zan-button @click="showLoadingToast">加载Toast</zan-button>
|
||||
<zan-button @click="showSuccessToast">成功</zan-button>
|
||||
<zan-button @click="showFailToast">失败</zan-button>
|
||||
<zan-button @click="showForbidClickToast">背景不能点击</zan-button>
|
||||
<zan-button @click="showCustomizedToast(5000)">倒数5秒</zan-button>
|
||||
|
||||
<script>
|
||||
@ -74,6 +93,12 @@ export default {
|
||||
showFailToast() {
|
||||
Toast.fail('失败文案');
|
||||
},
|
||||
showForbidClickToast() {
|
||||
Toast({
|
||||
message: '背景不能点击',
|
||||
forbidClick: true
|
||||
})
|
||||
},
|
||||
showCustomizedToast(duration) {
|
||||
let leftSec = duration / 1000;
|
||||
let toast = Toast({
|
||||
@ -96,9 +121,96 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### API
|
||||
### 手动关闭
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<zan-button @click="showToast">打开</zan-button>
|
||||
<zan-button @click="closeToast">关闭</zan-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showToast() {
|
||||
this.toast = Toast('我是提示文案，建议不超过十五字~');
|
||||
},
|
||||
closeToast() {
|
||||
this.toast.clear();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 传入html
|
||||
|
||||
:::demo 手动关闭
|
||||
```html
|
||||
<zan-button @click="showHtmlToast">打开</zan-button>
|
||||
|
||||
<script>
|
||||
import { Toast } from 'src/index';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
showHtmlToast() {
|
||||
Toast({
|
||||
type: 'html',
|
||||
message: '<em>HTML<em>'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### 基础用法
|
||||
### Toast(options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'fail', 'html' |
|
||||
| message | 内容 | String | '' | - |\| message | 内容 | String | '' | -
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### 快速用法
|
||||
### Toast(message) || Toast(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| message | 内容 | String | '' | - |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.loading() || Toast.loading(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.success(message) || Toast.success(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| message | 内容 | String | '' | - |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### Toast.fail(message) || Toast.fail(message, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| type | 类型 | String | 'text' | 'text', 'loading', 'success', 'failure' |
|
||||
| forbidClick | 不允许背景点击 | Boolean | false | true, false|
|
||||
| duration | 时长(ms) | Number | 3000ms | -|
|
||||
|
||||
### instanceOfToast.clear()
|
||||
关闭toast。
|
||||
|
||||
@ -42,10 +42,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | String | 'dataUrl' | 'dataUrl','text' |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | boolean | false | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | Function | | |
|
||||
| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | Function | | |
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `string` | `dataUrl` | `dataUrl`, `text` |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `boolean` | `false` | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | `Function` | | |
|
||||
| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | `Function` | | |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -76,6 +76,6 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | String | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | Number | 300 | |
|
||||
| waterfall-disabled | 在vue对象中表示是否禁止瀑布流触发的key值 | `string` | - | |
|
||||
| waterfall-offset | 触发瀑布流加载的阈值 | `number` | `300` | |
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import navConfig from './nav.config.json';
|
||||
import routes from './router.config';
|
||||
import SideNav from './components/side-nav';
|
||||
import DemoBlock from './components/demo-block';
|
||||
import FooterNav from './components/footer-nav';
|
||||
import ZanUI from 'src/index.js';
|
||||
|
||||
import 'packages/zanui-css/src/index.css';
|
||||
@ -19,6 +20,7 @@ Vue.use(VueRouter);
|
||||
Vue.use(ZanUI);
|
||||
Vue.component('side-nav', SideNav);
|
||||
Vue.component('demo-block', DemoBlock);
|
||||
Vue.component('footer-nav', FooterNav);
|
||||
|
||||
let routesConfig = routes(navConfig);
|
||||
routesConfig.push({
|
||||
@ -27,15 +29,14 @@ routesConfig.push({
|
||||
});
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
base: __dirname,
|
||||
mode: 'history',
|
||||
base: '/vue',
|
||||
routes: routesConfig
|
||||
});
|
||||
|
||||
let indexScrollTop = 0;
|
||||
router.beforeEach((route, redirect, next) => {
|
||||
if (route.path !== '/') {
|
||||
indexScrollTop = document.body.scrollTop;
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
if (isMobile()) {
|
||||
window.location.replace(location.pathname + 'examples.html#' + route.path);
|
||||
@ -45,16 +46,6 @@ router.beforeEach((route, redirect, next) => {
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach(route => {
|
||||
if (route.path !== '/') {
|
||||
document.body.scrollTop = 0;
|
||||
} else {
|
||||
Vue.nextTick(() => {
|
||||
document.body.scrollTop = indexScrollTop;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
new Vue({ // eslint-disable-line
|
||||
render: h => h(App),
|
||||
router
|
||||
|
||||
@ -68,10 +68,6 @@
|
||||
"path": "/tab",
|
||||
"title": "Tab"
|
||||
},
|
||||
{
|
||||
"path": "/lazyload",
|
||||
"title": "Lazyload"
|
||||
},
|
||||
{
|
||||
"path": "/popup",
|
||||
"title": "Popup"
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
<app></app>
|
||||
</div>
|
||||
|
||||
<script src="docs/build/zanui-examples.js"></script>
|
||||
<script src="/vue/docs/dist/zanui-examples.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,6 +11,6 @@
|
||||
<app></app>
|
||||
</div>
|
||||
|
||||
<script src="docs/build/zanui-docs.js"></script>
|
||||
<script src="/vue/docs/dist/zanui-docs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
package.json
20
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-vue",
|
||||
"version": "0.0.38",
|
||||
"version": "0.0.41",
|
||||
"description": "有赞vue wap组件库",
|
||||
"main": "lib/zanui.js",
|
||||
"style": "lib/zanui-css/index.css",
|
||||
@ -11,7 +11,7 @@
|
||||
],
|
||||
"scripts": {
|
||||
"bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
|
||||
"dev": "npm run build:file && webpack-dev-server --inline --history-api-fallback --hot --config build/webpack.config.js",
|
||||
"build:file": "node build/bin/build-entry.js",
|
||||
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
|
||||
"build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
|
||||
@ -103,21 +103,9 @@
|
||||
"markdown-it-anchor": "^2.5.0",
|
||||
"markdown-it-container": "^2.0.0",
|
||||
"mocha": "^3.2.0",
|
||||
"pixrem": "^3.0.0",
|
||||
"postcss": "^5.1.2",
|
||||
"postcss-calc": "^5.0.0",
|
||||
"postcss-css-reset": "^1.0.2",
|
||||
"postcss-easy-import": "^2.0.0",
|
||||
"postcss-initial": "^1.3.1",
|
||||
"postcss-inline-svg": "^1.4.0",
|
||||
"postcss-loader": "^0.13.0",
|
||||
"postcss-neat": "^2.5.2",
|
||||
"postcss-pseudo-class-any-link": "^1.0.0",
|
||||
"postcss-sass-color-functions": "^1.1.0",
|
||||
"postcss-scss": "^0.1.7",
|
||||
"postcss-shape": "^0.0.1",
|
||||
"postcss-short": "^1.4.0",
|
||||
"postcss-utils": "^1.0.1",
|
||||
"postcss-loader": "^1.3.3",
|
||||
"precss": "^1.4.0",
|
||||
"prismjs": "^1.5.1",
|
||||
"progress-bar-webpack-plugin": "^1.9.3",
|
||||
@ -141,7 +129,7 @@
|
||||
"vue-template-compiler": "2.1.8",
|
||||
"vue-template-es2015-compiler": "^1.4.2",
|
||||
"webpack": "^2.2.1",
|
||||
"webpack-dev-server": "^1.16.0",
|
||||
"webpack-dev-server": "^1.16.3",
|
||||
"webpack-merge": "^2.0.0",
|
||||
"webpack-node-externals": "^1.5.4",
|
||||
"webpack-vendor-chunk-plugin": "^1.0.0"
|
||||
|
||||
@ -14,12 +14,6 @@
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
computedActiveKey: this.activeKey
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -19,21 +19,27 @@ export default {
|
||||
required: true
|
||||
},
|
||||
url: {
|
||||
type: String
|
||||
type: String,
|
||||
default: 'javascript:;'
|
||||
},
|
||||
info: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick() {
|
||||
this.$parent.computedActiveKey = this.mark;
|
||||
handleClick(e) {
|
||||
this.$emit('click', e, {
|
||||
mark: this.mark,
|
||||
title: this.title,
|
||||
url: this.url,
|
||||
info: this.info
|
||||
});
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return {
|
||||
'is-select': this.mark === this.$parent.computedActiveKey
|
||||
'is-select': this.mark === this.$parent.activeKey
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a class="zan-cell" :href="url" @click="handleClick">
|
||||
<div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }">
|
||||
<div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }" v-if="this.$slots.title || title || label">
|
||||
<slot name="icon">
|
||||
<i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
|
||||
</slot>
|
||||
|
||||
@ -81,7 +81,6 @@ export default {
|
||||
[0, 59]
|
||||
];
|
||||
}
|
||||
debugger
|
||||
const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue);
|
||||
const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
ref="textareaElement"
|
||||
class="zan-field__control"
|
||||
v-model="currentValue"
|
||||
@focus="handleInputFocus"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
:disabled="disabled"
|
||||
@ -28,6 +29,7 @@
|
||||
class="zan-field__control"
|
||||
:value="currentValue"
|
||||
@input="handleInput"
|
||||
@focus="handleInputFocus"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
@ -104,6 +106,10 @@ export default {
|
||||
// 需要先设为0， 才可以让scrollHeight正确计算。
|
||||
textareaElement.style.height = 0 + 'px';
|
||||
textareaElement.style.height = (textareaElement.scrollHeight - textAreaDiff) + 'px';
|
||||
},
|
||||
|
||||
handleInputFocus() {
|
||||
this.$emit('focus');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -65,6 +65,9 @@ export default {
|
||||
},
|
||||
|
||||
watch: {
|
||||
value(val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
values(val) {
|
||||
this.currentValues = val;
|
||||
},
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
<div class="zan-progress">
|
||||
<div class="zan-progress__bar">
|
||||
<span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
|
||||
<span class="zan-progress__bar__pivot" :style="pivotStyle">
|
||||
{{pivotText}}
|
||||
</span>
|
||||
<span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -29,7 +27,7 @@ export default {
|
||||
props: {
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true,
|
||||
validate(value) {
|
||||
return value <= 100 && value >= 0;
|
||||
}
|
||||
@ -55,6 +53,9 @@ export default {
|
||||
},
|
||||
|
||||
computed: {
|
||||
currentPivotText() {
|
||||
return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
|
||||
},
|
||||
componentColor() {
|
||||
return this.inactive ? '#cacaca' : this.color;
|
||||
},
|
||||
@ -65,7 +66,6 @@ export default {
|
||||
left: this.percentage + '%',
|
||||
marginLeft: '-14px'
|
||||
};
|
||||
console.log(this.percentage);
|
||||
if (this.percentage <= 5) {
|
||||
pivotStyle.left = '0%';
|
||||
pivotStyle.marginLeft = '0';
|
||||
|
||||
@ -36,16 +36,20 @@ var Toast = (options = {}) => {
|
||||
clearTimeout(instance.timer);
|
||||
instance.type = options.type ? options.type : 'text';
|
||||
instance.message = typeof options === 'string' ? options : options.message;
|
||||
instance.forbidClick = options.forbidClick ? options.forbidClick : false;
|
||||
instance.clear = () => {
|
||||
if (instance.closed) return;
|
||||
instance.visible = false;
|
||||
instance.$el.addEventListener('transitionend', removeDom);
|
||||
instance.closed = true;
|
||||
};
|
||||
|
||||
document.body.appendChild(instance.$el);
|
||||
Vue.nextTick(function() {
|
||||
instance.visible = true;
|
||||
instance.$el.removeEventListener('transitionend', removeDom);
|
||||
instance.timer = setTimeout(function() {
|
||||
if (instance.closed) return;
|
||||
instance.visible = false;
|
||||
instance.$el.addEventListener('transitionend', removeDom);
|
||||
instance.closed = true;
|
||||
instance.clear();
|
||||
}, duration);
|
||||
});
|
||||
return instance;
|
||||
|
||||
@ -1,19 +1,26 @@
|
||||
<template>
|
||||
<transition name="zan-toast">
|
||||
<div class="zan-toast" :class="['zan-toast--' + displayStyle]" v-show="visible">
|
||||
<!-- 只显示文字 -->
|
||||
<template v-if="displayStyle === 'text'" >
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<!-- 加载中 -->
|
||||
<template v-if="displayStyle === 'loading'">
|
||||
<zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
|
||||
</template>
|
||||
<!-- 图案加文字 -->
|
||||
<template v-if="displayStyle === 'default'">
|
||||
<zan-icon class="zan-toast__icon" name="check"></zan-icon>
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<div class="zan-toast-wrapper" v-show="visible">
|
||||
<div class="zan-toast" :class="['zan-toast--' + displayStyle]">
|
||||
<!-- 只显示文字 -->
|
||||
<template v-if="displayStyle === 'text'" >
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<!-- 加载中 -->
|
||||
<template v-if="displayStyle === 'loading'">
|
||||
<zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
|
||||
</template>
|
||||
<!-- 图案加文字 -->
|
||||
<template v-if="displayStyle === 'default'">
|
||||
<zan-icon class="zan-toast__icon" :name="type"></zan-icon>
|
||||
<div class="zan-toast__text">{{message}}</div>
|
||||
</template>
|
||||
<!-- 传入html -->
|
||||
<template v-if="displayStyle === 'html'">
|
||||
<div class="zan-toast__text" v-html="message"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="zan-toast__overlay" v-if="forbidClick"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
@ -22,7 +29,8 @@
|
||||
import zanLoading from 'packages/loading';
|
||||
import zanIcon from 'packages/icon';
|
||||
|
||||
const TOAST_TYPES = ['text', 'loading', 'success', 'fail'];
|
||||
const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
|
||||
const DEFAULT_STYLE_LIST = ['success', 'fail'];
|
||||
/**
|
||||
* zan-toast
|
||||
* @module components/toast
|
||||
@ -54,6 +62,10 @@ export default {
|
||||
return value.length <= 16;
|
||||
}
|
||||
}
|
||||
},
|
||||
forbidClick: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -63,18 +75,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
displayStyle() {
|
||||
switch (this.type) {
|
||||
case 'text':
|
||||
return 'text';
|
||||
case 'loading':
|
||||
return 'loading';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
},
|
||||
iconName() {
|
||||
// TODO: 更新icon
|
||||
return 'check';
|
||||
return DEFAULT_STYLE_LIST.indexOf(this.type) > -1 ? 'default' : this.type;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@youzan/zanui-css",
|
||||
"version": "0.0.38",
|
||||
"version": "0.0.41",
|
||||
"description": "zanui css.",
|
||||
"main": "lib/index.css",
|
||||
"style": "lib/index.css",
|
||||
|
||||
@ -13,14 +13,14 @@
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 20px 15px;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
line-height: 14px;
|
||||
line-height: 1.4;
|
||||
background-color: $c-background;
|
||||
color: $c-gray-darker;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
word-break: break-all;
|
||||
@e active {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -68,4 +68,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
@mixin border-retina (bottom);
|
||||
@ -34,9 +35,7 @@
|
||||
}
|
||||
|
||||
@e title {
|
||||
display: inline-block;
|
||||
/* 清除空白字符对高度的影响 */
|
||||
vertical-align: bottom;
|
||||
float: left;
|
||||
|
||||
&.zan-cell__required {
|
||||
&::before {
|
||||
@ -65,7 +64,7 @@
|
||||
}
|
||||
|
||||
@when alone {
|
||||
float: left;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
@b steps {
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
|
||||
@m 4 {
|
||||
.zan-step {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
@component-namespace zan {
|
||||
@b toast {
|
||||
position: fixed;
|
||||
z-index: 3000;
|
||||
z-index: 3001;
|
||||
border-radius: 5px;
|
||||
background-color: #272727;
|
||||
opacity: .7;
|
||||
@ -13,12 +13,23 @@
|
||||
font-size: 12px;
|
||||
color: $c-white;
|
||||
text-align: center;
|
||||
line-height: 12px;
|
||||
|
||||
@e overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
width: 100vh;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
@m loading {
|
||||
padding: 45px;
|
||||
}
|
||||
|
||||
@m text {
|
||||
@m text, html {
|
||||
padding: 12px;
|
||||
min-width: 200px;
|
||||
}
|
||||
@ -26,12 +37,15 @@
|
||||
@m default {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
.zan-toast__icon {
|
||||
padding: 20px;
|
||||
font-size: 36px;
|
||||
padding-top: 20px;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.zan-toast__text {
|
||||
padding-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
|
||||
module.exports = {
|
||||
install,
|
||||
version: '0.0.38',
|
||||
version: '0.0.41',
|
||||
Button,
|
||||
Switch,
|
||||
Field,
|
||||
|
||||
82
test/unit/specs/progress.spec.js
Normal file
82
test/unit/specs/progress.spec.js
Normal file
@ -0,0 +1,82 @@
|
||||
import Progress from 'packages/progress';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Progress', () => {
|
||||
let wrapper;
|
||||
let bar;
|
||||
let pivot;
|
||||
const initProgressBar = function(propsData) {
|
||||
wrapper = mount(Progress, {
|
||||
propsData: propsData
|
||||
});
|
||||
bar = wrapper.find('.zan-progress__bar__finished-portion')[0];
|
||||
pivot = wrapper.find('.zan-progress__bar__pivot')[0];
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
wrapper && wrapper.destroy();
|
||||
});
|
||||
|
||||
it('create active 3% progress bar', () => {
|
||||
initProgressBar({ percentage: 3 });
|
||||
|
||||
expect(wrapper.hasClass('zan-progress')).to.be.true;
|
||||
expect(bar.is('span')).to.be.true;
|
||||
expect(bar.hasStyle('width', '3%'));
|
||||
|
||||
expect(pivot.is('span')).to.be.true;
|
||||
expect(pivot.hasStyle('left', '0%'));
|
||||
expect(pivot.hasStyle('marginLeft', '0'));
|
||||
expect(pivot.text()).to.equal('3%');
|
||||
});
|
||||
|
||||
it('create active 35% progress bar', () => {
|
||||
initProgressBar({ percentage: 35 });
|
||||
|
||||
expect(wrapper.hasClass('zan-progress')).to.be.true;
|
||||
expect(bar.is('span')).to.be.true;
|
||||
expect(bar.hasStyle('width', '35%'));
|
||||
|
||||
expect(pivot.is('span')).to.be.true;
|
||||
expect(pivot.hasStyle('left', '35%'));
|
||||
expect(pivot.hasStyle('marginLeft', '-14px'));
|
||||
expect(pivot.text()).to.equal('35%');
|
||||
});
|
||||
|
||||
it('create active 98% progress bar', () => {
|
||||
initProgressBar({ percentage: 98 });
|
||||
|
||||
expect(wrapper.hasClass('zan-progress')).to.be.true;
|
||||
expect(bar.is('span')).to.be.true;
|
||||
expect(bar.hasStyle('width', '98%'));
|
||||
|
||||
expect(pivot.is('span')).to.be.true;
|
||||
expect(pivot.hasStyle('left', '100%'));
|
||||
expect(pivot.hasStyle('marginLeft', '-28px'));
|
||||
expect(pivot.text()).to.equal('98%');
|
||||
});
|
||||
|
||||
it('create inactive 35% progress bar', () => {
|
||||
initProgressBar({ percentage: 35, inactive: true });
|
||||
|
||||
expect(pivot.hasStyle('backgroundColor', '#cacaca'));
|
||||
});
|
||||
|
||||
it('create progress bar with custom text', () => {
|
||||
initProgressBar({ percentage: 35, pivotText: 'pivotText' });
|
||||
|
||||
expect(pivot.text()).to.equal('pivotText');
|
||||
});
|
||||
|
||||
it('create progress bar with custom color', () => {
|
||||
initProgressBar({ percentage: 35, color: 'red' });
|
||||
|
||||
expect(pivot.hasStyle('backgroundColor', 'red'));
|
||||
});
|
||||
|
||||
it('create progress bar with text color', () => {
|
||||
initProgressBar({ percentage: 35, textColor: 'red' });
|
||||
|
||||
expect(pivot.hasStyle('color', 'red'));
|
||||
});
|
||||
});
|
||||
@ -1,7 +1,6 @@
|
||||
import Switch from 'packages/switch';
|
||||
import ZanLoading from 'packages/loading';
|
||||
import { mount } from 'avoriaz';
|
||||
// import { stub } from 'sinon';
|
||||
|
||||
describe('Switch', () => {
|
||||
let wrapper;
|
||||
|
||||
36
test/unit/specs/toast.spec.js
Normal file
36
test/unit/specs/toast.spec.js
Normal file
@ -0,0 +1,36 @@
|
||||
import Toast from 'packages/toast';
|
||||
import { mount } from 'avoriaz';
|
||||
|
||||
describe('Toast', () => {
|
||||
it('create simple toast', () => {
|
||||
Toast('a message');
|
||||
var toast = document.querySelector('.zan-toast');
|
||||
|
||||
expect(toast).not.to.be.underfined;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(toast.hidden).to.be.true;
|
||||
}, 301);
|
||||
});
|
||||
|
||||
it('create loading toast', () => {
|
||||
Toast.loading('');
|
||||
var toast = document.querySelector('.zan-toast');
|
||||
|
||||
expect(toast).not.to.be.underfined;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(toast.hidden).to.be.true;
|
||||
}, 301);
|
||||
});
|
||||
it('create loading toast', () => {
|
||||
Toast.success('');
|
||||
var toast = document.querySelector('.zan-toast');
|
||||
|
||||
expect(toast).not.to.be.underfined;
|
||||
|
||||
setTimeout(() => {
|
||||
expect(toast.hidden).to.be.true;
|
||||
}, 301);
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user