didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.

mand-mobile

A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios

English | 中文

Links

• Home
• Development Guide
• Change Log
• Examples
• Palette
• Mand Mobile Organization

Preview

You can scan the following QR code to access the examples:

Install & Usage

Template for new project

Vue CLI 2

New project can be initialized and integrated with mand-mobile by vue-cli-2 with mand-mobile-template.

vue init mand-mobile/mand-mobile-template my-project

Vue CLI 3

New project can be initialized and integrated with mand-mobile by vue-cli with vue-cli-plugin-mand.

vue create my-project
cd my-project
npm install --save-dev vue-cli-plugin-mand
vue invoke mand

Manually

npm install mand-mobile --save

Import

• Use babel-plugin-import or ts-import-plugin (Recommended)

import { Button } from 'mand-mobile'

• Manually import

import Button from 'mand-mobile/lib/button'

• Totally import

import Vue from 'vue'
import mandMobile from 'mand-mobile'
import 'mand-mobile/lib/mand-mobile.css'

Vue.use(mandMobile)

Usage

Select the components you need to build your webapp. Find more details in Quick Start.

Development

git clone [email protected]:didi/mand-mobile.git
cd mand-mobile
npm install
npm run dev

Open your browser and visit http://127.0.0.1:4000. Find more details in Development Guide.

Contributing

Welcome to contribute by creating issues or sending pull requests. See Contributing Guide for guidelines.

Community

License

Mand Mobile is licensed under the Apache License 2.0. See the LICENSE file.

Useful Links

• Hummer is a set of high-performance and highly available cross-terminal development framework, a set of code can support the development of Android and iOS applications at the same time. Now supports Vue/TypeScript/JavaScript, for front-end developers, there is always one suitable for you.

• DoraemonKit /'dɔ:ra:'emɔn/: A full-featured App (iOS & Android) development assistant. You deserve it.

• Chameleon /kəˈmiːlɪən/: Unify all platforms(Web/Weex/Mini program) with MVVM. Focus on Write Once Run AnyWhere.

mand-mobile's Issues

project cannot run in my pc

官网demo数字键盘在页面返回不自动消失

项目版本

操作系统版本/浏览器版本

Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)

重现链接(尽量以CodeSandbox重现)

https://didi.github.io/mand-mobile/examples/#/category

重现步骤

点击Form表单相关 -> 点击Codebox - 字符码输入 -> 点击返回 -> 数字键盘不消失

期待行为

实际行为

🙋 谁在使用 / Mand Mobile Users

如果您和您的公司或组织使用了 Mand Mobile ，非常感谢您的支持，欢迎留下公司或产品名，告诉我们您在金融类产品的设计开发过程中遇到的痛点，也许我们可以帮到您。

无关回复将会定期删除

如果可以的话，请提供以下信息：

- 公司或组织
- 链接
- 产品业务场景
- 痛点

---

We appreciate you support if you or your organization is using Mand Mobile. You are welcome to leave replies about your product and organization here and tell us about your pain points in the design and development of financial products, maybe we will help you.

Unrelated replies will be deleted on a regular basis

If possible, please provide the following information：

- Company or Organization
- Link
- Product Business Scenario
- Pain Points

DatePicker 默认时间不在最小时间和最大时间的范围内，取不到值

mand-mobile version/项目版本
1.2.2

参数
minDate: 2000-08-08
maxDate: 2018-08-08
defaultDate:  1990-08-08

此时由于1990小于2000，选择器会显示最小的年，即2000-08-08，但是取值的时候
this.$refs.datePicker.getFormatDate('yyyy-MM-dd');拿到的确是'yyyy-08-08'

建议提供示例代码一键拷贝功能

https://didi.github.io/mand-mobile/#/docs/components/feedback/popup

比如这个组件：
示例代码要拷贝起来稍显繁琐。
建议方案一：点击选中展开代码的时候，复制代码到剪贴板
建议方案二：左上角或者右上角做一个“copy”按钮，点击，可以复制这一段示例代码。

ActionSheet 包含数据过多,touch无法滚动

• Mand Mobile Version

• OS Version & Browser Version

• Node Version, Package Management Tool(such as npm/cnpm/yarn) & Version for building errors

• Recurring Links

• Recurring Steps

• Expectant Behaviors

ActionSheet 中即使包含很多的行为,也是可以触摸滑动的.

• Actual Behaviors

希望能在vue模板的基础上，提供mand-mobile的模板工程，方便初学者。

命令行工具 (CLI)
Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev

ImageViewer 图片查看器 不使用show.sync，改用v-model

