diff --git a/docs/markdown/changelog.md b/docs/markdown/changelog.md index a97ad030..1e283dfb 100644 --- a/docs/markdown/changelog.md +++ b/docs/markdown/changelog.md @@ -16,6 +16,7 @@ - 新增 Loading 组件 - 新增 Panel 组件 - 新增 Popup 组件 +- 新增 NavBar 组件 - 新增 NoticeBar 组件 - 新增 Search 组件 - 新增 Steps 组件 diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index d267e5c8..ba46e182 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -23,6 +23,7 @@ const MAP = { icon: 'icon-201808092138.png', col: 'layout-201808092138.png', loading: 'loading-201808092138.png', + 'nav-bar': 'nav-bar-201808110751.png', 'notice-bar': 'notice-bar-201808092138.png', popup: 'popup-201808092138.png', panel: 'panel-201808092138.png', diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js index 5dfc05c5..18e622fc 100644 --- a/docs/src/doc.config.js +++ b/docs/src/doc.config.js @@ -65,6 +65,10 @@ module.exports = { path: '/loading', title: 'Loading 加载' }, + { + path: '/nav-bar', + title: 'NavBar 导航栏' + }, { path: '/notice-bar', title: 'NoticeBar 通告栏' diff --git a/docs/src/docs-entry.js b/docs/src/docs-entry.js index 394c0d7b..17c97b7b 100644 --- a/docs/src/docs-entry.js +++ b/docs/src/docs-entry.js @@ -13,6 +13,7 @@ export default { 'field': () => import('../../packages/field/README.md'), 'icon': () => import('../../packages/icon/README.md'), 'loading': () => import('../../packages/loading/README.md'), + 'nav-bar': () => import('../../packages/nav-bar/README.md'), 'notice-bar': () => import('../../packages/notice-bar/README.md'), 'panel': () => import('../../packages/panel/README.md'), 'popup': () => import('../../packages/popup/README.md'), @@ -21,6 +22,5 @@ export default { 'steps': () => import('../../packages/steps/README.md'), 'switch': () => import('../../packages/switch/README.md'), 'tag': () => import('../../packages/tag/README.md'), - 'toast': () => import('../../packages/toast/README.md'), 'tree-select': () => import('../../packages/tree-select/README.md') }; diff --git a/example/app.json b/example/app.json index 8deac341..b60928fa 100644 --- a/example/app.json +++ b/example/app.json @@ -2,14 +2,15 @@ "pages": [ "pages/dashboard/index", "pages/actionsheet/index", - "pages/button/index", "pages/badge/index", + "pages/button/index", "pages/card/index", "pages/cell/index", "pages/field/index", "pages/icon/index", "pages/layout/index", "pages/loading/index", + "pages/nav-bar/index", "pages/notice-bar/index", "pages/panel/index", "pages/popup/index", diff --git a/example/pages/dashboard/config.js b/example/pages/dashboard/config.js index f72ec73c..44bb7f31 100644 --- a/example/pages/dashboard/config.js +++ b/example/pages/dashboard/config.js @@ -26,6 +26,10 @@ export default { name: 'Loading 加载', path: '/pages/loading/index' }, + { + name: 'NavBar 导航栏', + path: '/pages/nav-bar/index' + }, { name: 'NoticeBar 通告栏', path: '/pages/notice-bar/index' diff --git a/example/pages/loading/index.js b/example/pages/loading/index.js index 9555c825..560d44d4 100644 --- a/example/pages/loading/index.js +++ b/example/pages/loading/index.js @@ -1 +1 @@ -Page({}) \ No newline at end of file +Page({}); diff --git a/example/pages/nav-bar/index.js b/example/pages/nav-bar/index.js new file mode 100644 index 00000000..f283faa8 --- /dev/null +++ b/example/pages/nav-bar/index.js @@ -0,0 +1,9 @@ +Page({ + onTapLeft() { + wx.showToast({ title: '点击返回', icon: 'none' }); + }, + + onTapRight() { + wx.showToast({ title: '点击按钮', icon: 'none' }); + } +}); diff --git a/example/pages/nav-bar/index.json b/example/pages/nav-bar/index.json new file mode 100644 index 00000000..2c73f4c4 --- /dev/null +++ b/example/pages/nav-bar/index.json @@ -0,0 +1,8 @@ +{ + "navigationBarTitleText": "NavBar 导航栏", + "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-icon": "../../dist/icon/index", + "van-nav-bar": "../../dist/nav-bar/index" + } +} diff --git a/example/pages/nav-bar/index.wxml b/example/pages/nav-bar/index.wxml new file mode 100644 index 00000000..805774dc --- /dev/null +++ b/example/pages/nav-bar/index.wxml @@ -0,0 +1,16 @@ + + + + + + + + + diff --git a/example/pages/nav-bar/index.wxss b/example/pages/nav-bar/index.wxss new file mode 100644 index 00000000..e1c01e23 --- /dev/null +++ b/example/pages/nav-bar/index.wxss @@ -0,0 +1,3 @@ +.icon { + color: #38f; +} diff --git a/packages/nav-bar/README.md b/packages/nav-bar/README.md new file mode 100644 index 00000000..cdee26f6 --- /dev/null +++ b/packages/nav-bar/README.md @@ -0,0 +1,79 @@ +## NavBar 导航栏 + +### 使用指南 +``` javascript +import { NavBar } from 'vant'; + +Vue.use(NavBar); +``` + +### 代码演示 + +#### 基础用法 + +```html + +``` + +```js +export default { + methods: { + onTapLeft() { + wx.showToast({ title: '点击返回', icon: 'none' }); + }, + onTapRight() { + wx.showToast({ title: '点击按钮', icon: 'none' }); + } + } +} +``` + +#### 高级用法 +通过 slot 定制内容 + +```html + + + +``` + + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| title | 标题 | `String` | `''` | +| left-text | 左侧文案 | `String` | `''` | +| right-text | 右侧文案 | `String` | `''` | +| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | +| fixed | 是否固定在顶部 | `Boolean` | `false` | +| z-index | 元素 z-index | `Number` | `1` | + +### Slot + +| 名称 | 说明 | +|-----------|-----------| +| title | 自定义标题 | +| left | 自定义左侧区域内容 | +| right | 自定义右侧区域内容 | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| tap-left | 点击左侧按钮时触发 | - | +| tap-right | 点击右侧按钮时触发 | - | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | +| title-class | 标题样式类 | diff --git a/packages/nav-bar/index.js b/packages/nav-bar/index.js new file mode 100644 index 00000000..512dab82 --- /dev/null +++ b/packages/nav-bar/index.js @@ -0,0 +1,32 @@ +Component({ + externalClasses: [ + 'custom-class', + 'title-class' + ], + + options: { + multipleSlots: true + }, + + properties: { + title: String, + leftText: String, + rightText: String, + leftArrow: Boolean, + fixed: Boolean, + zIndex: { + type: Number, + value: 1 + } + }, + + methods: { + onTapLeft() { + this.triggerEvent('tap-left'); + }, + + onTapRight() { + this.triggerEvent('tap-right'); + } + } +}); diff --git a/packages/toast/index.json b/packages/nav-bar/index.json similarity index 100% rename from packages/toast/index.json rename to packages/nav-bar/index.json diff --git a/packages/nav-bar/index.pcss b/packages/nav-bar/index.pcss new file mode 100644 index 00000000..f9acffe7 --- /dev/null +++ b/packages/nav-bar/index.pcss @@ -0,0 +1,61 @@ +@import '../common/style/var.pcss'; + +.van-nav-bar { + height: 46px; + position: relative; + user-select: none; + text-align: center; + line-height: 46px; + background-color: $white; + + &__arrow { + color: $blue; + vertical-align: middle; + transform: rotate(180deg); + + + .van-nav-bar__text { + margin-left: -20px; + padding-left: 25px; + } + } + + &--fixed { + top: 0; + left: 0; + width: 100%; + position: fixed; + } + + &__title { + margin: 0 auto; + max-width: 60%; + font-size: 16px; + } + + &__left, + &__right { + bottom: 0; + font-size: 14px; + position: absolute; + } + + &__left { + left: 15px; + } + + &__right { + right: 15px; + } + + &__text { + color: $blue; + margin: 0 -15px; + padding: 0 15px; + display: inline-block; + vertical-align: middle; + + &:active { + background-color: $active-color; + } + } +} diff --git a/packages/nav-bar/index.wxml b/packages/nav-bar/index.wxml new file mode 100644 index 00000000..5fc9f268 --- /dev/null +++ b/packages/nav-bar/index.wxml @@ -0,0 +1,24 @@ + + + + + {{ leftText }} + + + + + {{ title }} + + + + {{ rightText }} + + + diff --git a/packages/toast/README.md b/packages/toast/README.md deleted file mode 100644 index c08b9090..00000000 --- a/packages/toast/README.md +++ /dev/null @@ -1,55 +0,0 @@ -## Toast 轻提示 - -### 使用指南 -在 json 文件中配置 toast 组件 -```json -"usingComponents": { - "van-toast": "/path/to/vant-weapp/dist/toast/index" -} -``` - -在需要使用的页面里引入组件库模板和脚本 -```html - -``` -```js -const Toast = require('path/to/vant-weapp/dist/toast/toast'); - -Page({ - // ... - // 可以在任意方法里直接调用，即可唤起 - handleClick() { - Toast({ - message: 'toast me', - selector: '#van-toast-test' - }); - } -}); -``` - -#### 加载提示 -```js -Toast.loading({ - selector: '#van-toast-test' -}); -``` - -### 参数说明 - -#### 方法 -| 方法名 | 参数 | 返回值 | 介绍 | -|-----------|-----------|-----------|-------------| -| Toast | `options`, `timeout` | - | 展示提示 | -| Toast.loading | `options` | - | 展示加载提示 | -| Toast.clear | - | - | 关闭提示 | -| Toast.setDefaultOptions | `options` 格式同 Toast 函数可以传入的参数, `type` 可选 global/page, 分别指定对整个小程序生效/对当前页面生效 | - | 修改默认配置，对所有 Toast 生效 | -| Toast.resetDefaultOptions | `type` 可选 global/page | - | 重置默认配置，对所有 Toast 生效 | - -#### options 具体参数如下 -| 参数 | 说明 | 类型 | 默认值 | -|-----------|-----------|-----------|-------------| -| message | toast 显示文案 | String | - | -| type | 提示类型, 可选值：loading，success，fail | String | - | -| icon | toast 显示图标，可以用 icon 里面支持的所有图标 | String | - | -| image | toast 显示图标，为图片的链接，传入此值后会覆盖 icon 值 | String | - | -| timeout | toast 显示时间，单位为毫秒，小于0则会一直显示，需要手动调用 Toast.clear 清除 | Number | - | diff --git a/packages/toast/index.js b/packages/toast/index.js deleted file mode 100644 index a5ba4e7d..00000000 --- a/packages/toast/index.js +++ /dev/null @@ -1,40 +0,0 @@ -const DEFAULT_DATA = { - show: false, - message: '', - icon: '', - image: '', - mask: false -}; - -const SUPPORT_TYPE = ['loading', 'success', 'fail']; - -Component({ - data: { - ...DEFAULT_DATA - }, - - methods: { - show(options) { - const toastOptions = { ...options }; - - let icon = options.icon || ''; - let image = options.image || ''; - if (SUPPORT_TYPE.indexOf(options.type) > -1) { - icon = options.type; - image = ''; - } - - this.setData({ - ...toastOptions, - icon, - image - }); - }, - - clear() { - this.setData({ - ...DEFAULT_DATA - }); - } - } -}); diff --git a/packages/toast/index.pcss b/packages/toast/index.pcss deleted file mode 100644 index 6d3f494c..00000000 --- a/packages/toast/index.pcss +++ /dev/null @@ -1,59 +0,0 @@ -.van-toast { - position: fixed; - top: 35%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - background: rgba(0, 0, 0, 0.7); - color: #fff; - font-size: 14px; - line-height: 1.5em; - margin: 0 auto; - box-sizing: border-box; - padding: 10px 18px; - text-align: center; - border-radius: 4px; - z-index: 100; -} - -/* 没有文字时，需要调整展示大小 */ -.van-toast--notitle { - padding: 18px; -} - -.van-toast__icon { - display: block; - width: 40px; - height: 40px; - line-height: 40px; - margin: 0 auto; - padding: 12px 15px; - font-size: 38px; - text-align: center; -} - -/* 加载中的状态 */ -.van-toast__icon-loading { - line-height: 0; -} - -.van-loading { - width:20px; - height:20px; - display: inline-block; - vertical-align: middle; - animation: weuiLoading 1s steps(12, end) infinite; - background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat; - background-size: 100%; -} - -.van-toast__icon-loading .van-loading { - width: 40px; - height: 40px; -} - -/* 自定义图标 */ -.van-toast__icon-image { - background-size: 40px; - background-position: center; - background-repeat: no-repeat; -} diff --git a/packages/toast/index.wxml b/packages/toast/index.wxml deleted file mode 100644 index af4af861..00000000 --- a/packages/toast/index.wxml +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - - - {{ message }} - diff --git a/packages/toast/toast.js b/packages/toast/toast.js deleted file mode 100644 index 2ddf2f0c..00000000 --- a/packages/toast/toast.js +++ /dev/null @@ -1,136 +0,0 @@ -const TOAST_CONFIG_KEY = 'vant.__zanToastPageConfig'; -const DEFAULT_SHOW_TOAST_TIME = 3000; - -let timeoutData = { - timeoutId: 0, - toastCtx: null -}; - -let globalToastUserConfig = {}; - -// 获取页面上下文 -function getPageCtx(pageCtx) { - let ctx = pageCtx; - - if (!ctx) { - const pages = getCurrentPages(); - ctx = pages[pages.length - 1]; - } - - return ctx; -} - -// 获取当前页面的 toast 配置数据 -function getPageToastConfig(pageCtx) { - const vantData = pageCtx.data.vant || {}; - return vantData.__zanToastPageConfig || {}; -} - -// Toast 显示函数 -function Toast(optionsOrMsg, pageCtx) { - // 参数格式化处理 - // 如果是文字，默认为 message - let options = optionsOrMsg || {}; - if (typeof optionsOrMsg === 'string') { - options = { message: optionsOrMsg }; - } - - let ctx = getPageCtx(pageCtx); - const pageToastUserSetting = getPageToastConfig(ctx); - const parsedOptions = { - ...globalToastUserConfig, - ...pageToastUserSetting, - ...options - }; - const toastCtx = ctx.selectComponent(parsedOptions.selector); - - if (!toastCtx) { - console.error('无法找到对应的toast组件，请于页面中注册并在 wxml 中声明 toast 自定义组件'); - return; - } - - if (timeoutData.timeoutId) { - Toast.clear(); - } - - toastCtx.show({ - ...parsedOptions, - show: true - }); - - let timeoutId = 0; - // toast 计时，如果小于0，就不会去关闭。 - // 如果不传，就取默认值 - const timeoutOption = parsedOptions.timeout || DEFAULT_SHOW_TOAST_TIME; - if (timeoutOption >= 0) { - timeoutId = setTimeout(() => { - toastCtx.clear(); - }, timeoutOption); - } - - - timeoutData = { - timeoutId, - toastCtx - }; -} - -// 设置 toast 基础属性 -Toast.setDefaultOptions = function (options = {}, type = 'page') { - const parsedDefaultOptions = { - selector: options.selector || '', - type: options.type || '', - icon: options.icon || '', - image: options.image || '', - timeout: options.timeout || DEFAULT_SHOW_TOAST_TIME - }; - - if (type === 'global') { - globalToastUserConfig = { - ...parsedDefaultOptions - }; - } else if (type === 'page') { - let ctx = getPageCtx(); - ctx.setData({ - [`${TOAST_CONFIG_KEY}`]: parsedDefaultOptions - }); - } -}; - -// 重置 toast 基础属性 -Toast.resetDefaultOptions = function (type = 'page') { - if (type === 'global') { - globalToastUserConfig = {}; - } else { - let ctx = getPageCtx(); - ctx.setData({ - [`${TOAST_CONFIG_KEY}`]: {} - }); - } -}; - -// 清理所有 toast -Toast.clear = function () { - clearTimeout(timeoutData.timeoutId); - - try { - timeoutData.toastCtx && timeoutData.toastCtx.clear(); - } catch (e) { - console.log(e); - } - - timeoutData = { - timeoutId: 0, - toastCtx: null - }; -}; - -// 显示 loading -Toast.loading = function (options = {}) { - Toast({ - ...options, - type: 'loading' - }); -}; - -module.exports = Toast;