<template>
  <Container :needPadding="true">
    <template v-slot:header>
      <WlHeader :needBottomBorder="true">MtPicList 图片列表</WlHeader>
    </template>
    <template v-slot:main>
      <Title>基础使用</Title>
      <MtPicList
        :list="[
          'https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg',
          'https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg',
        ]"
        v-model="selected_single"
      />
      <Title>单选</Title>
      <MtPicList
        v-model="selected_single2"
        imgKey="img"
        valueKey="key"
        :list="[
          { img: 'https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg', key: '1' },
          {img:'https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg', key: '3',},
        ]"
      />
      <Title>多选项</Title>
      <MtPicList
        imgKey="img"
        valueKey="key"
        :list="[
          { img: 'https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg', key: '1' },
          {
            img:
              'https://wlmvp-cos.weiling.cn/frontend/xiaowei.jpg',
            key: '3',
          },
        ]"
        v-model="selected"
        :isMultiple="true"
      />
    </template>
  </Container>
</template>

<script>
import Title from "../components/Title";
import Container from "../components/Container";
export default {
  name: "MtPicList-Example",
  components: { Title, Container },
  data() {
    return {
      selected: ["1"],
      selected_single2: {key: "1"},
      selected_single: "https://wlmvp-cos.weiling.cn/frontend/images/cat.jpeg",
    };
  },
};
</script>
