u-list-view.vue

    0.2.6 • Public • Published

    列表视图(ListView)

    示例

    基本形式

    有两种书写方式,这里推荐使用Tag方式,使用起来更加灵活。

    Tag方式

    <u-list-view>
        <u-list-view-item>苹果</u-list-view-item>
        <u-list-view-item>香蕉</u-list-view-item>
        <u-list-view-item>蛋糕</u-list-view-item>
    </u-list-view>

    Data方式

    <u-list-view :data="[
        { text: '苹果' },
        { text: '香蕉' },
        { text: '蛋糕' },
    ]"></u-list-view>

    选项值

    Tag方式

    <u-list-view value="C">
        <u-list-view-item value="A">苹果</u-list-view-item>
        <u-list-view-item value="B">香蕉</u-list-view-item>
        <u-list-view-item value="C">蛋糕</u-list-view-item>
    </u-list-view>

    Data方式

    <u-list-view value="C" :data="[
        { text: '苹果', value: 'A' },
        { text: '香蕉', value: 'B' },
        { text: '蛋糕', value: 'C' },
    ]"></u-list-view>

    只读、禁用、禁用某一项

    Tag方式

    <u-list-view value="C" readonly>
        <u-list-view-item value="A">苹果</u-list-view-item>
        <u-list-view-item value="B">香蕉</u-list-view-item>
        <u-list-view-item value="C">蛋糕</u-list-view-item>
    </u-list-view>
    <u-list-view value="C" disabled>
        <u-list-view-item value="A">苹果</u-list-view-item>
        <u-list-view-item value="B">香蕉</u-list-view-item>
        <u-list-view-item value="C">蛋糕</u-list-view-item>
    </u-list-view>
    <u-list-view value="C">
        <u-list-view-item value="A">苹果</u-list-view-item>
        <u-list-view-item value="B" disabled>香蕉</u-list-view-item>
        <u-list-view-item value="C">蛋糕</u-list-view-item>
    </u-list-view>

    Data方式

    <u-list-view value="C" :data="[
        { text: '苹果', value: 'A' },
        { text: '香蕉', value: 'B', disabled: true },
        { text: '蛋糕', value: 'C' },
    ]"></u-list-view>

    可取消

    尝试在同一个选项上点击两次。

    <u-list-view value="C" cancelable>
        <u-list-view-item value="A">苹果</u-list-view-item>
        <u-list-view-item value="B">香蕉</u-list-view-item>
        <u-list-view-item value="C">蛋糕</u-list-view-item>
    </u-list-view>

    多项

    <template>
    <u-list-view multiple v-model="value">
        <u-list-view-item value="A">苹果</u-list-view-item>
        <u-list-view-item value="B">香蕉</u-list-view-item>
        <u-list-view-item value="C">蛋糕</u-list-view-item>
    </u-list-view>
    <p>value: {{ value }}<p>
    </template>
     
    <script>
    export default {
        data() {
            return { value: ['B', 'C'] };
        },
    };
    </script>

    ListView API

    Attrs/Props

    Attr/Prop Type Default Description
    data Array<{ text, value }> Data书写方式中的数据列表
    value.sync, v-model Any 当前选择的值
    field String 'text' 显示文本字段
    cancelable Boolean false 是否可以取消选择
    multiple Boolean false 是否可以多选
    readonly Boolean false 是否只读
    disabled Boolean false 是否禁用

    Slots

    Slot Description
    (default) 在插槽中插入<u-list-view-item>子组件

    Events

    @before-select

    选择某一项前触发

    Param Type Description
    $event.value Any 选择项的值
    $event.oldValue Any 旧的值
    $event.item Object 选择项相关对象
    $event.itemVM ListViewItem 选择项子组件
    $event.preventDefault Function 阻止选择流程

    @input

    选择某一项时触发

    Param Type Description
    $event Any 选择项的值

    @select

    选择某一项时触发

    Param Type Description
    $event.value Any 改变后的值
    $event.oldValue Any 旧的值
    $event.item Object 单选模式中,选择项相关对象
    $event.itemVM ListViewItem 单选模式中,选择项子组件
    $event.items Array<Object> 多选模式中,所有选中项相关对象的数组
    $event.itemVMs Array<ListViewItem> 多选模式中,所有选中项子组件的数组

    ListViewItem API

    Attrs/Props

    Attr/Prop Type Default Description
    value Any 此项的值
    disabled Boolean false 禁用此项
    item Object 相关对象。当选择此项时,抛出的事件会传递该对象,便于开发

    Slots

    Slot Description
    (default) 在插槽中插入文本或HTML

    Events

    @before-select

    选择此项前触发

    Param Type Description
    $event.value Any 此项的值
    $event.item Object 此项的相关对象
    $event.itemVM ListViewItem 此组件
    $event.preventDefault Function 阻止选择流程

    Install

    npm i u-list-view.vue

    DownloadsWeekly Downloads

    17

    Version

    0.2.6

    License

    MIT

    Last publish

    Collaborators

    • rainfore