79 篇博文 含有标签「前端」

width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale
minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale
user-scalable=no——是否允许用户手动缩放(yes或者no)

export default {
  provide: {
    user: {
      name: 'John Doe',
      age: 30
    }
  }
}

 export default {
  inject: ['user'],
  mounted() {
    console.log(this.user.name); // John Doe
  }
}

Vue.prototype.$eventBus = new Vue()

methods: {
  handleClick() {
    this.$eventBus.$emit('myEvent', 'hello')
  }
}

 created() {
  this.$eventBus.$on('myEvent', (message) => {
    console.log(message)
  })
}

try_files $uri /index.html;

Vue.directive('bgColor', {
  bind(el, binding) {
    el.style.backgroundColor = binding.value
  }
})

    <h1 v-bgColor="'red'">这是一个h1</h1>
    <h1>这是一段文字</h1>
    <h1>这是一个标题</h1>
    <h1>这是一段内容</h1>

<template>
  <div class="foo">
    <p class="bar">Hello, world!</p>
  </div>
</template>

<style scoped>
  .foo {
    background-color: blue;
  }
  .bar {
    color: red;
  }
</style>

 <template>
  <div class="foo" data-v-xxxxxx>
    <p class="bar" data-v-xxxxxx>Hello, world!</p>
  </div>
</template>

<style>
  .foo[data-v-xxxxxx] {
    background-color: blue;
  }
  .bar[data-v-xxxxxx] {
    color: red;
  }
</style>

  // Vue2
  AsyncComp:() => import('./xxx');

  // Vue3
  import { defineAsyncCompontent } from 'vue';
  const { defineAsyncCompontent } = 'Vue';

<component :is=""></component>
<template>
  <div class="login-tab">
    <div class="login-nav">
      <div
        v-for="tab of tabData"
        :key="tab"
        :class="['nav-item', { active: currentTab === tab }]"
        @click="changeTab(tab)"
      >{{ tab }}</div>
    </div>
    <div class="login-component">
      <keep-alive>
        <component :is="currentTabComponent"></component>
      </keep-alive>
    </div>
  </div>
</template>
​
<script>
import AccountLogin from './AccountLogin';
​
export default {
  name: 'MainLogin',
  components: {
    AccountLogin,
    QrcodeLogin: () => import('./QrcodeLogin'),
    MobileLogin: () => import('./MobileLogin')
  },
  data () {
    return {
      currentTab: 'Account',
      tabData: ['Account', 'Qrcode', 'Mobile']
    }
  },
  methods: {
    changeTab (tab) {
      this.currentTab = tab;
    }
  },
  computed: {
    // 拼出来组件名
    currentTabComponent () {
      return this.currentTab.toLowerCase() + '-login';
    }
  }
}
</script>

<keep-alive exclude="List,Intro">
  <component :is="currentComponent"></component>
</keep-alive>

<keep-alive include="List,Intro">
  <component :is="currentComponent"></component>
</keep-alive>

<keep-alive :max="5">
  <!-- 需要缓存的组件 -->
</keep-alive>

<keep-alive :include="/n|c/">
    <component :is="currentComponent"></component>
</keep-alive>

<keep-alive include="List">
  <component :is="currentComponent"></component>
</keep-alive>

import comp1 from './components/Comp1';
import comp2 from './components/Comp2';
import comp3 from './components/Comp3';
​
const oButtons = document.getElementById('buttons');
const oWrapper = document.getElementById('wrapper');
​
const App = {
  components: {
    comp1,
    comp2,
    comp3
  },
  compCache: {},
  init() {
    this.bindEvent();
  },
  mounted(callback) {
    callback && callback();
  },
  activated(callback) {
    callback && callback();
  },
  bindEvent() {
    oButtons.addEventListener('click', this.handleBtnClick.bind(this), false);
  },
  handleBtnClick(e) {
    const tar = e.target,
        tagName = tar.tagName.toLowerCase();
​
    if (tagName === 'span') {
      const key = tar.dataset.key;
​
      let vNode = null;
​
      if (this.compCache[key]) {
        vNode = this.compCache[key];
      } else {
        vNode = this.setVNode(this.components[key]);
​
        if (this.checkKeepAlive(oWrapper)) {
          this.compCache[key] = vNode;
        }
      }
​
      const rNode = this.setRNode(vNode);
      oWrapper.innerHTML = '';
      oWrapper.appendChild(rNode);
​
      if (this.checkKeepAlive(oWrapper)) {
        this.activated(() => {
          console.log(key, 'activated');
        });
      } else {
        this.mounted(() => {
          console.log(key, 'mounted');
        });
      }
    }
  },
  setVNode(comp) {
    const { template, name } = comp;
​
    const regTag = template.match(/\<(.+?)\>/)[1],
        regContent = template.match(/\>(.+?)\</)[1];
​
    return {
      tag: regTag,
      children: regContent,
      mark: name
    };
  },
​
  setRNode(vNode) {
    const tag = vNode.tag;
    const content = vNode.children;
​
    const node = document.createElement(tag);
    node.innerText = content;
​
    return node;
  },
​
  checkKeepAlive(wrapper) {
    const outerWrapper = wrapper.parentNode.tagName.toLowerCase();
    return outerWrapper === 'keep-alive';
  }
};
​
App.init();

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <input type="text" id="search" placeholder="请输入搜索关键词">
    <ul id="suggestion-list"></ul>
  </div>
  <script>
    const searchInput = document.getElementById('search');
    const suggestionList = document.getElementById('suggestion-list');
    let suggestionData = []; // 保存联想词搜索结果的数组

    // 监听搜索框的输入事件
    searchInput.addEventListener('input', debounce(handleInput, 100));

    // 处理搜索框输入事件
    function handleInput() {
      const keyword = searchInput.value.trim(); // 获取搜索关键词
      if (keyword === '') {
        // 如果搜索关键词为空，则清空联想词搜索结果
        suggestionData = [];
        renderSuggestionList();
        return;
      }

      // 发送 Ajax 请求获取联想词搜索结果
      fetch(`https://jsonplaceholder.typicode.com/posts`)
        .then(response => response.json())
        .then(data => {
          suggestionData = data.map((e) => e.title).filter((n) => n.includes(keyword));
            // 将请求结果保存到 suggestionData 数组中
          renderSuggestionList(); // 渲染联想词搜索结果列表
        })
        .catch(error => {
          console.error(error);
        });
    }

    // 渲染联想词搜索结果列表
    function renderSuggestionList() {
      suggestionList.innerHTML = ''; // 先清空列表
      suggestionData.forEach(item => {
        const li = document.createElement('li');
        li.innerText = item;
        suggestionList.appendChild(li);
      });
    }

    // debounce 函数，用于防抖
    function debounce(fn, delay) {
      let timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(fn, delay);
      };
    }

  </script>
</body>

</html>