Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 eda864ca 编写于 作者: richard_1015's avatar richard_1015
浏览文件
操作

Merge remote-tracking branch 'origin/v2'

上级 b78df085 90a8c796
隐藏空白更改
内联 并排
Showing with 435 addition and 249 deletion
CHANGELOG.md
浏览文件 @ eda864ca
## 2.2.3
`2020-04-03`
- :sparkles: upd(Uploader)： 新增 beforeUpload 回调钩子函数、新增selfData自定义增加上传的数据 @linrufeng
- :bug: fix(Stepper)：关于Tabbar的问题重复点击一个TAB的时候会报错 #231 @zhenyulei
## 2.2.2
`2020-03-31`
......@@ -13,13 +20,13 @@
* :sparkles: upd(Toast)：优化内部代码，文档优化 @zy19940510
* :sparkles: upd(Progress)：优化内部代码，文档优化 @layman666
* :sparkles: upd(SearchBar、TextInput)：组件优化 @yangxiaolu1993
* :bug: upd(Range)：绑定的值无法更新到组件 #227 @undo03
* :bug: upd(Countdown)：修复异步计算属性无法更新组件 #228 @undo03
* :bug: upd(LuckDraw)：抽奖组件图片链接修复 @Ymm0008
* :bug: upd(Picker)优化自定义数据联动demo @irisSong
* :bug: upd(Popup)：按需加载icon修复 @yangkaixuan
* :bug: upd(TabSelect)：组件tabList数据改变内容不刷新问题修复 @dushoujun
* :bug: upd(TabBar)：更新数据 重新渲染的功能 @zhenyulei
* :bug: fix(Range)：绑定的值无法更新到组件 #227 @undo03
* :bug: fix(Countdown)：修复异步计算属性无法更新组件 #228 @undo03
* :bug: fix(LuckDraw)：抽奖组件图片链接修复 @Ymm0008
* :bug: fix(Picker)优化自定义数据联动demo @irisSong
* :bug: fix(Popup)：按需加载icon修复 @yangkaixuan
* :bug: fix(TabSelect)：组件tabList数据改变内容不刷新问题修复 @dushoujun
* :bug: fix(TabBar)：更新数据 重新渲染的功能 @zhenyulei
## 2.2.1
......
README-zh_CN.md
浏览文件 @ eda864ca
# NutUI 2
![npm version](https://img.shields.io/npm/v/@nutui/nutui.svg) [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=master)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=master)](https://coveralls.io/github/jdf2e/nutui?branch=master) ![license](https://img.shields.io/npm/l/@nutui/nutui.svg)
一套移动端轻量级Vue组件库
一套移动端轻量级组件库
![NutUI](https://img11.360buyimg.com/uba/jfs/t1/11117/21/3608/18942/5c20ab52E35e5a500/02e3c1f89cd3dad1.png)
......
README.md
浏览文件 @ eda864ca
# NutUI 2
![npm version](https://img.shields.io/npm/v/@nutui/nutui.svg) [![Build Status](https://api.travis-ci.org/jdf2e/nutui.svg?branch=master)](https://github.com/jdf2e/nutui/) [![Coverage Status](https://coveralls.io/repos/github/jdf2e/nutui/badge.svg?branch=master)](https://coveralls.io/github/jdf2e/nutui?branch=master) ![license](https://img.shields.io/npm/l/@nutui/nutui.svg)
A light mobile Toolkit based on Vue
A light mobile Toolkit
![NutUI](https://img11.360buyimg.com/uba/jfs/t1/11117/21/3608/18942/5c20ab52E35e5a500/02e3c1f89cd3dad1.png)
......
docs/intro.md
浏览文件 @ eda864ca
# NutUI
NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。
NutUI是一套京东风格的移动端组件库，开发和服务于移动Web界面的企业级前中后台产品。
<div style="margin:30px 0;">
<img src="http://img14.360buyimg.com/uba/jfs/t1/8543/6/11560/22014/5c2c6136E8023ac0a/6abbd9de10999c48.png" width="150" alt="NutUI">
......
package.json
浏览文件 @ eda864ca
{
"name": "@nutui/nutui",
"version": "2.2.2",
"version": "2.2.3",
"description": "一套轻量级移动端Vue组件库",
"typings": "dist/types/index.d.ts",
"main": "dist/nutui.js",
......
src/packages/button/button.scss
浏览文件 @ eda864ca
......@@ -109,6 +109,6 @@
// shape-圆角
&.circle {
border-radius: $btn-border-radius-large
border-radius: $btn-border-radius-large;
}
}
\ No newline at end of file
src/packages/button/button.vue
浏览文件 @ eda864ca
<template>
<button :class="clsStyle" :disabled="disabled" @click="clickHandler">
<nut-icon class="txt-icon" v-if="icon != ''" :type="icon" :color="this.color"></nut-icon>
<span :style="{color:this.color}"><slot></slot></span>
<span :style="{color:this.color}">
<slot></slot>
</span>
</button>
</template>
<script>
import Icon from './../icon/icon.vue';
import Icon from "./../icon/icon.vue";
export default {
name:'nut-button',
name: "nut-button",
props: {
type: {
type: String,
default: ''
default: ""
},
shape: {
type: String,
default: ''
default: ""
},
icon: {
type: String,
default: ''
default: ""
},
disabled: {
type: Boolean
type: Boolean,
default: false
},
block: {
type: Boolean
type: Boolean,
default: false
},
small: {
type: Boolean
type: Boolean,
default: false
},
label: {
type: Boolean
type: Boolean,
default: false
},
color: {
type: String,
default: ''
default: ""
}
},
components: {
'nut-icon': Icon
"nut-icon": Icon
},
computed: {
clsStyle() {
let cls = 'nut-button ';
cls += `${this.type} ${this.shape}`;
cls += this.small ? ' small': '';
cls += this.block ? ' block': '';
cls += this.label ? ' label': '';
if(!this.$slots.default) {
if(this.small) {
cls += ' no-txt-small';
}else {
cls += ' no-txt';
}
}
let cls = `nut-button ${this.type} ${this.shape}
${this.small ? " small" : ""}
${this.block ? " block" : ""}
${this.label ? " label" : ""}
${
!this.$slots.default
? this.small
? "no-txt-small"
: "no-txt"
: ""
}`;
return cls;
}
},
methods: {
clickHandler() {
this.$emit('click');
clickHandler(event) {
// 如果是loading就阻止点击
if (this.disabled) {
return;
}
this.$emit("click", event);
}
}
}
};
</script>
\ No newline at end of file
src/packages/button/demo.vue
浏览文件 @ eda864ca
<template>
<div>
<h4>常规按钮</h4>
<div class="bg">
<nut-button @click="clickHandler">去结算</nut-button>
<nut-button disabled>去结算（disabled）</nut-button>
<div class="gap"></div>
<nut-button small>去结算</nut-button>
<nut-button small disabled>去结算（disabled）</nut-button>
</div>
<h4>常规按钮</h4>
<div class="bg">
<nut-button @click="clickHandler" :disabled="disabled">去结算</nut-button>
<nut-button disabled>去结算（disabled）</nut-button>
</div>
<h4>常规按钮-小</h4>
<div>
<nut-button small>去结算</nut-button>
<nut-button small disabled>去结算（disabled）</nut-button>
</div>
<h4>常规按钮组</h4>
<nut-buttongroup>
<nut-button type="light">重置</nut-button>
<nut-button>确定</nut-button>
</nut-buttongroup>
<h4>常规按钮组</h4>
<nut-buttongroup>
<nut-button type="light">重置</nut-button>
<nut-button>确定</nut-button>
</nut-buttongroup>
<h4>通栏按钮</h4>
<div>
<nut-button block>登录</nut-button>
<div class="gap"></div>
<nut-button block shape="circle">登录</nut-button>
</div>
<h4>通栏按钮</h4>
<div>
<nut-button block>登录</nut-button>
</div>
<h4>圆角按钮-常规Button</h4>
<div class="white-bg">
<nut-button type="red" shape="circle" small>确认收货</nut-button>
<nut-button type="gray" shape="circle" small>查看物流</nut-button>
<nut-button type="default" shape="circle" small>再次购买</nut-button>
<nut-button type="light" shape="circle" small>降价通知</nut-button>
</div>
<h4>通栏按钮-圆角</h4>
<div>
<nut-button block shape="circle">登录</nut-button>
</div>
<h4>圆角按钮-标签Button</h4>
<div class="white-bg">
<nut-button type="primary" shape="circle" small>京东快递</nut-button>
<nut-button type="lightred" shape="circle" small>好评 6.6万</nut-button>
<nut-button type="actived" shape="circle" icon="tick" small>全部 100万</nut-button>
</div>
<h4>圆角按钮-常规Button</h4>
<div class="white-bg">
<nut-button type="red" shape="circle" small>确认收货</nut-button>
<nut-button type="gray" shape="circle" small>查看物流</nut-button>
<nut-button type="default" shape="circle" small>再次购买</nut-button>
<nut-button type="light" shape="circle" small>降价通知</nut-button>
</div>
<h4>图标按钮-小</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" icon="tick" small></nut-button>
</div>
<h4>圆角按钮-标签Button</h4>
<div class="white-bg">
<nut-button type="primary" shape="circle" small>京东快递</nut-button>
<nut-button type="lightred" shape="circle" small>好评 6.6万</nut-button>
<nut-button type="actived" shape="circle" icon="tick" small>全部 100万</nut-button>
</div>
<h4>图标按钮-大</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" icon="tick"></nut-button>
</div>
<h4>图标按钮-小</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" icon="tick" small></nut-button>
</div>
<h4>圆角按钮-商品属性选择Button</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" small>象牙白</nut-button>
<nut-button type="light" shape="circle" small>皓月灰</nut-button>
<nut-button type="dashed" shape="circle" small>晶钻蓝</nut-button>
</div>
<h4>图标按钮-大</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" icon="tick"></nut-button>
</div>
<h4>自定义颜色</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" small color="#fff">象牙白</nut-button>
<nut-button type="primary" shape="circle" small color="rgb(0,0,0)">象牙白</nut-button>
<nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" small></nut-button>
<nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" small>全部 100万</nut-button>
</div>
<h4>圆角按钮-商品属性选择Button</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" small>象牙白</nut-button>
<nut-button type="light" shape="circle" small>皓月灰</nut-button>
<nut-button type="dashed" shape="circle" small>晶钻蓝</nut-button>
</div>
<h4>自定义颜色</h4>
<div class="white-bg">
<nut-button type="actived" shape="circle" small color="#fff">象牙白</nut-button>
<nut-button type="primary" shape="circle" small color="rgb(0,0,0)">象牙白</nut-button>
<nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" small></nut-button>
<nut-button type="actived" shape="circle" icon="tick" color="rgb(0,0,0)" small>全部 100万</nut-button>
</div>
</div>
</template>
<script>
export default {
methods: {
clickHandler() {
alert('我点击了按钮');
}
}
data() {
return {
disabled: false
};
},
methods: {
clickHandler(e) {
// alert("我点击了按钮");
console.log(e, "我点击了按钮");
this.disabled = true;
setTimeout(() => {
this.disabled = false;
}, 2000);
}
}
};
</script>
<style lang="scss" scoped>
.bg {
margin: 0 10px;
margin: 0 10px;
}
.gap {
height: 10px;
height: 10px;
}
.white-bg {
padding: 10px;
background: #fff;
padding: 10px;
background: #fff;
}
</style>
src/packages/button/doc.md
浏览文件 @ eda864ca
......@@ -7,6 +7,7 @@
```html
<nut-button
@click="clickHandler"
:disabled='disabled'
>
去结算
</nut-button>
......@@ -18,6 +19,26 @@
</nut-button>
```
```javascript
export default {
data() {
return {
disabled: false
};
},
methods: {
clickHandler(e) {
// alert("我点击了按钮");
console.log(e, "我点击了按钮");
this.disabled = true;
setTimeout(() => {
this.disabled = false;
}, 2000);
}
}
};
```
常规按钮-小
```html
......@@ -229,23 +250,14 @@
```
```javascript
export default {
methods: {
clickHandler() {
alert('我点击了按钮');
}
}
};
```
## Prop
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| type | 按钮类型，可选类型包含：空、red、gray、light、lightred、primary、default、actived、dashed | String | -
| block | 是否为通栏 | Boolean | false
| small | 是否为小号组件 | Boolean | false
| shape | 形状配置，可选类型：空、circle | String | -
| icon | 按钮前的图标，参考Icon组件 | String | -
| color | 自定义颜色，包含文字与图片颜色 | String | -
| 字段 | 说明 | 类型 | 默认值 |
| ----- | ----------------------------------------------------------------------------------------- | ------- | ------ |
| type | 按钮类型，可选类型包含：空、red、gray、light、lightred、primary、default、actived、dashed | String | - |
| block | 是否为通栏 | Boolean | false |
| small | 是否为小号组件 | Boolean | false |
| shape | 形状配置，可选类型：空、circle | String | - |
| icon | 按钮前的图标，参考Icon组件 | String | - |
| color | 自定义颜色，包含文字与图片颜色 | String | - |
src/packages/luckdraw/demo.vue
浏览文件 @ eda864ca
......@@ -40,7 +40,7 @@
pointerStyle: {
width: '80px',
height: '80px',
backgroundImage: 'url("https://img11.360buyimg.com/imagetools/jfs/t1/106989/15/11126/137350/5e265414E8ee514bc/3456bd0d3a0454da.png")',
backgroundImage: 'url("https://img11.360buyimg.com/imagetools/jfs/t1/89512/11/15244/137408/5e6f15edEf57fa3ff/cb57747119b3bf89.png")',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
},
......@@ -49,32 +49,32 @@
{
id: 'xiaomi',
prizeName: '小米手机',
prizeImg: 'https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/96788/40/337/73706/5dabd0e2E1f166028/7120ca2b421cb0a0.jpg!q70.dpg.webp',
prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/104165/34/15186/96522/5e6f1435E46bc0cb0/d4e878a15bfd9362.png',
},
{
id: 'blue',
prizeName: '蓝牙耳机',
prizeImg: 'https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/65070/13/4325/183551/5d26e23fE09ab2010/a94eaff8242e6c63.jpg!q70.dpg.webp',
prizeImg: 'https://img13.360buyimg.com/imagetools/jfs/t1/91864/11/15108/139003/5e6f146dE1c7b511d/1ddc5aa6e502060a.jpg',
},
{
id: 'apple',
prizeName: 'apple watch',
prizeImg: 'https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/105083/3/4010/126031/5de4aa51E1c7fefc6/0288f4cf3016e061.jpg!q70.dpg.webp',
prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/105385/19/15140/111093/5e6f1506E48bd0dfb/829a98a8cdb4c27f.png',
},
{
id: 'fruit',
prizeName: '迪士尼苹果',
prizeImg: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/47486/35/13399/356858/5da3cde2E9b3ec40f/3b3a56d54d5db565.jpg!q80.dpg.webp',
prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/108308/11/8890/237603/5e6f157eE489cccf1/26e0437cfd93b9c8.png',
},
{
id: 'fish',
prizeName: '海鲜套餐',
prizeImg: 'https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/109529/24/1330/283533/5dfc836fE33d8ce6b/372adb638802710a.jpg!q70.dpg.webp',
prizeImg: 'https://img14.360buyimg.com/imagetools/jfs/t1/90507/38/15165/448364/5e6f15b4E5df0c718/4bd4c3d375eec312.png',
},
{
id: 'thanks',
prizeName: '谢谢参与',
prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/104502/28/10892/5123/5e265414Ec167392c/2831c6155895f33d.png',
prizeImg: 'https://img11.360buyimg.com/imagetools/jfs/t1/96116/38/15085/5181/5e6f15d1E48e31d30/71353b61dff705d4.png',
}
],
// 转动圈数
......
src/packages/noticebar/__test__/noticebar.spec.js
浏览文件 @ eda864ca
......@@ -2,40 +2,40 @@ import { shallowMount } from '@vue/test-utils'
import NoticeBar from '../noticebar.vue'
import Vue from 'vue';
describe('noticebar.vue',() => {
describe('noticebar.vue', () => {
const wrapper = shallowMount(NoticeBar, {
propsData:{
text:"华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
propsData: {
text: "华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
}
});
it('禁用滚动',() => {
it('禁用滚动', () => {
wrapper.setProps({
scrollable:false
scrollable: false
});
return Vue.nextTick().then(function() {
return Vue.nextTick().then(function () {
// console.log(wrapper.find('.content').classes('van-ellipsis'),'test');
expect(wrapper.find('.content').classes('van-ellipsis')).toBe(true);
expect(wrapper.find('.content').classes('nut-ellipsis')).toBe(true);
})
});
it('通告栏模式--关闭模式',() => {
it('通告栏模式--关闭模式', () => {
wrapper.setProps({
closeMode:true
closeMode: true
});
return Vue.nextTick().then(function() {
return Vue.nextTick().then(function () {
expect(wrapper.find('.right-icon').isVisible()).toBe(true);
})
})
it('左边图标不显示',() => {
it('左边图标不显示', () => {
wrapper.setProps({
leftIcon:'close',
leftIcon: 'close',
});
return Vue.nextTick().then(function() {
return Vue.nextTick().then(function () {
expect(wrapper.find('.left-icon').exists()).toBe(false);
})
})
......
src/packages/noticebar/noticebar.scss
浏览文件 @ eda864ca
......@@ -50,43 +50,36 @@
.content {
position: absolute;
white-space: nowrap;
&.van-ellipsis {
&.nut-ellipsis {
max-width: 100%;
}
// &:hover {
// animation: van-notice-bar-play linear infinite both paused;
// }
}
// 只跑一次
.play {
animation: van-notice-bar-play linear both running;
animation: nut-notice-bar-play linear both running;
}
.play-infinite {
animation: van-notice-bar-play-infinite linear infinite both running;
animation: nut-notice-bar-play-infinite linear infinite both running;
}
.play-vertical {
animation: van-notice-bar-play-vertical linear infinite both running;
animation: nut-notice-bar-play-vertical linear infinite both running;
}
// .play-stop {
// animation: van-notice-bar-play-infinite linear infinite both paused;
// }
}
@keyframes van-notice-bar-play {
@keyframes nut-notice-bar-play {
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes van-notice-bar-play-infinite {
@keyframes nut-notice-bar-play-infinite {
to {
transform: translate3d(-100%, 0, 0);
}
}
// 垂直方向的滚动
@keyframes van-notice-bar-play-vertical {
@keyframes nut-notice-bar-play-vertical {
to {
// transform: translate3d(0, 40px, 0);
transform: translateY(40px);
}
}
src/packages/noticebar/noticebar.vue
浏览文件 @ eda864ca
......@@ -11,7 +11,7 @@
<div
ref="content"
class="content"
:class="[ animationClass, { 'van-ellipsis': !scrollable }]"
:class="[ animationClass, { 'nut-ellipsis': !scrollable }]"
:style="contentStyle"
@animationend="onAnimationEnd"
@webkitAnimationEnd="onAnimationEnd"
......@@ -24,7 +24,7 @@
<g fill-rule="evenodd">
<path
d="M.44 2.56A1.5 1.5 0 1 1 2.56.44l27 27a1.5 1.5 0 1 1-2.12 2.12L15 17.123 2.56 29.56A1.5 1.5 0 1 1 .44 27.44L12.878 15 .44 2.56zM27.44.44a1.5 1.5 0 1 1 2.12 2.12l-9 9a1.5 1.5 0 1 1-2.12-2.12l9-9z"
></path>
/>
</g>
</svg>
</div>
......@@ -144,11 +144,9 @@ export default {
this.firstRound = false;
this.$nextTick(() => {
// this.timer = setTimeout(() => {
this.duration =
((this.offsetWidth + this.wrapWidth) / 375) * this.speed;
this.animationClass = "play-infinite";
// }, 10);
});
}
}
......
src/packages/range/range.vue
浏览文件 @ eda864ca
......@@ -107,6 +107,9 @@ export default {
watch: {
range() {
this.init();
},
rangeValues() {
this.init();
}
},
computed: {
......
src/packages/signature/demo.vue
浏览文件 @ eda864ca
......@@ -53,8 +53,7 @@ export default {
<style lang="scss">
.demo-tips{
padding: 0.22rem 0;
font-size: 0.24rem;
font-size: 12px;
}
.margin-top{
margin-top: 30px;
......
src/packages/tabbar/demo.vue
浏览文件 @ eda864ca
<template>
<div>
<h4>图标文本标签栏</h4>
<nut-tabbar @tab-switch="tabSwitch1" type="card" :tabbarList="tabList1"></nut-tabbar>
<nut-tabbar @tab-switch="tabSwitch1" type="card" :tabbar-list="tabList1"></nut-tabbar>
<h4>带有tips的文本标签栏</h4>
<nut-tabbar @tab-switch="tabSwitch2" type="card" :tabbarList="tabList2"></nut-tabbar>
<nut-tabbar @tab-switch="tabSwitch2" type="card" :tabbar-list="tabList2"></nut-tabbar>
<h4>固定底部，可跳转页面</h4>
<nut-tabbar @tab-switch="tabSwitch3" :tabbarList="tabList3" :bottom="true" class="my-tabbar">
<nut-tabbar @tab-switch="tabSwitch3" :tabbar-list="tabList3" :bottom="true" class="my-tabbar">
</nut-tabbar>
</div>
</template>
......
src/packages/tabbar/doc.md
浏览文件 @ eda864ca
......@@ -6,7 +6,7 @@
<nut-tabbar
@tab-switch="tabSwitch1"
type="card"
:tabbarList="tabList1"
:tabbar-list="tabList1"
></nut-tabbar>
```
```javascript
......@@ -48,7 +48,7 @@ export default {
<nut-tabbar
@tab-switch="tabSwitch2"
type="card"
:tabbarList="tabList2"
:tabbar-list="tabList2"
>
</nut-tabbar>
```
......@@ -89,7 +89,7 @@ export default {
```html
<nut-tabbar
@tab-switch="tabSwitch3"
:tabbarList="tabList3"
:tabbar-list="tabList3"
:bottom="true"
>
</nut-tabbar>
......@@ -158,7 +158,7 @@ export default {
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| type | 页签栏的样式 based/card | String | based
| tabbarList | 渲染数据 | Array | --
| tabbar-list | 渲染数据 ，兼容 tabbar-list 和 tabbarList| Array | []
| tabTitle | 标签页的标题 | String | --
| curr | 是否为选中的标签页 | Booble | false
| icon | 标签页显示的图片 | String | --
......
src/packages/tabbar/tabbar.vue
浏览文件 @ eda864ca
......@@ -58,6 +58,7 @@ export default {
}else{
item.curr = false;
}
return item;
})
this.tabList =newArr;
this.$emit('tab-switch',value,index);
......
src/packages/timeline/demo.vue
浏览文件 @ eda864ca
......@@ -44,7 +44,7 @@
<nut-timeline>
<nut-timelineitem>
<div slot="dot">
<svg t="1585579204788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1432" width="15" height="15"><path d="M512 512m-460.8 0a460.8 460.8 0 1 0 921.6 0 460.8 460.8 0 1 0-921.6 0Z" fill="#5AE5CA" p-id="1433"></path><path d="M709.12 248.32c4.096-17.408-6.656-34.816-24.064-38.912-17.408-4.096-34.816 6.656-38.912 24.064s7.68 62.976 17.92 65.024c10.24 3.072 40.96-32.768 45.056-50.176zM761.856 303.616c-5.12-16.896-23.552-26.624-40.448-21.504-16.896 5.12-50.688 37.888-47.616 48.128 3.072 10.24 49.152 18.944 66.048 13.824 17.408-5.12 27.136-23.04 22.016-40.448zM686.08 365.568h-61.44l-17.92-42.496c-5.632-13.312-18.944-22.016-33.28-22.016H450.56c-14.336 0-27.648 8.704-33.28 22.016L399.36 365.568H337.92c-39.424 0-71.68 32.256-71.68 71.68v214.528c0 39.424 32.256 71.68 71.68 71.68h348.16c39.424 0 71.68-32.256 71.68-71.68V437.248c0-39.424-32.256-71.68-71.68-71.68z m-141.312 300.544c-67.072 17.92-136.192-21.504-154.624-88.576-17.92-67.072 21.504-136.192 88.576-154.624 67.072-17.92 136.192 21.504 154.624 88.576 18.432 67.072-21.504 136.192-88.576 154.624zM687.616 460.8c-13.824 0-25.088-11.264-25.088-25.088s11.264-25.088 25.088-25.088 25.088 11.264 25.088 25.088-11.264 25.088-25.088 25.088z" fill="#FFFFFF" p-id="1434"></path><path d="M417.4574 550.456345a94.716211 94.716211 0 1 0 189.023149-12.445558 94.716211 94.716211 0 1 0-189.023149 12.445558Z" fill="#FFFFFF" p-id="1435"></path></svg>
<svg t="1585579204788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1432" width="20" height="20"><path d="M512 512m-460.8 0a460.8 460.8 0 1 0 921.6 0 460.8 460.8 0 1 0-921.6 0Z" fill="#5AE5CA" p-id="1433"></path><path d="M709.12 248.32c4.096-17.408-6.656-34.816-24.064-38.912-17.408-4.096-34.816 6.656-38.912 24.064s7.68 62.976 17.92 65.024c10.24 3.072 40.96-32.768 45.056-50.176zM761.856 303.616c-5.12-16.896-23.552-26.624-40.448-21.504-16.896 5.12-50.688 37.888-47.616 48.128 3.072 10.24 49.152 18.944 66.048 13.824 17.408-5.12 27.136-23.04 22.016-40.448zM686.08 365.568h-61.44l-17.92-42.496c-5.632-13.312-18.944-22.016-33.28-22.016H450.56c-14.336 0-27.648 8.704-33.28 22.016L399.36 365.568H337.92c-39.424 0-71.68 32.256-71.68 71.68v214.528c0 39.424 32.256 71.68 71.68 71.68h348.16c39.424 0 71.68-32.256 71.68-71.68V437.248c0-39.424-32.256-71.68-71.68-71.68z m-141.312 300.544c-67.072 17.92-136.192-21.504-154.624-88.576-17.92-67.072 21.504-136.192 88.576-154.624 67.072-17.92 136.192 21.504 154.624 88.576 18.432 67.072-21.504 136.192-88.576 154.624zM687.616 460.8c-13.824 0-25.088-11.264-25.088-25.088s11.264-25.088 25.088-25.088 25.088 11.264 25.088 25.088-11.264 25.088-25.088 25.088z" fill="#FFFFFF" p-id="1434"></path><path d="M417.4574 550.456345a94.716211 94.716211 0 1 0 189.023149-12.445558 94.716211 94.716211 0 1 0-189.023149 12.445558Z" fill="#FFFFFF" p-id="1435"></path></svg>
</div>
<div slot="title">2020-09-18</div>
<div class="content">您提交了订单，请等待系统确认</div>
......@@ -80,12 +80,5 @@ export default {
</script>
<style lang="scss" scoped>
.content{
padding-bottom: 20px;
}
svg{
width: 10px;
height: 10px;
vertical-align: top;
}
</style>
src/packages/timeline/timeline.scss
浏览文件 @ eda864ca
......@@ -11,69 +11,72 @@
color:#333;
.timelineitem-list{
position: relative;
padding-bottom: 10px;
display: flex;
.timelineitem-point{
position: absolute;
left: 0px;
top: 2px;
.point-icon{
width: 7px;
height: 7px;
border: 1px solid #f00;
border-radius: 50%;
&.circle-icon{
background: #f00;
.timelineitem-left{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
.timelineitem-point{
position: relative;
width: 9px;
.point-icon{
width: 7px;
height: 7px;
border: 1px solid #f00;
border-radius: 50%;
&.circle-icon{
background: #f00;
}
&.hollow-icon{
background: transparent;
}
}
&.hollow-icon{
.custom-icon{
position: absolute;
left: 50%;
margin-left: -20px;
width: 40px;
height: auto;
overflow: hidden;
background: transparent;
text-align: center;
}
}
.custom-icon{
// width: 9px;
// height: 9px;
overflow: hidden;
background: transparent;
.timelineitem-line{
width: 1px;
height: 100%;
background: #C2C2C2;
}
}
.timelineitem-title{
margin-bottom: 8px;
padding-left: 13px;
line-height: 13px;
position: relative;
.time{
font-size: 12px;
color: #666;
.timelineitem-right{
padding-bottom: 20px;
.timelineitem-title{
margin-bottom: 8px;
padding-left: 13px;
line-height: 13px;
position: relative;
.time{
font-size: 12px;
color: #666;
}
}
}
.timelineitem-content{
padding-left: 13px;
}
.timelineitem-content{
padding-left: 13px;
}
}
}
}
&.left-border{
&:before{
position: absolute;
top: 10px;
left: 4px;
content: '';
width: 1px;
height: calc(100% - 8px);
background: #C2C2C2;
};
}
&:last-child{
&.left-border{
&:before{
width: 0px;
};
.timelineitem-line{
height: 0 !important;
}
}
}
......
src/packages/timelineitem/timelineitem.vue
浏览文件 @ eda864ca
......@@ -3,22 +3,29 @@
<div class="timelineitem-list-box">
<div :class="['timelineitem-list']">
<div class="timelineitem-point">
<div v-if="!isCustomPoint" :class="[pointClass,'point-icon']" :style="pointStyle"></div>
<div class="timelineitem-left">
<div class="timelineitem-point">
<div v-if="!isCustomPoint" :class="[pointClass,'point-icon']" :style="pointStyle"></div>
<div v-else class="custom-icon">
<slot name="dot"></slot>
<div v-else class="custom-icon">
<slot name="dot"></slot>
</div>
</div>
<div class="timelineitem-line"></div>
</div>
<div class="timelineitem-title" v-if="isShowTitle">
<div class="time">
<slot name="title"></slot>
<div class="timelineitem-right">
<div class="timelineitem-title" v-if="isShowTitle">
<div class="time">
<slot name="title"></slot>
</div>
</div>
</div>
<div class="timelineitem-content">
<slot></slot>
<div class="timelineitem-content">
<slot></slot>
</div>
</div>
</div>
</div>
......@@ -59,8 +66,6 @@ export default {
mounted(){
this.isCustomPoint = this.$slots.dot?true:false
console.log(this.$parent.$el)
},
methods: {
}
......
src/packages/uploader/demo.vue
浏览文件 @ eda864ca
......@@ -4,7 +4,7 @@
<div>
<nut-cell>
<span slot="title">
<nut-uploader
<nut-uploader
:name="name"
:url="url"
:xhrState="stateNum"
......@@ -115,7 +115,40 @@
<div slot="desc"></div>
</nut-cell>
</div>
<p>上传图片前处理图片内容</p>
<nut-cell>
<span slot="title">
<nut-uploader
:beforeUpload="test"
:name="name"
:url="url"
:xhrState="stateNum"
:acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
@success="demo1Success"
@failure="demo1Fail"
@start="demo1UploadStart"
@showMsg="showMsg"
><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
</span>
<div slot="desc"></div>
</nut-cell>
<p>自定义增加上传图片数据</p>
<nut-cell>
<span slot="title">
<nut-uploader
:selfData="selfData"
:name="name"
:url="url"
:xhrState="stateNum"
:acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
@success="demo1Success"
@failure="demo1Fail"
@start="demo1UploadStart"
@showMsg="showMsg"
><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>
</span>
<div slot="desc"></div>
</nut-cell>
<transition name="fade">
<div class="img-outbox">
<img class="img-box" v-if="previewImg" :src="previewImg" alt>
......@@ -129,6 +162,9 @@ export default {
components: {},
data() {
return {
selfData:{
test1:'自定义数据'
},
url: "https://my-json-server.typicode.com/linrufeng/demo/posts",
demo1Name: "点击选择文件",
demo2Name: "点击选择文件",
......@@ -151,6 +187,13 @@ export default {
};
},
methods: {
test(event){
console.log(event,'可以处理input选择的内容')
return {
event:event,
data:''
}
},
demo1UploadStart() {
this.demo1Name = "上传中...";
this.progressNum1 = 0;
......
src/packages/uploader/doc.md
浏览文件 @ eda864ca
......@@ -140,6 +140,69 @@ export default {
</nut-uploader>
<nut-progress :percentage="progressNum" :showText="false" strokeWidth="24"/>
```
预览上传图片
```html
<nut-uploader
:name="name"
:url="url"
:xhrState="stateNum"
:isPreview="true"
@success="demoSuccess"
@fail="demoFail"
@preview="preview"
@showMsg="showMsg1"
>
<nut-button small>上传</nut-button>
</nut-uploader>
```
```js
preview(file) {
this.previewImg = file;
},
```
上传图片前处理图片内容
```html
<nut-uploader
:beforeUpload="test"
:name="name"
:url="url"
:xhrState="stateNum"
:acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
@success="demo1Success"
@failure="demo1Fail"
@start="demo1UploadStart"
@showMsg="showMsg"
><nut-button small>上传图片前处理图片内容</nut-button></nut-uploader>
```
```js
test($ev){
console.log($ev,'可以处理input选择的内容')
return {
event:$ev,
data:''
}
},
```
自定义增加上传图片数据
```html
<nut-uploader
:selfData="selfData"
:name="name"
:url="url"
:xhrState="stateNum"
:acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
@success="demo1Success"
@failure="demo1Fail"
@start="demo1UploadStart"
@showMsg="showMsg"
><nut-button small>自定义增加上传图片数据</nut-button></nut-uploader>
```
## Prop
......@@ -158,6 +221,8 @@ export default {
| limitError | 文件大小超过限制提示文案 | String | "文件大小超过限制"
| xmlError | 浏览器不支持本组件时的提示文案 | String | "对不起，您的浏览器不支持本组件！"
| withCredentials | 支持发送 cookie 凭证信息 | Boolean | fasle
| beforeUpload | 上传前的函数需要返回一个对象 | Function | {event:$event} $event为点击事件必传
| selfData | 自定义增加上传的数据 | Object | {}
## Event
......@@ -169,3 +234,14 @@ export default {
| success | 上传成功 | 文件、responseText
| failure | 上传失败 | 文件、responseText
| showMsg | 组件抛出信息的处理函数 | 组件抛出的提示信息
## tips
使用 beforeUpload 一定要返回一个JSON 对象且 event 为必传字段
```js
beforeUpload($e){
return {
event:$e
}
}
```
src/packages/uploader/uploader.vue
浏览文件 @ eda864ca
......@@ -37,6 +37,12 @@ export default {
return ["image/jpeg", "image/png", "image/gif", "image/bmp"];
}
},
selfData:{
type:Object,
default(){
return {}
}
},
attach: {
type: Object,
default() {
......@@ -51,7 +57,10 @@ export default {
},
changeEvtCallback: {
type: Function
},
},
beforeUpload:{
type: Function
},
xhrState: {
type: Number,
default: 200
......@@ -115,9 +124,8 @@ export default {
}
};
},
upload($event) {
uploadData($event,selfData={}){
const tar = $event.target;
if (!this.url) {
this.$emit("showMsg", "请先配置上传url");
this.$emit("afterChange", tar, $event);
......@@ -150,14 +158,35 @@ export default {
for (let key of Object.keys(this.attach)) {
formData.append(key, this.attach[key]);
}
let finialyOutData = Object.assign(this.selfData,selfData);
if(finialyOutData){
for(let key in finialyOutData){
formData.append(key, finialyOutData[key]);
}
}
opt.formData = formData;
opt.headers = this.headers || {};
opt.showMsgFn = msg => {
this.$emit("showMsg", msg);
};
new Uploader(opt);
this.$emit("afterChange", tar, $event);
},
async upload($event) {
if(typeof this.beforeUpload === 'function'){
let promise =new Promise((reslove,reject)=>{
reslove(this.beforeUpload($event))
})
let resData = await promise;
if(typeof resData === 'object' && typeof resData.event === 'object'){
this.uploadData(resData.event,resData.data)
}else{
console.warn('resData： 必须包含 event字段且为input $event 的事件对象')
}
}else{
this.uploadData($event)
}
}
}
};
......
src/utils/uploader.js
浏览文件 @ eda864ca
......@@ -33,7 +33,7 @@ class IdaUploader {
return function() {};
}
}
showMsg (msg) {
showMsg (msg) {
if (typeof(this.options.showMsgFn)=='function') {
this.options.showMsgFn(msg);
} else {
......@@ -44,21 +44,21 @@ class IdaUploader {
if(Array.isArray(file)){
for(let key in file){
if (this.options.maxSize && (file[key].size > this.options.maxSize)) {
this.showMsg(this.limitError);
this.showMsg(this.options.limitError);
return false;
}
if (this.options.acceptType.length && this.options.acceptType.indexOf(file[key].type) === -1) {
this.showMsg(this.typeError);
this.showMsg(this.options.typeError);
return false;
}
}
}else{
if (this.options.maxSize && (file.size > this.options.maxSize)) {
this.showMsg(this.limitError);
this.showMsg(this.options.limitError);
return false;
}
if (this.options.acceptType.length && this.options.acceptType.indexOf(file.type) === -1) {
this.showMsg(this.typeError);
this.showMsg(this.options.typeError);
return false;
}
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或