mand-mobile version/项目版本
1.0.7

expectant behaviors/期待行为

<md-image-viewer
      v-model="showViewer"
      :list="imageList"
      :has-dots="true"
      :initial-index="viewerIndex">
    </md-image-viewer>

actual behaviors/实际行为

<md-image-viewer
      :show.sync="showViewer"
      :list="imageList"
      :has-dots="true"
      :initial-index="viewerIndex">
    </md-image-viewer>

image-processor.js 远程js文件不存在

// Import jpeg_encoder_basic for compatibility if necessary
if (UA.oldIOS || UA.oldAndroid || UA.mQQBrowser || !navigator.userAgent) {
  /* istanbul ignore next */
  requireRemoteScript('//manhattan.didistatic.com/static/manhattan/mfd/image-reader/jpeg_encoder_basic.js')
}

http://fimanhattan.didistatic.com/static/manhattan/mfd/image-reader/jpeg_encoder_basic.js

打不开

Dialog 包含 inputitem组件，IOS无法输入

mand-mobile version/项目版本
1.1.1

os version & browser version/操作系统版本&浏览器版本
ios 10.3.3

node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
yarn 1.6.0

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

<md-dialog
      title="窗口标题"
      :closable="true"
      v-model="basicDialog.open"
      :btns="basicDialog.btns"
    >
      <md-field>
      <md-input-item
        ref="input0"
        title="普通文本"
        placeholder="普通文本"
        :maxlength="5"
      ></md-input-item>
</md-field>
    </md-dialog>

recurring steps/复现步骤

expectant behaviors/期待行为

actual behaviors/实际行为
安卓没有问题，ios很难点到输入框，没法弹出系统键盘

mand-landscape 是另一个库吗

https://didi.github.io/mand-mobile/#/docs/components/business/landscape

mand-mobile用什么好的包来做表单验证吗？

mand-mobile version/项目版本
1.1.0

os version & browser version/操作系统版本&浏览器版本
win10&chrome

node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
cnpm

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤

expectant behaviors/期待行为

表单验证

actual behaviors/实际行为

请问 mand-mobile 做表单验证时有什么好的工具推荐吗？我使用 vee-validate 做表单验证，除了 required 之外的规则，只要是失去焦点就会触发验证失败，例如 numeric 规则，我输入的全数字，但是失去焦点时就验证失败

ImageReader 图片选择器 无法弹出选择

mand-mobile version/项目版本
1.0.6

recurring steps/复现步骤
图片选择器在自定义组件里面，而且自定义组件捕获了click事件的时候，图片选择器不能使用了

<my-component>
   <md-image-reader/>
</my-component>

自定义组件代码

export default {
  template: '<div @click="onClick"><slot /></div>',
 methods: {
    onClick() {
         this.$emit('click');  
    }
  }
}

按照官网教程修改主题样式,报错 ParseError: expected "indent", got ";"

• Mand Mobile Version

Mand-ui 1.X
Vue-cli 3.0

• OS Version & Browser Version

• Node Version, Package Management Tool(such as npm/cnpm/yarn) & Version for building errors

• Recurring Links

• Recurring Steps

引入theme.custom.styl 无效.

编译时报错

• Expectant Behaviors

通过官网教程成功切换主题.

• Actual Behaviors

目前更改源码中lib文件下组件源码,来修改主题

期望后续的版本中可以加入模态页组件

mand-mobile version/项目版本
V1.0.9
os version & browser version/操作系统版本&浏览器版本
macOs 10.13.4
node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
NPM 5.8
recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)
DEMO
recurring steps/复现步骤

expectant behaviors/期待行为
期望后续的版本中可以加入模态页，类似ionic的modals这样的组件，因为实际开发中很多弹框需要整个页面弹出，类似登录的拦截。还有就是模态页最好可以直接传入组件，可以接收参数，然后有打开和关闭这样的回调方法。DEMO
actual behaviors/实际行为

popup 类似组件的 v-model 不支持传vuex getter.

• Mand Mobile Version

• OS Version & Browser Version

• Node Version, Package Management Tool(such as npm/cnpm/yarn) & Version for building errors

• Recurring Links

• Recurring Steps

• Expectant Behaviors

• Actual Behaviors

popup中隐藏视窗是触发this.$emit('input', false),而vuex getter 作为value 不存在setter.

codebox 代码出现 console.log

mand-mobile version/项目版本
1.1.0

codebox/index.vue

focus() {
      console.log('ok')
      this.focused = true
      if (this.system) {
        this.$refs.input.focus()
      }
    },

