当前位置: 首页 > 文档资料 > VUX 中文文档 >

Cell 组件使用教程

优质
小牛编辑
133浏览
2023-12-01

安装

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中使用

属性

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

插槽

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

样式变量

名字默认值说明继承自变量
@cell-label-color#000--
@cell-font-size17px--
@cell-tips-font-size14px--
@cell-default-arrow-color#C8C8CD--
@cell-disabled-arrow-color#e2e2e2--
@cell-default-arrow-border-width2px--
@cell-default-arrow-width6px--
@cell-value-color#999--
@cell-placeholder-color#999--
@cell-body-label-color#000--