Cell 组件使用教程
优质
小牛编辑
141浏览
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中使用
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| 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 |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @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 | -- |