期望所有组件不使用@click.native修饰符

期望所有组件能够转发click事件，不使用@click.native修饰符，习惯了@click，经常会忘记加native修饰符

基本上现有开源Vue UI组件库都不需要加native修饰符

mand-mobile version/项目版本
1.0.6

export default {
  template: '<div @click="onClick"></div>',
 methods: {
    onClick() {
         this.$emit('click');  
    }
  }
}

ActionSheet provides singleton mode

• Mand Mobile Version

v1.2.3

• OS Version & Browser Version

all

• Expectant Behaviors

🕶 ActionSheet provides singleton mode, just like Dialog & Toast

Swiper轮播加了切换动画效果fade后无法触摸滚动

另外文档中transition可选值中有两个fade

找了一圈,貌似没有card或者list列表展示组件

一般都会有card这种组件,这边是用其他替代了嘛?

所有的蒙层滑动事件都是可以透传到下面的page，导致蒙层滑动时下面页面跟着滑动？？

所有的蒙层滑动事件都是可以透传到下面的page，导致蒙层滑动时下面页面跟着滑动？？

主题定制是不是不起作用？

以按需加载一个button为例

<template>
  <div class="md-example-child md-example-child-button md-example-child-button-0">
    <md-button>Primary</md-button>
    <md-button disabled>Primary Disabled</md-button>
  </div>
</template>

<script>
import {Button} from 'mand-mobile'

export default {
  name: 'button-demo',
  title: '主按钮',
  components: {
    [Button.name]: Button
  }
}

</script>

其中button的部分样式如下：
颜色值写死在css文件中。

.md-button.primary {
  background-color: #fc9153;
  color: #fff;
}

如何在@vue/cli3初始化的项目里配置按需引入呢?

mand-mobile version/项目版本
1.0.6
os version & browser version/操作系统版本&浏览器版本
Mac OS 10.13 Google Chrome 66
node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
npm 9.11
recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤

expectant behaviors/期待行为
在@vue/cli3初始化的项目里能按需引入, px to rem 配置运行
actual behaviors/实际行为

mand-dialog close method is invalid

there is a demand that we need to close the dialog when the router changes

组件中包含display:box的样式会引起Autoprefixer警告

• mand-mobile 1.0.9
• autoprefixer 7.1.2

https://www.npmjs.com/package/autoprefixer

postcss/autoprefixer#970

Seletor 组件在未设置 html font-size 时 padding 不正常

mand-mobile version/项目版本
1.2.1

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)
https://codepen.io/shoyuf-the-vuer/pen/YLezKq

recurring steps/复现步骤
使用postcss-px-to-viewport ,未使用rem相关插件，其他组件样式正常

.md-radio .md-field .md-field-item {
    padding: 0.22rem 0.32rem;
}

Version 1.2.1 新增的 vw适配方案 对现有项目有什么影响？

[Popup & DropMenu] Mask Layer or Menu Table Scroll Action Breakdown

mand-mobile version/项目版本
1.0.5

recurring steps/复现步骤

expectant behaviors/期待行为
DropMenu table scroll action shouldn't breakdown

actual behaviors/实际行为
DropMenu table scroll action breakdown

Landscape 开放 mask-closable 属性，点蒙层关闭

mand-mobile version/项目版本
1.0.6
os version & browser version/操作系统版本&浏览器版本
ios10
node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
yarn1.6
recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤

expectant behaviors/期待行为
Landscape压缩窗 可以点蒙层关闭
actual behaviors/实际行为

主题定制部分的文档和mand-mobile/mand-mobile-template中实际的主题定制部分不一致。

• Mand Mobile Version

"mand-mobile": "^1.0.8",

• OS Version & Browser Version

macOS 10.13.4

• Node Version, Package Management Tool(such as npm/cnpm/yarn) & Version for building errors

node -v
v8.11.1

• Recurring Links

https://didi.github.io/mand-mobile/#/docs/theme

• Recurring Steps

https://didi.github.io/mand-mobile/#/docs/theme

• Expectant Behaviors

https://didi.github.io/mand-mobile/#/docs/theme
主题定制部分的文档和mand-mobile/mand-mobile-template中实际的主题定制部分不一致。
希望更新文档，按照代码中主题定制的部分，更新步骤。

• Actual Behaviors

主题定制部分的文档和mand-mobile/mand-mobile-template中实际的主题定制部分不一致。

收银台控件多种支付方式显示情况

mand-mobile version/项目版本
1.1.1
os version & browser version/操作系统版本&浏览器版本

