@forzoom/mobile-button
规范网页中使用按钮的代码
Last updated 7 months ago by forzoom .
MIT · Original npm · Tarball · package.json
$ cnpm install @forzoom/mobile-button 
SYNC missed versions from official npm registry.

Target

规范网页中使用按钮的代码

Usage

Basic

import MobileButton from '@forzoom/mobile-button';
Vue.component('MobileButton', MobileButton);
<MobileButton tag="router-link"
	name="primary"
	to="/path/to/target"
	:is-block="true"
	:is-disabled="true">
	click me
</MobileButton>

生成的html

<router-link class="btn btn-mobile btn-primary btn-block disabled" to="/path/to/target">
	click me
</router-link>

使用类型为Object的to

<MobileButton tag="router-link"
	name="primary"
	tag="router-link"
	:to="{ name: 'path_to_target' }"
	:is-block="true"
	:is-disabled="true">
	click me
</MobileButton>

Props

名称 类型 默认 描述
id String null 添加到外层元素的id
class-list Object/Array null 添加到外层元素的class
tag String a 生成的元素,例如可以是div/a/router-link等
name String null 添加btn-${name}样式类,如果是空则不添加
to Object/String null 点击导航地址,类似于router-link中的to。只有当tag的值为router-link时,to的类型允许是Object
is-block Boolean false 是否添加btn-block样式类
is-disabled Boolean false 是否添加disabled样式类
is-selected Boolean false 是否添加selected样式类

备注: 由于组件使用render函数渲染,暂时需要使用id和classList来传入id和class

Events

名称 参数 描述
click (event) 非disabled情况下点击将触发该事件
click-when-disabled (event) disabled情况下点击将触发该事件

Tip

  1. 为了iOS能够正常触发active效果,组件本身监听了touchstart事件
  2. 由于Vue的逻辑,实际上使用class就可以起到classList的效果

Current Tags

  • 0.1.4                                ...           latest (7 months ago)

9 Versions

  • 0.1.4                                ...           7 months ago
  • 0.1.3                                ...           a year ago
  • 0.1.2 [deprecated]           ...           a year ago
  • 0.1.1 [deprecated]           ...           a year ago
  • 0.1.0 [deprecated]           ...           a year ago
  • 0.0.9                                ...           2 years ago
  • 0.0.8                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 2
This Month 4
Last Day 2
Last Week 2
Last Month 3
Dependencies (1)
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2017 © taobao.org |