merge: merge master
This commit is contained in:
jiangruowei
Vendored
+10
-10
File diff suppressed because one or more lines are too long
Vendored
+1
-1
@@ -1 +1 @@
|
||||
webpackJsonp([1],{234:function(t,e,a){a(438);var i=a(0)(a(248),a(384),null,null);t.exports=i.exports},248:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(26),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},294:function(t,e,a){e=t.exports=a(15)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},384:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},438:function(t,e,a){var i=a(294);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(27)("1517d9c0",i,!0)}});
|
||||
webpackJsonp([1],{259:function(t,e,a){a(480);var i=a(0)(a(273),a(422),null,null);t.exports=i.exports},273:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(30),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},322:function(t,e,a){e=t.exports=a(16)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},422:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},480:function(t,e,a){var i=a(322);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(31)("1517d9c0",i,!0)}});
|
||||
Vendored
+6
-6
File diff suppressed because one or more lines are too long
Vendored
+6
-6
File diff suppressed because one or more lines are too long
@@ -10,6 +10,11 @@
|
||||
<zan-field type="text" placeholder="请输入用户名"></zan-field>
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block><example-block title="带border的输入框">
|
||||
<div class="zan-field-wrapper">
|
||||
<zan-field type="text" placeholder="请输入用户名" border=""></zan-field>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="禁用的输入框">
|
||||
<zan-cell-group>
|
||||
<zan-field label="用户名：" type="text" placeholder="请输入用户名" v-model="username" disabled></zan-field>
|
||||
@@ -21,7 +26,15 @@
|
||||
</zan-cell-group>
|
||||
|
||||
</example-block></section></template>
|
||||
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.zan-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
<template><section class="demo-swipe"><h1 class="demo-title">swipe</h1><example-block title="基础用法">
|
||||
<zan-swipe>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.zan-swipe {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);</script>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template><section class="demo-uploader"><h1 class="demo-title">uploader</h1><example-block title="基础用法">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader :before-read="logContent" @file-readed="logContent">
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block><example-block title="自定义上传图标">
|
||||
<div class="uploader-container">
|
||||
<zan-uploader @file-readed="logContent">
|
||||
<zan-icon name="camera"></zan-icon>
|
||||
</zan-uploader>
|
||||
</div>
|
||||
|
||||
</example-block></section></template>
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,3 +1,13 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b field {
|
||||
.zan-field-wrapper {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
@@ -38,6 +48,18 @@ export default {
|
||||
```
|
||||
:::
|
||||
|
||||
### 带border的输入框
|
||||
|
||||
传入一个`border`属性。
|
||||
|
||||
:::demo 带border的输入框
|
||||
```html
|
||||
<div class="zan-field-wrapper">
|
||||
<zan-field type="text" placeholder="请输入用户名" border></zan-field>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### 禁用的输入框
|
||||
|
||||
传入`disabled`属性即可。
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<style>
|
||||
@component-namespace demo {
|
||||
@b swipe {
|
||||
.zan-swipe {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Swipe
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<zan-swipe>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
<zan-swipe-item>
|
||||
<img src="https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp" alt="">
|
||||
</zan-swipe-item>
|
||||
</zan-swipe>
|
||||
```
|
||||
:::
|
||||
@@ -0,0 +1,54 @@
|
||||
<style>
|
||||
.uploader-container {
|
||||
padding: 5px 15px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
logContent(file) {
|
||||
console.log(file)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
## Uploader 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
:::demo 基础用法
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<zan-uploader
|
||||
:before-read="logContent"
|
||||
@file-readed="logContent">
|
||||
</zan-uploader>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
### 自定义上传图标
|
||||
:::demo 自定义上传图标
|
||||
```html
|
||||
<div class="uploader-container">
|
||||
<zan-uploader @file-readed="logContent">
|
||||
<zan-icon name="camera"></zan-icon>
|
||||
</zan-uploader>
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | String | 'dataUrl' | 'dataUrl','text' |
|
||||
| disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | boolean | false | |
|
||||
| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件。 | Function | | |
|
||||
| file-readed | 文件读完之后出发此事件，参数为{name:'文件名',type:'文件类型',size:'文件大小',content:'读的内容'} | Function | | |
|
||||
|
||||
### Slot
|
||||
|
||||
| name | 描述 |
|
||||
|-----------|-----------|
|
||||
| - | 自定义上传显示图标 |
|
||||
@@ -106,8 +106,8 @@
|
||||
"title": "Toast"
|
||||
},
|
||||
{
|
||||
"path": "/img-uploader",
|
||||
"title": "Img Uploader"
|
||||
"path": "/uploader",
|
||||
"title": "Uploader"
|
||||
},
|
||||
{
|
||||
"path": "/picker",
|
||||
|
||||
Reference in New Issue
Block a user