node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤

expectant behaviors/期待行为
1只有一种支付方式的时候不显示“更多支付方式”
2多种支付方式的时候显示所有的支付方式列表，不显示更多支付，比如只有两种支付方式的时候，就可以直接列出来了，不需要再通过“更多支付方式”
actual behaviors/实际行为
只有一种支付方式的时候也会显示“更多支付方式”。多个支付方式时只有第一种方式显示出来，其余的需要点击更多支付才能显示

[Codebox.name]: Codebox 这样引入样式不渲染,所有组件 import Button from 'mand-mobile/lib/button' 这样就可以

mand-mobile version/项目版本
1.06
os version & browser version/操作系统版本&浏览器版本
Mac OS
node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
npm 8.9.7
recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤

expectant behaviors/期待行为

actual behaviors/实际行为

Toast 样式出现问题！！官网 Demo 也出错了

Toast 样式出现问题！！官网 Demo 也出错了

vuecli2.0 官方示例模板中 Toast 组件引入会报错，IOS11以下均不可用

vuecli2.0 官方示例模板中 Toast 组件引入会报错，IOS11以下均不可用

Picker 城市联动demo无法默认选中

mand-mobile version/项目版本
1.1.1

官网代码复制过来的

官网效果

我的效果

Captcha支持配置按钮文案

• Mand Mobile Version
  1.2.3

• OS Version & Browser Version
  略

• Node Version, Package Management Tool(such as npm/cnpm/yarn) & Version for building errors
  略

• Recurring Links
  略

• Recurring Steps
  略

• Expectant Behaviors
  可配置发送验证码按钮的不同状态的文案

• Actual Behaviors
  按钮文案固定无法修改

样式按需加载, stylus-loader配置

参考有赞vant，支持css按需加载 https://www.youzanyun.com/zanui/vant#/zh-CN/quickstart

"plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]

项目版本

1.0.4

操作系统版本/浏览器版本

chrome

Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)

9.0

重现链接(尽量以CodeSandbox重现)

无

重现步骤

无

期待行为

无

实际行为

无

Cashier 收银台 组件在需要验证码情况下，键盘弹出样式有问题。

mand-mobile version/项目版本

os version & browser version/操作系统版本&浏览器版本

node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)
https://didi.github.io/mand-mobile/#/docs/components/business/cashier

recurring steps/复现步骤

1. 在收银台界面，选中发送验证码
2. 点击“唤起收银台”，然后弹出支付窗口
3. 在支付窗口，点击 确定支付。
4. 弹出验证支付验证码弹窗。这里的键盘样式有问题。
   

expectant behaviors/期待行为
键盘样式显示正常

actual behaviors/实际行为
有若干个小黑点，键盘样式看起来不正常。

Dialog 和 Toast无法同时使用

mand-mobile version/项目版本
1.1.0
os version & browser version/操作系统版本&浏览器版本
ios

recurring steps/复现步骤

1. 显示Dialog
   2.点击确定按钮,Toast.loading

expectant behaviors/期待行为
dialog和toast共存，toast在dialog之上

actual behaviors/实际行为
toast在dialog之下

在新项目中应用了mand-mobile，出现字体和内容区域大一倍问题

mand-mobile version/项目版本
1.0.6
os version & browser version/操作系统版本&浏览器版本
windows10，Opera
node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
node,npm
recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤
我按照官网指示，把mand-mobile引入新项目，按钮可以显示，点击出现预期窗体，但是按钮大一倍，显示内容窗体也大一倍，查看官网例子有zoom:.6,但我的网页中没有，不知道这个是如何设置控制的
expectant behaviors/期待行为

actual behaviors/实际行为

mand-mobile结合cordova使用，在ios模拟器中button大小异常

mand-mobile 1.0.8

os version & browser version macos 10.13.4

node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)

recurring steps/复现步骤

expectant behaviors/期待行为
如何调整控件大小？

actual behaviors/实际行为

DatePicker call 'getFormatDate' cannot get the value of Hour(hh) or Minute(mm)

• Mand Mobile Version

  v1.2.2

• OS Version & Browser Version

  all

• Recurring Links

    <md-date-picker
      ref="datePicker"
      v-model="isDatePickerShow"
      type="custom"
      today-text="&(今天)"
      title="选择出险时间"
      is-twelve-hours
      :text-render="textRender"
      :custom-types="['yyyy', 'MM','dd', 'hh', 'mm']"
      :default-date="currentDate"
      @change="onDatePickerChange"
      @confirm="onDatePickerConfirm"
    ></md-date-picker>

    // ...
    onDatePickerConfirm(columnsValue) {
      console.log(this.$refs.datePicker.getFormatDate('yyyy/MM/dd hh:mm'))
    },

