Vue 手动实现动态多选

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    

    <link rel="stylesheet" href="./vue/element_ui.css" />
    <script src="./vue/vue.js">script>
    <script src="./vue/unocss.js">script>
    <script src="./vue/element_ui.js">script>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .check_dui {
        border-left: 18px solid transparent;
        border-right: 0 solid transparent;
        border-bottom: 18px solid #0fa3ff;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
      }

      .check_dui .dui_icon {
        transform: translateX(-85%) translateY(-10px);
        font-size: 12px;
        color: #ffffff;
      }
    style>
  head>
  <body>
    <div id="app" class="h-100vh flex justify-center items-center">
      <div class="flex w-300px">
        <div
          class="flex flex-col h-300px w-150px gap-15px overflow-y-auto overflow-x-hidden left_scrollbar"
        >
          <div
            v-for="cartoon in settingBox.cartoon"
            class="cursor-pointer w-140px h-40px leading-40px px-10px rounded-3px relative border-1px border-solid"
            :class="cartoon.id == settingBox.idActive ? 'border-#0fa3ff' : ' border-#d5d7e2'"
            @click="changeClassify(cartoon.id)"
          >
            {{cartoon.name}}
            <div
              class="check_dui absolute"
              v-show="cartoon.id == settingBox.idActive"
            >
              <i class="el-icon-check dui_icon">i>
            div>
          div>
        div>
        <div
          class="flex-1 w-0 h-480px pl-20px border-l-solid border-1px border-#DDDFE4 flex flex-col overflow-x-hidden"
        >
          <div class="text_title text-14px mb-10px">选择角色 :div>

          <div class="flex-1 h-0 left_scrollbar overflow-y-auto">
            <div class="flex flex-wrap gap-15px">
              <div
                v-for="item in settingBox.skuList"
                :key="item.role"
                @click="settingCheckSku(item.role)"
                :class="settingBox.selectSku.includes(item.role) ? 'bg-#0fa3ff color-#fff' : 'border-1px border-solid border-#d5d7e2'"
                class="relative h-32px w-full flex items-center rounded-2px px-8px rounded-3px color-#606266 text-14px cursor-pointer"
              >
                <div class="flex-1 !line-clamp-1">{{item.roleName}}div>
              div>
            div>
          div>

          <div class="flex justify-end mt-15px">
            <el-button size="small" type="primary" @click="saveCartoon"
              >确定el-button
            >
          div>
        div>
      div>
    div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            settingBox: {
              idActive: 1,
              selectSku: [],
              skuList: [],
              cartoon: [
                {
                  name: '无职转生',
                  id: 1,
                },
                {
                  name: '葬送得芙莉莲',
                  id: 2,
                },
              ],
            },
          };
        },
        watch: {
          'settingBox.idActive': {
            handler(item) {
              if (item == 1) {
                this.settingBox.skuList = [
                  {
                    roleName: '鲁迪乌斯',
                    role: 1,
                  },
                  {
                    roleName: '艾莉丝',
                    role: 2,
                  },
                  {
                    roleName: '希露菲',
                    role: 3,
                  },
                  {
                    roleName: '洛琪希',
                    role: 4,
                  },
                ];
              } else {
                this.settingBox.skuList = [
                  {
                    roleName: '芙莉莲',
                    role: 5,
                  },
                  {
                    roleName: '菲伦',
                    role: 6,
                  },
                  {
                    roleName: '休塔尔克',
                    role: 7,
                  },
                ];
              }
            },
            immediate: true,
            deep: true,
          },
        },
        computed: {},
        methods: {
          settingCheckSku(id) {
            if (this.settingBox.selectSku.includes(id)) {
              this.settingBox.selectSku = this.settingBox.selectSku.filter(
                (v) => v != id
              );
            } else {
              this.settingBox.selectSku.push(id);
            }
          },
          changeClassify(id) {
            this.settingBox.idActive = id;
          },

          saveCartoon() {
            console.log(this.settingBox.selectSku);
          },
        },
      });
    script>
  body>
html>

你可能感兴趣的:(vue.js,javascript,前端)