@forzoom/mobile-button NPM

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`样式类