[breaking change] Noticebar: rename to NoticeBar

This commit is contained in:
陈嘉涵 2018-07-30 20:36:42 +08:00
parent 605da749e5
commit 6927efce64
18 changed files with 55 additions and 65 deletions

View File

@ -71,7 +71,7 @@
- Stepper 组件 size 属性支持 small middle large [\#306](https://github.com/youzan/vant-weapp/pull/306) ([jerryni](https://github.com/jerryni)) - Stepper 组件 size 属性支持 small middle large [\#306](https://github.com/youzan/vant-weapp/pull/306) ([jerryni](https://github.com/jerryni))
- 优化 Field 组件在列表中输入框表现 [\#296](https://github.com/youzan/vant-weapp/pull/296) ([pangxie1991](https://github.com/pangxie1991)) - 优化 Field 组件在列表中输入框表现 [\#296](https://github.com/youzan/vant-weapp/pull/296) ([pangxie1991](https://github.com/pangxie1991))
- datepicker 使用原生 picker-view 重写 [\#294](https://github.com/youzan/vant-weapp/pull/294) ([realywithoutname](https://github.com/realywithoutname)) - datepicker 使用原生 picker-view 重写 [\#294](https://github.com/youzan/vant-weapp/pull/294) ([realywithoutname](https://github.com/realywithoutname))
- Noticebar 组件支持动态更新text [\#314](https://github.com/youzan/vant-weapp/pull/314) ([rex-zsd](https://github.com/rex-zsd)) - NoticeBar 组件支持动态更新text [\#314](https://github.com/youzan/vant-weapp/pull/314) ([rex-zsd](https://github.com/rex-zsd))
- datetime-picker 组件在 demo 中增加 datetime 示例入口 [\#313](https://github.com/youzan/vant-weapp/pull/313) ([rex-zsd](https://github.com/rex-zsd)) - datetime-picker 组件在 demo 中增加 datetime 示例入口 [\#313](https://github.com/youzan/vant-weapp/pull/313) ([rex-zsd](https://github.com/rex-zsd))
@ -168,7 +168,7 @@
**Bug Fixes** **Bug Fixes**
- 修复 Field 组件圆角输入框,边框显示问题 [\#134](https://github.com/youzan/vant-weapp/pull/134) ([pangxie1991](https://github.com/pangxie1991)) - 修复 Field 组件圆角输入框,边框显示问题 [\#134](https://github.com/youzan/vant-weapp/pull/134) ([pangxie1991](https://github.com/pangxie1991))
- 修复 Noticebar 组件元素查询返回空,导致报错的问题 [\#130](https://github.com/youzan/vant-weapp/pull/130) ([pangxie1991](https://github.com/pangxie1991)) - 修复 NoticeBar 组件元素查询返回空,导致报错的问题 [\#130](https://github.com/youzan/vant-weapp/pull/130) ([pangxie1991](https://github.com/pangxie1991))
## [v2.4.5](https://github.com/youzan/vant-weapp/tree/v2.4.5) (2018-02-07) ## [v2.4.5](https://github.com/youzan/vant-weapp/tree/v2.4.5) (2018-02-07)
[Full Changelog](https://github.com/youzan/vant-weapp/compare/v2.4.4...v2.4.5) [Full Changelog](https://github.com/youzan/vant-weapp/compare/v2.4.4...v2.4.5)
@ -302,7 +302,7 @@
**Improvements** **Improvements**
- \[new feature\] 增加发布脚本 [\#35](https://github.com/youzan/vant-weapp/pull/35) ([pangxie1991](https://github.com/pangxie1991)) - \[new feature\] 增加发布脚本 [\#35](https://github.com/youzan/vant-weapp/pull/35) ([pangxie1991](https://github.com/pangxie1991))
- \[new feature\] 增加Capsule, Noticebar, Popup修正Dialog在非最外层情况下引入的样式问题更新readme。 [\#32](https://github.com/youzan/vant-weapp/pull/32) ([everywill](https://github.com/everywill)) - \[new feature\] 增加Capsule, NoticeBar, Popup修正Dialog在非最外层情况下引入的样式问题更新readme。 [\#32](https://github.com/youzan/vant-weapp/pull/32) ([everywill](https://github.com/everywill))
- \[new feature\] 增加单选 和一个验证码的样式 [\#30](https://github.com/youzan/vant-weapp/pull/30) ([muzea](https://github.com/muzea)) - \[new feature\] 增加单选 和一个验证码的样式 [\#30](https://github.com/youzan/vant-weapp/pull/30) ([muzea](https://github.com/muzea))
- \[new feature\] Docs: 文档更新 [\#29](https://github.com/youzan/vant-weapp/pull/29) ([pangxie1991](https://github.com/pangxie1991)) - \[new feature\] Docs: 文档更新 [\#29](https://github.com/youzan/vant-weapp/pull/29) ([pangxie1991](https://github.com/pangxie1991))

View File

@ -89,7 +89,7 @@ Component({
_init: function _init() { _init: function _init() {
var _this = this; var _this = this;
wx.createSelectorQuery().in(this).select('.van-noticebar__content').boundingClientRect(function (rect) { wx.createSelectorQuery().in(this).select('.van-notice-bar__content').boundingClientRect(function (rect) {
if (!rect || !rect.width) { if (!rect || !rect.width) {
return; return;
} }
@ -97,7 +97,7 @@ Component({
width: rect.width width: rect.width
}); });
wx.createSelectorQuery().in(_this).select('.van-noticebar__content-wrap').boundingClientRect(function (rect) { wx.createSelectorQuery().in(_this).select('.van-notice-bar__content-wrap').boundingClientRect(function (rect) {
if (!rect || !rect.width) { if (!rect || !rect.width) {
return; return;
} }

View File

@ -1,13 +1,13 @@
<view <view
wx:if="{{ show }}" wx:if="{{ show }}"
class="van-noticebar {{ hasRightIcon ? 'van-noticebar--within-icon' : '' }}" class="van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
style="color: {{ color }};background-color: {{ backgroundColor }}" style="color: {{ color }};background-color: {{ backgroundColor }}"
> >
<view wx:if="{{ leftIcon }}" class="van-noticebar__left-icon"> <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
<image src="{{ leftIcon }}" /> <image src="{{ leftIcon }}" />
</view> </view>
<view class="van-noticebar__content-wrap"> <view class="van-notice-bar__content-wrap">
<view class="van-noticebar__content" animation="{{ animationData }}"> <view class="van-notice-bar__content" animation="{{ animationData }}">
{{ text }} {{ text }}
</view> </view>
</view> </view>
@ -15,7 +15,7 @@
<block wx:if="{{ mode }}"> <block wx:if="{{ mode }}">
<van-icon <van-icon
wx:if="{{ mode === 'closeable' }}" wx:if="{{ mode === 'closeable' }}"
class="van-noticebar__right-icon" class="van-notice-bar__right-icon"
type="close" type="close"
bindtap="_handleButtonClick" bindtap="_handleButtonClick"
/> />
@ -24,7 +24,7 @@
url="{{ url }}" url="{{ url }}"
open-type="{{ openType }}" open-type="{{ openType }}"
> >
<van-icon class="van-noticebar__right-icon" type="arrow" /> <van-icon class="van-notice-bar__right-icon" type="arrow" />
</navigator> </navigator>
</block> </block>

View File

@ -1 +1 @@
.van-noticebar{display:-webkit-box;display:flex;padding:9px 10px;font-size:12px;line-height:1.5}.van-noticebar--within-icon{position:relative;padding-right:30px}.van-noticebar__left-icon{height:18px;min-width:20px;padding-top:1px;box-sizing:border-box}.van-noticebar__left-icon>image{width:16px;height:16px}.van-noticebar__right-icon{position:absolute;top:10px;right:10px;font-size:15px;line-height:1}.van-noticebar__content-wrap{position:relative;-webkit-box-flex:1;flex:1;height:18px;overflow:hidden}.van-noticebar__content{position:absolute;white-space:nowrap} .van-notice-bar{display:-webkit-box;display:flex;padding:9px 10px;font-size:12px;line-height:1.5}.van-notice-bar--within-icon{position:relative;padding-right:30px}.van-notice-bar__left-icon{height:18px;min-width:20px;padding-top:1px;box-sizing:border-box}.van-notice-bar__left-icon>image{width:16px;height:16px}.van-notice-bar__right-icon{position:absolute;top:10px;right:10px;font-size:15px;line-height:1}.van-notice-bar__content-wrap{position:relative;-webkit-box-flex:1;flex:1;height:18px;overflow:hidden}.van-notice-bar__content{position:absolute;white-space:nowrap}

View File

@ -71,7 +71,7 @@ module.exports = {
tag: require('./packages/tag/README.md'), tag: require('./packages/tag/README.md'),
badge: require('./packages/badge/README.md'), badge: require('./packages/badge/README.md'),
capsule: require('./packages/capsule/README.md'), capsule: require('./packages/capsule/README.md'),
noticebar: require('./packages/noticebar/README.md'), notice-bar: require('./packages/notice-bar/README.md'),
steps: require('./packages/steps/README.md') steps: require('./packages/steps/README.md')
} }
}, },

View File

@ -14,7 +14,7 @@
"pages/icon/index", "pages/icon/index",
"pages/layout/index", "pages/layout/index",
"pages/loading/index", "pages/loading/index",
"pages/noticebar/index", "pages/notice-bar/index",
"pages/panel/index", "pages/panel/index",
"pages/popup/index", "pages/popup/index",
"pages/radio/index", "pages/radio/index",

View File

@ -30,8 +30,8 @@ export default {
name: 'loading 加载', name: 'loading 加载',
path: '/pages/loading/index' path: '/pages/loading/index'
}, { }, {
name: 'Noticebar 通告栏', name: 'NoticeBar 通告栏',
path: '/pages/noticebar/index' path: '/pages/notice-bar/index'
}, { }, {
name: 'Panel 面板', name: 'Panel 面板',
path: '/pages/panel/index' path: '/pages/panel/index'

View File

@ -1,11 +1 @@
Page({ Page({});
data: {
},
onLoad: function () {
},
onShow: function() {
},
})

View File

@ -25,4 +25,4 @@ Page({
speed: 10 speed: 10
} }
} }
}) });

View File

@ -0,0 +1,7 @@
{
"navigationBarTitleText": "NoticeBar 通告栏",
"usingComponents": {
"van-notice-bar": "../../dist/notice-bar/index",
"van-panel": "../../dist/panel/index"
}
}

View File

@ -1,13 +1,13 @@
<van-panel title="滚动通告栏"> <van-panel title="滚动通告栏">
<van-noticebar <van-notice-bar
text="{{ bar1.text }}" text="{{ bar1.text }}"
scrollable="{{ bar1.scrollable }}" scrollable="{{ bar1.scrollable }}"
/> />
</van-panel> </van-panel>
<van-panel title="延时滚动通告栏"> <van-panel title="延时滚动通告栏">
<van-noticebar <van-notice-bar
text="{{ bar1.text }}" text="{{ bar1.text }}"
scrollable="{{ bar1.scrollable }}" scrollable="{{ bar1.scrollable }}"
delay="{{ bar1.delay }}" delay="{{ bar1.delay }}"
@ -15,7 +15,7 @@
</van-panel> </van-panel>
<van-panel title="初始速度低滚动通告栏"> <van-panel title="初始速度低滚动通告栏">
<van-noticebar <van-notice-bar
text="{{ bar1.text }}" text="{{ bar1.text }}"
scrollable="{{ bar1.scrollable }}" scrollable="{{ bar1.scrollable }}"
speed="{{ bar5.speed }}" speed="{{ bar5.speed }}"
@ -23,7 +23,7 @@
</van-panel> </van-panel>
<van-panel title="改变颜色通告栏"> <van-panel title="改变颜色通告栏">
<van-noticebar <van-notice-bar
text="{{ bar2.text }}" text="{{ bar2.text }}"
color="{{ bar2.color }}" color="{{ bar2.color }}"
background-color="{{ bar2.backgroundColor }}" background-color="{{ bar2.backgroundColor }}"
@ -31,20 +31,20 @@
</van-panel> </van-panel>
<van-panel title="静止通告栏"> <van-panel title="静止通告栏">
<van-noticebar <van-notice-bar
text="{{ bar3.text }}" text="{{ bar3.text }}"
/> />
</van-panel> </van-panel>
<van-panel title="带icon公告"> <van-panel title="带icon公告">
<van-noticebar <van-notice-bar
text="{{ bar4.text }}" text="{{ bar4.text }}"
left-icon="{{ bar4.leftIcon }}" left-icon="{{ bar4.leftIcon }}"
/> />
</van-panel> </van-panel>
<van-panel title="可关闭公告"> <van-panel title="可关闭公告">
<van-noticebar <van-notice-bar
text="{{ bar5.text }}" text="{{ bar5.text }}"
mode="{{ bar5.mode }}" mode="{{ bar5.mode }}"
/> />

View File

@ -1,7 +0,0 @@
{
"navigationBarTitleText": "Noticebar 通告栏",
"usingComponents": {
"van-noticebar": "../../dist/noticebar/index",
"van-panel": "../../dist/panel/index"
}
}

View File

@ -1,5 +1,5 @@
@import '../mixins/clearfix.pcss'; @import '../mixins/clearfix.pcss';
.van-clearfix { .van-clearfix {
@mixin ellipsis; @mixin clearfix;
} }

View File

@ -1,18 +1,18 @@
## Noticebar 通告栏 ## NoticeBar 通告栏
### 使用指南 ### 使用指南
在 index.json 中引入组件 在 index.json 中引入组件
```json ```json
{ {
"usingComponents": { "usingComponents": {
"van-noticebar": "path/to/vant-weapp/dist/noticebar/index" "van-notice-bar": "path/to/vant-weapp/dist/notice-bar/index"
} }
} }
``` ```
在 index.js 中声明组件数据 在 index.js 中声明组件数据
```js ```js
// 在 Page 中声明 Noticebar 依赖的展示数据 // 在 Page 中声明 NoticeBar 依赖的展示数据
Page({ Page({
data: { data: {
text: 'xxx', text: 'xxx',
@ -23,18 +23,18 @@ Page({
``` ```
### 代码演示 ### 代码演示
`Noticebar` 组件支持滚动和静止两种展示方式,通过 text 传入展示文案 `NoticeBar` 组件支持滚动和静止两种展示方式,通过 text 传入展示文案
### 静止公告栏 ### 静止公告栏
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
/> />
``` ```
### 滚动通告栏 ### 滚动通告栏
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
scrollable="true" scrollable="true"
/> />
@ -42,7 +42,7 @@ Page({
### 延时滚动通告栏 ### 延时滚动通告栏
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
scrollable="true" scrollable="true"
delay="{{ delay }}" delay="{{ delay }}"
@ -51,7 +51,7 @@ Page({
### 改变滚动通告栏滚动速度 ### 改变滚动通告栏滚动速度
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
scrollable="true" scrollable="true"
speed="{{ speed }}" speed="{{ speed }}"
@ -60,7 +60,7 @@ Page({
### 自定义通告栏字体颜色和背景色 ### 自定义通告栏字体颜色和背景色
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
color="{{ color }}" color="{{ color }}"
background-color="{{ backgroundColor }}" background-color="{{ backgroundColor }}"
@ -69,7 +69,7 @@ Page({
### 添加左侧icon通告栏 ### 添加左侧icon通告栏
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png" left-icon="https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
/> />
@ -77,7 +77,7 @@ Page({
### 可关闭通告栏 ### 可关闭通告栏
```html ```html
<van-noticebar <van-notice-bar
text="{{ text }}" text="{{ text }}"
mode="closeable" mode="closeable"
/> />

View File

@ -7,7 +7,7 @@ Component({
text: { text: {
type: String, type: String,
value: '', value: '',
observer(newVal) { observer() {
this.setData({}, this._init); this.setData({}, this._init);
} }
}, },
@ -86,7 +86,7 @@ Component({
_init() { _init() {
wx.createSelectorQuery() wx.createSelectorQuery()
.in(this) .in(this)
.select('.van-noticebar__content') .select('.van-notice-bar__content')
.boundingClientRect((rect) => { .boundingClientRect((rect) => {
if (!rect || !rect.width) { if (!rect || !rect.width) {
return; return;
@ -97,7 +97,7 @@ Component({
wx.createSelectorQuery() wx.createSelectorQuery()
.in(this) .in(this)
.select('.van-noticebar__content-wrap') .select('.van-notice-bar__content-wrap')
.boundingClientRect((rect) => { .boundingClientRect((rect) => {
if (!rect || !rect.width) { if (!rect || !rect.width) {
return; return;

View File

@ -1,4 +1,4 @@
.van-noticebar { .van-notice-bar {
display: flex; display: flex;
padding: 9px 10px; padding: 9px 10px;
font-size: 12px; font-size: 12px;

View File

@ -1,13 +1,13 @@
<view <view
wx:if="{{ show }}" wx:if="{{ show }}"
class="van-noticebar {{ hasRightIcon ? 'van-noticebar--within-icon' : '' }}" class="van-notice-bar {{ hasRightIcon ? 'van-notice-bar--within-icon' : '' }}"
style="color: {{ color }};background-color: {{ backgroundColor }}" style="color: {{ color }};background-color: {{ backgroundColor }}"
> >
<view wx:if="{{ leftIcon }}" class="van-noticebar__left-icon"> <view wx:if="{{ leftIcon }}" class="van-notice-bar__left-icon">
<image src="{{ leftIcon }}" /> <image src="{{ leftIcon }}" />
</view> </view>
<view class="van-noticebar__content-wrap"> <view class="van-notice-bar__content-wrap">
<view class="van-noticebar__content" animation="{{ animationData }}"> <view class="van-notice-bar__content" animation="{{ animationData }}">
{{ text }} {{ text }}
</view> </view>
</view> </view>
@ -15,8 +15,8 @@
<block wx:if="{{ mode }}"> <block wx:if="{{ mode }}">
<van-icon <van-icon
wx:if="{{ mode === 'closeable' }}" wx:if="{{ mode === 'closeable' }}"
class="van-noticebar__right-icon" class="van-notice-bar__right-icon"
type="close" name="close"
bindtap="_handleButtonClick" bindtap="_handleButtonClick"
/> />
<navigator <navigator
@ -24,7 +24,7 @@
url="{{ url }}" url="{{ url }}"
open-type="{{ openType }}" open-type="{{ openType }}"
> >
<van-icon class="van-noticebar__right-icon" type="arrow" /> <van-icon class="van-notice-bar__right-icon" type="arrow" />
</navigator> </navigator>
</block> </block>