cell props

属性	描述	类型	默认值
title	标题	string	-
value	文案	string	-
required	是否为必填项	boolean	false
horizontalPadding	容器水平方向的padding值	number	14
verticalPadding	容器竖直方向的padding值	number	12
leftStyleOption	左边区域的样式	object	-
rightStyleOption	右边区域的样式	object	-
leftIconOption	左边icon的配置，具体参照icon组件	object	{}
rightIconOption	右边icon的配置，具体参照icon组件	object	{}

leftIconOption和rightIconOption的配置

属性	描述	类型	默认值
name	icon的name或者是图片地址	string	-
color	icon的颜色，当icon为图片地址时无效	string	inherit
size	icon的大小, 如果时图片的话，要设置不同的宽高可用,分隔	string	inherit
classPrefix	icon的字体库的前缀，可用来扩展字体库	string	vill-icon-

cell slot

名称	描述
title	标题的替换
rightCell	右边区域的替换

cell events

事件	说明	回调参数
click	cell点击事件	event
rightClick	rightCell	event

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">默认</p>
      <vill-cell
        title="左边的文案"
        value="右边的文案"
        @click="handleClick"
        @rightClick="handleRightClick"
      />
    </div>
    <div class="items">
      <p class="item_title">左右icon</p>
      <vill-cell
        title="左边的文案"
        value="右边的文案"
        :leftIconOption="{
          url: 'social_github',
          size: '16',
          color: 'orange'
        }"
        :rightIconOption="{
          url: 'arrow_right',
          size: '16'
        }"
      />
      <vill-cell
        title="左边的文案"
        value="右边的文案"
        :horizontalPadding="0"
        :verticalPadding="7"
        :rightStyleOption="{
          color: 'orange'
        }"
        :leftStyleOption="{
          color: 'red'
        }"
        :leftIconOption="{
          url: $withBase('/assets/imgs/logo.png'),
          size: '16',
          color: 'orange'
        }"
        :rightIconOption="{
          url: $withBase('/assets/imgs/logo.png'),
          size: '16, 20'
        }"
      />
    </div>
    <div class="items">
      <p class="item_title">插槽</p>
      <vill-cell
        title="左边的文案"
        value="右边的文案"
        :required="true"
        :rightIconOption="{
          url: 'edit',
          size: '16'
        }"
      >
        <template #title="{data}">
          --{{data}}--
        </template>
        <template #rightCell>
          <vill-input
            v-model="inputValue"
            placeholder="请输入内容"
            :hasBorder="false"
            :height="24"
          />
        </template>
      </vill-cell>
      <p class="item_change">{{inputValue}}</p>
    </div>
    <div class="items">
      <p class="item_title">极限值测试</p>
      <vill-cell
        title="左边的文案左边的文案左边的文案左边的文案左边的文案"
        value="右边的文文案右边的文案右边的文案右边的文案右边的文案"
        :leftIconOption="{
          url: 'social_github',
          size: '16',
          color: 'orange'
        }"
        :rightIconOption="{
          url: 'arrow_right',
          size: '16'
        }"
      />
      <vill-cell
        ref="cell"
        title="左边的文案左边的文案左边的文案左边的文案左边的文案"
        :rightIconOption="{
          url: 'arrow_right',
          size: '16'
        }"
      />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      a: false
    }
  },
  methods: {
    handleRightClick(event) {
      console.log('right click', event)
    },

    handleClick(event) {
      console.log('click', event)
    }
  }
}
</script>