• Expectant Behaviors

  2018/05/11 16:40

• Actual Behaviors

  2018/05/11 16:mm

请问一下适配问题怎么解决?

能否在文档中加入呢？
因为使用postcss-pxtorem之后也要动态更改html的font-size(类似flexible的方案)

cannot perform font-heading-large * 2

mand-mobile version/项目版本
1.0.8

os version & browser version/操作系统版本&浏览器版本
macos . 10.13.4

node version, package management tool(such as npm/cnpm/yarn) & version for building errors/Node版本，包管理工具(npm/cnpm/yarn等)及版本(如果是构建异常)
node -v
v8.11.1

npm -v
5.6.0

recurring links(CodeSandbox is recommended)/复现链接(尽量以CodeSandbox复现)
https://didi.github.io/mand-mobile/#/docs/components/form/number-keyboard

引用基本键盘，编译出错。
错误提示如下：

Failed to compile.

./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue
Module build failed: Error: helloworld/src/components/HelloWorld.vue:53:36
   49|     top 30%
   50|     left 50%
   51|     z-index 9999
   52|     transform translate(-50%, -50%)
   53|     font-size font-heading-large * 2
------------------------------------------^
   54|     text-shadow 0 4px 20px color-text-minor
   55| </style>
   56| 

cannot perform font-heading-large * 2
    at ".md-example-display" (helloworld/src/components/HelloWorld.vue:2:1)

    at Ident.operate (helloworld/node_modules/stylus/lib/nodes/node.js:234:15)
    at Ident.operate (helloworld/node_modules/stylus/lib/nodes/ident.js:155:33)
    at CachedPathEvaluator.Evaluator.visitBinOp (helloworld/node_modules/stylus/lib/visitor/evaluator.js:581:28)
    at CachedPathEvaluator.Visitor.visit (helloworld/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (helloworld/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitExpression (helloworld/node_modules/stylus/lib/visitor/evaluator.js:644:26)
    at CachedPathEvaluator.Visitor.visit (helloworld/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (helloworld/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitExpression (helloworld/node_modules/stylus/lib/visitor/evaluator.js:644:26)
    at CachedPathEvaluator.Visitor.visit (helloworld/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (helloworld/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitProperty (helloworld/node_modules/stylus/lib/visitor/evaluator.js:687:22)
    at CachedPathEvaluator.Visitor.visit (helloworld/node_modules/stylus/lib/visitor/index.js:28:40)
    at CachedPathEvaluator.Evaluator.visit (helloworld/node_modules/stylus/lib/visitor/evaluator.js:160:18)
    at CachedPathEvaluator.Evaluator.visitBlock (helloworld/node_modules/stylus/lib/visitor/evaluator.js:720:39)
    at CachedPathEvaluator.Visitor.visit (helloworld/node_modules/stylus/lib/visitor/index.js:28:40)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-374 13:3-17:5 14:22-382
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

recurring steps/复现步骤

expectant behaviors/期待行为
正常编译

actual behaviors/实际行为
编译错误

Toast content 属性不支持数字

mand-mobile version/项目版本
1.08

recurring steps/复现步骤
Toast.info(123)

expectant behaviors/期待行为
提示123

actual behaviors/实际行为

[Vue warn]: Invalid prop: type check failed for prop "content". Expected String, got Number.

(found in <Root>)

Selector 组件建议增加点击蒙层关闭

mand-mobile version/项目版本
1.1.0

官网demo，页面返回toast不消失

手机体验

1. 微信扫码进入demo，toast页面
2. 随便选择一个，比如loading
3. loading还没关闭的时候点左上角返回
4. 回到demo主页面，loaidng还在

问题来了

在执行ajax请求开始的时候，显示了loading，延迟时间设置10秒，也就是ajax超时时间，
服务器或者网络卡了一下，5秒了还没返回结果，用户点了返回，回到上一个页面，loading会一直等到超时才消失

Toast.info等系列方法默认duration问题

mand-mobile version/项目版本
1.1.1

文档都是写的默认1000ms，代码里都是3000ms

mand-mobile是否支持nuxt服务端渲染

mand-mobile是否支持nuxt服务端渲染

Picker 选择器运行在真机上，似乎对不准。

https://didi.github.io/mand-mobile/#/docs/components/feedback/picker

Picker 选择器运行在真机上，似乎对不准。
线压在字的上面。