cell

Cell

demo 原始链接demo 源码编辑文档组件源码

cell - 图1

二维码

cell - 图2

Install

安装

局部注册

全局注册

import { Cell } from 'vux'
export default {
  components: {
    Cell
  }
}

// 在入口文件全局引入
import Vue from 'vue'
import { Cell } from 'vux'
Vue.component('cell', Cell)

  <group>
    <cell title="title" value="value"></cell>
  </group>

Cell 组件只能在Group中使用

API

名字	类型	默认值	说明	版本要求
title	string		左边标题文字	—
value	string		右侧文字，复杂的样式布局请使用slot	—
inline-desc	string		标题下面文字，一般为说明文字	—
link	string object		点击链接，可以为http(s)协议，也可以是 vue-router 支持的地址形式	—
is-link	boolean	false	是否为链接，如果是，右侧将会出现指引点击的右箭头	—
primary	string	title	可选值为 ['title', 'content']，对应的div会加上weui_cell_primary类名实现内容宽度自适应	—
is-loading	boolean	false	是否显示加载图标，适用于异步加载数据的场景	v2.2.0
value-align	string	left	文字值对齐方式，可选值为 left right。当设为 right 时，primary 值将会设为 content	v2.2.0
border-intent	boolean	true	是否显示边框与左边的间隙	v2.2.1-rc.1
arrow-direction	string		右侧箭头方向，可选有 up down	v2.2.1-rc.1
disabled	boolean		对 label 和箭头(如果使用 is-link )显示不可操作样式	v2.2.2
align-items	string	center	align-items 样式值	v2.6.4

名字	说明	版本要求
默认插槽	右侧内容，相比于value的优点是可以用复杂的样式或者调用组件	—
value	[废弃] 同默认slot	—
icon	标题左侧的图像位置	—
after-title	标题右侧位置	—
child	cell的直接子元素，因此可以添加一个相对于cell绝对定位的元素	—
inline-desc	inline-desc 内容，和 prop:inline-desc 功能一样，但是可以使用 html	v2.2.1-rc.6
title	title 插槽，方便自定义样式	v2.3.3

Variables

## 样式变量

名字	默认值	说明	继承自变量
@cell-label-color	#000	—
@cell-font-size	17px	—
@cell-tips-font-size	14px	—
@cell-default-arrow-color	#C8C8CD	—
@cell-disabled-arrow-color	#e2e2e2	—
@cell-default-arrow-border-width	2px	—
@cell-default-arrow-width	6px	—
@cell-value-color	#999	—
@cell-placeholder-color	#999	—
@cell-body-label-color	#000	—

Issues