vux使用要点记录二(Cell的使用方法)

cell的使用

• 注册和导入组件

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

• 使用组件

<group>
   <cell>
     <div slot="title">规格：<checker
       v-model="demo5"
       default-item-class="demo5-item"
       selected-item-class="demo5-item-selected"
     >
       <checker-item
           v-for="i in [1, 2, 3]"
           :key="i"
           :value="i"
           >￥{{i*300}}</checker-item>
       </checker>
     </div>
   </cell>
</group>

使用说明

添加 is-link 有右侧箭头 > ,不添加则没有

slot的具体使用:

• title – 左边标题内容,可以添加其他组件
• child – cell的直接子元素，因此可以添加一个相对于cell绝对定位的元素
• icon – 修改左侧图标
• after-title – 修改右侧图标

给组件添加点击事件

一般的注册方式:@click="事件处理函数"是没有办法处理的,需要加上native,具体方式为:@click.native=“事件处理函数”.

详情参考上面实例,具体操作,可点击x-header使用规则使用
参考链接:https://doc.vux.li/zh-CN/components/cell.html