blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix wap ui

Browse Source
This commit is contained in:
cookfront 2017-04-18 18:02:33 +08:00
parent 9e9ca6c58a
commit e9807c1ad3
35 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
build/genExamples.js
View File

@ -12,7 +12,7 @@ var parser = markdownIt('default', {
html: true
});
var renderVueTemplate = function (html, componentName) {
var renderVueTemplate = function(html, componentTitle) {
var $ = cheerio.load(html, {
decodeEntities: false,
lowerCaseAttributeNames: false,
@ -36,12 +36,14 @@ var renderVueTemplate = function (html, componentName) {
script = '<script>\nimport Vue from "vue";import ExampleBlock from "components/example-block";Vue.component("example-block", ExampleBlock);</script>';
}
result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentName}</h1>` + output['example-block'] + '</section></template>\n' +
var componentName = componentTitle.split(' ')[0];
componentName = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);
result = `<template><section class="demo-${componentName}"><h1 class="demo-title">${componentTitle}</h1>` + output['example-block'] + '</section></template>\n' +
output.style + '\n' +
script;
return result;
}
};
function convert(str) {
str = str.replace(/(&#x)(\w{4});/gi, function($0) {
@ -94,7 +96,7 @@ for (var i = 0; i < components.length; i++) {
var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString();
var content = parser.render(itemMd);
var result = renderVueTemplate(content, item.path.slice(1));
var result = renderVueTemplate(content, item.title);
var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`;

2
docs/examples-dist/actionsheet.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-actionsheet"><h1 class="demo-title">actionsheet</h1><example-block title="基础用法">
<template><section class="demo-actionSheet"><h1 class="demo-title">ActionSheet 行动按钮</h1><example-block title="基础用法">
<div class="zan-row">
<zan-button @click="show1 = true">弹出actionsheet</zan-button>
</div>

2
docs/examples-dist/badge.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-badge"><h1 class="demo-title">badge</h1><example-block title="基础用法">
<template><section class="demo-badge"><h1 class="demo-title">Badge 徽章</h1><example-block title="基础用法">
<zan-badge-group>
<zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
<zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>

4
docs/examples-dist/button.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-button"><h1 class="demo-title">button</h1><example-block title="按钮功能">
<template><section class="demo-button"><h1 class="demo-title">Button 按钮</h1><example-block title="按钮功能">
<zan-row>
<zan-col span="24">
<zan-button block="">default</zan-button>
@ -77,7 +77,7 @@
@component-namespace demo {
@b button {
.zan-row {
padding: 0 20px;
padding: 0 15px;
}
.zan-col {
margin-bottom: 10px;

2
docs/examples-dist/card.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-card"><h1 class="demo-title">card</h1><example-block title="基础用法">
<template><section class="demo-card"><h1 class="demo-title">Card 图文组件</h1><example-block title="基础用法">
<zan-card title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余" desc="描述" thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
</zan-card>

2
docs/examples-dist/cell.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-cell"><h1 class="demo-title">cell</h1><example-block title="基础用法">
<template><section class="demo-cell"><h1 class="demo-title">Cell 单元格</h1><example-block title="基础用法">
<zan-cell-group>
<zan-cell title="单元格1" value="单元格1内容">
</zan-cell>

2
docs/examples-dist/checkbox.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-checkbox"><h1 class="demo-title">checkbox</h1><example-block title="基础用法">
<template><section class="demo-checkbox"><h1 class="demo-title">Checkbox 复选框</h1><example-block title="基础用法">
<div class="zan-checkbox-wrapper">
<zan-checkbox v-model="checkbox1">复选框1</zan-checkbox>
</div>

2
docs/examples-dist/datetime-picker.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-datetime-picker"><h1 class="demo-title">datetime-picker</h1><example-block title="基础用法">
<template><section class="demo-datetime"><h1 class="demo-title">Datetime Picker 时间选择</h1><example-block title="基础用法">
<zan-datetime-picker v-model="currentDate" type="datetime" format="yyyy.mm.dd hh时 mm分" :min-hour="minHour" :max-hour="maxHour" :min-date="minDate" @change="handlePickerChange">
</zan-datetime-picker>

11
docs/examples-dist/dialog.vue
View File

@ -1,5 +1,6 @@
<template><section class="demo-dialog"><h1 class="demo-title">dialog</h1><example-block title="消息提示">
<template><section class="demo-dialog"><h1 class="demo-title">Dialog 弹出框</h1><example-block title="消息提示">
<zan-button @click="handleAlertClick">alert</zan-button>
<zan-button @click="handleAlert2Click">无标题alert</zan-button>
@ -36,6 +37,14 @@ export default {
});
},
handleAlert2Click() {
Dialog.alert({
message: '无标题alert'
}).then((action) => {
console.log(action);
});
},
handleConfirmClick() {
Dialog.confirm({
title: 'confirm标题',

2
docs/examples-dist/field.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-field"><h1 class="demo-title">field</h1><example-block title="基础用法">
<template><section class="demo-field"><h1 class="demo-title">Field 输入框</h1><example-block title="基础用法">
<zan-cell-group>
<zan-field type="text" label="用户名：" placeholder="请输入用户名" v-model="username" required></zan-field>
<zan-field type="password" label="密码：" placeholder="请输入密码" required></zan-field>

2
docs/examples-dist/icon.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-icon"><h1 class="demo-title">icon</h1><example-block title="所有Icon">
<template><section class="demo-icon"><h1 class="demo-title">Icon 图标</h1><example-block title="所有Icon">
<zan-row>
<zan-col span="8">
<zan-icon name="qr-invalid"></zan-icon>

2
docs/examples-dist/image-preview.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-image-preview"><h1 class="demo-title">image-preview</h1><example-block title="">
<template><section class="demo-imagePreview"><h1 class="demo-title">ImagePreview 图片预览</h1><example-block title="">
<zan-button @click="handleImagePreview">预览图片</zan-button>

2
docs/examples-dist/layout.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
<template><section class="demo-layout"><h1 class="demo-title">Layout 布局</h1><example-block title="常规用法">
<zan-row>
<zan-col span="8">
<div class="gray">span: 8</div>

2
docs/examples-dist/lazyload.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-lazyload"><h1 class="demo-title">lazyload</h1><example-block title="基础用法">
<template><section class="demo-lazyload"><h1 class="demo-title">Lazyload 图片懒加载</h1><example-block title="基础用法">
<ul class="image-list" ref="container">
<li v-for="img in imageList">
<img class="lazy-img" v-lazy="img">

2
docs/examples-dist/loading.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-loading"><h1 class="demo-title">loading</h1><example-block title="渐变深色spinner">
<template><section class="demo-loading"><h1 class="demo-title">Loading 加载</h1><example-block title="渐变深色spinner">
<zan-loading class="some-customized-class"></zan-loading>
</example-block><example-block title="">

2
docs/examples-dist/panel.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-panel"><h1 class="demo-title">panel</h1><example-block title="基础用法">
<template><section class="demo-panel"><h1 class="demo-title">Panel 面板</h1><example-block title="基础用法">
<zan-panel title="标题" desc="标题描述" status="状态">
<div class="panel-content">
panel内容

2
docs/examples-dist/picker.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-picker"><h1 class="demo-title">picker</h1><example-block title="基础用法">
<template><section class="demo-picker"><h1 class="demo-title">Picker 选择器</h1><example-block title="基础用法">
<zan-picker :columns="pickerColumns" @change="handlePickerChange"></zan-picker>

2
docs/examples-dist/popup.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-popup"><h1 class="demo-title">popup</h1><example-block title="基础用法">
<template><section class="demo-popup"><h1 class="demo-title">Popup 弹出菜单</h1><example-block title="基础用法">
<zan-button block="" @click="popupShow1 = true">从中间弹出popup</zan-button>
<zan-popup v-model="popupShow1" class="zan-popup-1" :lock-on-scroll="true">
从中间弹出popup

2
docs/examples-dist/progress.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-progress"><h1 class="demo-title">progress</h1><example-block title="基础用法">
<template><section class="demo-progress"><h1 class="demo-title">Progress 进度条</h1><example-block title="基础用法">
<div class="demo-progress__wrapper">
<zan-progress class="demo-progress__demo1" :percentage="0"></zan-progress>
</div>

2
docs/examples-dist/quantity.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-quantity"><h1 class="demo-title">quantity</h1><example-block title="基础用法">
<template><section class="demo-quantity"><h1 class="demo-title">Quantity 数量选择</h1><example-block title="基础用法">
<zan-quantity v-model="quantity1"></zan-quantity>
<p class="curr-quantity">当前值：{{ quantity1 }}</p>

2
docs/examples-dist/radio.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-radio"><h1 class="demo-title">radio</h1><example-block title="基础用法">
<template><section class="demo-radio"><h1 class="demo-title">Radio 单选框</h1><example-block title="基础用法">
<div class="zan-radios">
<zan-radio name="1" v-model="radio1">单选框1</zan-radio>
<zan-radio name="2" v-model="radio1">单选框2</zan-radio>

2
docs/examples-dist/search.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-search"><h1 class="demo-title">search</h1><example-block title="基础用法">
<template><section class="demo-search"><h1 class="demo-title">Search 搜索</h1><example-block title="基础用法">
<zan-search placeholder="商品名称" @search="goSearch"></zan-search>

2
docs/examples-dist/steps.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-steps"><h1 class="demo-title">steps</h1><example-block title="基础用法">
<template><section class="demo-steps"><h1 class="demo-title">Steps 步骤条</h1><example-block title="基础用法">
<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
<zan-step>买家下单</zan-step>
<zan-step>商家接单</zan-step>

2
docs/examples-dist/swipe.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
<template><section class="demo-swipe"><h1 class="demo-title">Swipe 轮播</h1><example-block title="基础用法">
<zan-swipe>
<zan-swipe-item v-for="img in images">
<img v-lazy="img" alt="">

2
docs/examples-dist/switch.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
<template><section class="demo-switch"><h1 class="demo-title">Switch 开关</h1><example-block title="基础用法">
<zan-switch class="some-customized-class" v-model="switchState1"></zan-switch>
<div class="demo-switch__text">{{ switchState1 ? ' ON' : 'OFF' }}</div>

2
docs/examples-dist/tab.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-tab"><h1 class="demo-title">tab</h1><example-block title="基础用法">
<template><section class="demo-tab"><h1 class="demo-title">Tab 标签</h1><example-block title="基础用法">
<zan-tabs>
<zan-tab title="选项一">内容一</zan-tab>
<zan-tab title="选项二">内容二</zan-tab>

2
docs/examples-dist/tag.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-tag"><h1 class="demo-title">tag</h1><example-block title="基础用法">
<template><section class="demo-tag"><h1 class="demo-title">Tag 标记</h1><example-block title="基础用法">
<div class="tags-container">
<zan-tag>返现</zan-tag>
<zan-tag plain="">返现</zan-tag>

2
docs/examples-dist/toast.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-toast"><h1 class="demo-title">toast</h1><example-block title="基础用法">
<template><section class="demo-toast"><h1 class="demo-title">Toast 轻提示</h1><example-block title="基础用法">
<zan-button @click="showSimpleToast">普通文字提示</zan-button>
<zan-button @click="showLoadingToast">加载Toast</zan-button>
<zan-button @click="showSuccessToast">成功</zan-button>

8
docs/examples-dist/uploader.vue
View File

@ -1,10 +1,4 @@
<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
<div class="uploader-container">
<zan-uploader :before-read="logContent" :after-read="logContent">
</zan-uploader>
</div>
</example-block><example-block title="自定义上传图标">
<template><section class="demo-uploader"><h1 class="demo-title">Uploader 图片上传</h1><example-block title="">
<div class="uploader-container">
<zan-uploader :after-read="logContent">
<zan-icon name="photograph"></zan-icon>

2
docs/examples-dist/waterfall.vue
View File

@ -1,4 +1,4 @@
<template><section class="demo-waterfall"><h1 class="demo-title">waterfall</h1><example-block title="基础用法">
<template><section class="demo-waterfall"><h1 class="demo-title">Waterfall 瀑布流</h1><example-block title="基础用法">
<div class="waterfall">
<div v-waterfall-lower="loadMore" v-waterfall-upper="loadMoreUpper" waterfall-disabled="isWaterfallDisabled" waterfall-offset="400">
<div class="waterfall-item" v-for="item in list" style="text-align: center;">

2
docs/examples-docs/button.md
View File

@ -2,7 +2,7 @@
@component-namespace demo {
@b button {
.zan-row {
padding: 0 20px;
padding: 0 15px;
}
.zan-col {
margin-bottom: 10px;

21
docs/src/ExamplesApp.vue
View File

@ -1,11 +1,8 @@
<template>
<div class="examples-container">
<router-link class="page-back" v-if="visible" :to="'/'">
<i class="zan-icon zan-icon-arrow"></i>
</router-link>
<router-view></router-view>
<div class="footer">
<img src="https://b.yzcdn.cn/v2/image/wap/zanui-logo.png" alt="logo" class="zanui-logo">
<img src="https://img.yzcdn.cn/upload_files/2017/04/18/FjupTe9o1apJhJr5qR-4ucXqPs7e.png" alt="logo" class="zanui-logo">
</div>
</div>
</template>
@ -51,7 +48,7 @@ export default {
}
.examples-container {
padding-bottom: 10px;
padding-bottom: 54px;
height: 100%;
overflow: auto;
background: #f9fafb;
@ -76,22 +73,26 @@ export default {
}
.demo-title {
font-size: 20px;
margin: 20px auto;
text-align: center;
font-size: 16px;
display: block;
line-height: 1;
padding: 20px 15px 10px;
}
.demo-sub-title {
font-size: 16px;
font-size: 14px;
color: #999;
padding: 10px 15px;
}
.footer {
margin-top: 30px;
width: 100%;
padding-bottom: 15px;
padding: 10px 0 20px;
position: fixed;
bottom: 0;
left: 0;
background: #f9fafb;
}
.zanui-logo {

8
docs/src/components/demo-list.vue
View File

@ -47,8 +47,12 @@ export default {
}
.zanui-title {
font-size: 26px;
color: #333;
padding-top: 40px;
height: 0;
overflow: hidden;
background: url(https://img.yzcdn.cn/upload_files/2017/04/18/FveNmX6aFsQm1jUhcvBBZn6UrZFi.png) center center no-repeat;
background-size: 156px 40px;
margin-bottom: 10px;
}
.zanui-desc {

2
docs/src/components/mobile-nav.vue
View File

@ -59,6 +59,7 @@ export default {
color: #333;
line-height: 56px;
position: relative;
user-select: none;
@m open {
color: #999;
@ -68,6 +69,7 @@ export default {
color: #333;
display: block;
border-top: 1px solid #e5e5e5;
user-select: none;
}
.zan-icon-arrow {

1
docs/src/nav.config.js
View File

@ -1,3 +1,4 @@
/* eslint-disable */
module.exports = {
"zh-CN": [
{