Vue 实现卡片切换动画+input模糊搜索的字匹配正则变色

上优

已于 2023-12-30 17:13:20 修改

阅读量1k

点赞数 22

文章标签： vue.js javascript ecmascript

于 2023-12-30 10:08:02 首次发布

本文链接：https://blog.csdn.net/weixin_65084919/article/details/135302488

版权

在这里插入图片描述

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

    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- <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;
      }

      .left_container {
        background: url('https://images8.alphacoders.com/132/thumbbig-1323361.webp')
          no-repeat center center;
        background-size: cover;
        border-radius: 15px;
        position: absolute;
        width: 50%;
        height: 100%;
        bottom: 0;
        left: 0;
        z-index: 999;
        transition: all 1s;
        transform: translateX(0);
      }
      .transform-full {
        transform: translateX(100%);
      }
    </style>
  </head>

  <body>
    <div id="app" class="h-100vh flex justify-center items-center">
      <div class="absolute left-0 right-0 top-0 bottom-0">
        <div
          class="flex absolute top-50% left-50% shadow rounded-15px w-50vw h-30vh translate-[-50%]"
        >
          <div
            :class="['left_container',{ 'transform-full': mode == 'registered'}  ]"
          ></div>
          <div class="flex flex-1 flex-col justify-center">
            <div class="flex justify-center w-full">
              <el-radio-group v-model="mode">
                <el-radio-button label="registered">注册</el-radio-button>
                <el-radio-button label="login">登录</el-radio-button>
              </el-radio-group>
            </div>
            <div class="flex justify-center mt-20px">
              <el-autocomplete
                :fetch-suggestions="searchOrderSendInfo"
                placeholder="请输入内容"
                class="search_inp"
                @select="handleSelect"
                v-model="search"
              >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>

                <template slot-scope="{ item }">
                  <div class="flex items-center">
                    <div v-html="highlightText(item.name, search, 'red')"></div>

                    <div class="ml-auto text-#999999">{{item.date}}</div>
                  </div>
                </template>
              </el-autocomplete>
            </div>
          </div>
          <div class="flex flex-1 flex-col justify-center">
            <div class="flex justify-center"></div>

            <div class="flex justify-center w-full">
              <el-radio-group v-model="mode">
                <el-radio-button label="registered">注册</el-radio-button>
                <el-radio-button label="login">登录</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            mode: 'login',
            search: '',
            fetchTimer: null,
            option: [
              {
                name: '无职转生',
                date: '2022-10-1',
              },
              {
                name: '轻音少女',
                date: '2022-10-2',
              },
              {
                name: '紫罗兰永恒花园',
                date: '2022-10-3',
              },
              {
                name: '葬送得芙莉连',
                date: '2022-10-4',
              },
              {
                name: '天罡传',
                date: '2022-10-5',
              },
              {
                name: '死亡笔记',
                date: '2022-10-6',
              },
            ],
          };
        },
        methods: {
          handleSelect(item) {
            console.log(item);
          },
          searchOrderSendInfo(search, cb) {
            if (search.trim()) {
              if (this.fetchTimer) {
                clearTimeout(this.fetchTimer);
              }

              this.fetchTimer = setTimeout(() => {
                let data = this.option.filter((v) => v.name.includes(search));
                cb(data);
              }, 800);
            }
          },
          highlightText(text, pattern, color) {
            const regex = new RegExp(pattern, 'g');
            let str = '';
            if (text) {
              str = text.replace(regex, (match) => {
                return `<span style="color:${color}">${match}</span>`;
              });
            }
            return str;
          },
        },
      });
    </script>
  </body>
</html>

上优

关注

22
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
Vue 实现卡片切换动画+input模糊搜索的字匹配正则变色

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet"
复制链接

扫一扫