分类所有下的文章

2024-08-14

抱歉，由于原始帖子中包含了不适宜的内容，我无法提供原始的Vue网站模板链接。如果您有关于Vue网站模板的具体问题，我很乐意提供帮助。

Vue-全局事件总线

2024-08-14

Vue 的事件总线，即 Event Bus，是一种组件间通信的方式。它可以非常方便地实现跨组件通信。

以下是一个简单的 Vue 事件总线的示例：

首先，创建一个新的 Vue 实例作为事件总线：




// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

然后，在任何组件中，你可以使用这个事件总线发送事件：




// 组件 A
import { EventBus } from './EventBus.js';
 
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('someEvent', 'Hello, Event Bus!');
    }
  }
}

接收事件：




// 组件 B
import { EventBus } from './EventBus.js';
 
export default {
  created() {
    EventBus.$on('someEvent', (message) => {
      console.log(message);
    });
  },
  beforeDestroy() {
    EventBus.$off('someEvent');
  }
}

记得在组件销毁时移除事件监听器，以避免潜在的内存泄漏。

2024-08-14




<template>
  <div class="svg-container" ref="svgContainer">
    <img src="@/assets/your-svg-image.svg" alt="SVG Image" @load="initSvgPanZoom" />
  </div>
</template>
 
<script>
import svgPanZoom from 'svg-pan-zoom';
 
export default {
  methods: {
    initSvgPanZoom() {
      const element = this.$refs.svgContainer;
      const instance = svgPanZoom(element.querySelector('svg'), {
        zoomEnabled: true,
        controlIconsEnabled: true,
        fit: true,
        center: true,
        minZoom: 1
      });
      
      // 你可以添加更多的事件监听或者其他交互逻辑
    }
  }
};
</script>
 
<style>
.svg-container {
  width: 100%;
  height: 600px; /* 或者其他你需要的尺寸 */
  overflow: hidden;
}
</style>

这个例子中，我们首先在模板中定义了一个div容器用来放置SVG，并通过ref属性为其设置了一个引用名。然后，我们在img标签的src属性中指定了SVG文件的路径，并添加了一个@load事件监听器，它会在图片加载完成后调用initSvgPanZoom方法。在这个方法中，我们使用了svg-pan-zoom插件来初始化SVG的放大缩小功能。通过传递配置对象，我们可以定制放大缩小的行为，例如是否启用缩放、是否显示控制图标等。

Vue实现可拖拽边界布局

2024-08-14




<template>
  <div class="container">
    <div class="split-pane" ref="splitPane">
      <div class="pane" ref="leftPane">左侧内容</div>
      <div class="pane" ref="rightPane">右侧内容</div>
      <div class="split-bar" ref="splitBar" @mousedown="initDrag"></div>
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
    initDrag(e) {
      e.preventDefault();
      document.addEventListener('mousemove', this.doDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    doDrag(e) {
      const splitPane = this.$refs.splitPane;
      const splitBar = this.$refs.splitBar;
      const x = e.clientX - splitPane.offsetLeft;
      const minWidth = splitBar.offsetWidth;
      const maxWidth = splitPane.offsetWidth - minWidth;
      const leftWidth = Math.min(maxWidth, Math.max(minWidth, x));
      splitBar.style.left = `${leftWidth}px`;
    },
    stopDrag() {
      document.removeEventListener('mousemove', this.doDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
}
</script>
 
<style scoped>
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.split-pane {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.pane {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.split-bar {
  width: 10px;
  height: 100%;
  cursor: col-resize;
  background-color: #ccc;
  position: absolute;
  left: 50%;
}
</style>

这段代码提供了一个简单的Vue组件，用于实现一个可拖拽分割栏的布局。组件包含三个部分：<template> 定义了布局结构，<script> 中定义了相关的方法来处理拖拽事件，<style> 中定义了一些基本的CSS样式来美化界面。代码使用了mousedown、mousemove和mouseup事件来处理拖拽行为，并限制了分割栏的宽度以保证布局的合理性。

Vue3中props传参（多种数据类型传参方式）

2024-08-14

在Vue 3中，props是用于组件间传递数据的一种机制。你可以通过props传递多种数据类型。以下是一些示例：

传递一个字符串：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent title="Hello, World!" />
</template>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ title }}</div>
</template>
 
<script>
export default {
  props: ['title']
}
</script>

传递一个数字：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent count="10" />
</template>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ count }}</div>
</template>
 
<script>
export default {
  props: ['count']
}
</script>

传递一个布尔值：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent isActive />
</template>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ isActive }}</div>
</template>
 
<script>
export default {
  props: ['isActive']
}
</script>

传递一个数组：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent items="1, 2, 3" />
</template>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ items }}</div>
</template>
 
<script>
export default {
  props: ['items']
}
</script>

传递一个对象：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent attributes="{ id: 1, name: 'Vue' }" />
</template>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ attributes }}</div>
</template>
 
<script>
export default {
  props: ['attributes']
}
</script>

使用v-bind动态绑定props：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent :title="message" />
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  }
}
</script>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ title }}</div>
</template>
 
<script>
export default {
  props: ['title']
}
</script>

传递多个props：




<!-- ParentComponent.vue -->
<template>
  <ChildComponent title="Hello, World!" count="10" isActive />
</template>
 
<!-- ChildComponent.vue -->
<template>
  <div>{{ title }} - {{ count }} - {{ isActive }}</div>
</template>
 
<script>
export default {
  props: ['title', 'count', 'isActive']
}
</script>

使用类型检查：




<!-- ChildComponent.vue -->
<template>
  <div>{{ title }}</div>
</template>
 
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

使用默认值：




<!-- ChildComponent.vue -->
<template>
  <div>{{ count }}</div>
</template>
 
<script>
export default

Vue(3.3.4)+three.js(0.161.0)实现3D可视化地图

2024-08-14




<template>
  <div id="container"></div>
</template>
 
<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 
export default {
  name: 'ThreeJsMap',
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      const container = document.getElementById('container');
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(container.offsetWidth, container.offsetHeight);
      container.appendChild(this.renderer.domElement);
 
      this.camera.position.set(0, 10, 25);
 
      this.addLights();
      this.addMap();
 
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
 
      window.addEventListener('resize', this.onWindowResize.bind(this), false);
    },
    addLights() {
      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
      this.scene.add(ambientLight);
 
      const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
      directionalLight.position.set(1, 1, 1);
      this.scene.add(directionalLight);
    },
    addMap() {
      const loader = new GLTFLoader();
      loader.load('models/map.gltf', (gltf) => {
        gltf.scene.scale.set(0.01, 0.01, 0.01);
        this.scene.add(gltf.scene);
      });
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
      this.controls.update();
    },
    onWindowResize() {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    }
  }
};
</script>
 
<style>
#container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

这段代码展示了如何在Vue组件中初始化Three.js场景，包括添加灯光、加载模型以及实现场景的动态渲染和响应式窗口缩放。这是一个很好的Three.js和Vue结合的入门示例。

【Vue】路由

2024-08-14

在Vue中，路由是指在Vue应用的不同页面间切换的机制。Vue Router是Vue.js的官方路由管理器。它和Vue.js的核心深度集成，可以非常简单的实现SPA（Single Page Application）的页面切换。

以下是一个简单的Vue Router的使用示例：

首先，安装Vue Router：




npm install vue-router

然后，在你的Vue项目中设置Vue Router：




// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
 
Vue.use(VueRouter);
 
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];
 
const router = new VueRouter({
  routes
});
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

在上述代码中，我们定义了两个路由，分别指向Home和About组件。然后创建了一个VueRouter实例，并将其传递给Vue实例。

在你的Vue模板中，你可以使用<router-link>来创建导航链接，以及<router-view>来显示当前路由的组件：




<!-- App.vue -->
<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
 
    <router-view></router-view>
  </div>
</template>

当用户点击<router-link>时，Vue Router会切换当前的<router-view>至相应的组件。

vue 项目关于不同分辨率的电脑网页适配方案

2024-08-14

在Vue项目中，可以使用CSS媒体查询来实现不同分辨率的适配。以下是一个简单的例子：




/* 全局样式文件，比如 styles.css 或 app.css */
 
/* 设置默认样式 */
body {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
  padding: 0;
}
 
/* 针对宽度为1280px及以下的屏幕的样式 */
@media screen and (max-width: 1280px) {
  body {
    background-color: lightblue;
  }
}
 
/* 针对宽度为1920px及以上的屏幕的样式 */
@media screen and (min-width: 1920px) {
  body {
    background-color: lightgreen;
  }
}

在Vue组件中，你可以使用同样的方法来适配不同组件的样式：




<template>
  <div class="header">
    <!-- 组件内容 -->
  </div>
</template>
 
<style scoped>
.header {
  width: 100%;
  height: 60px;
  background-color: lightcoral;
}
 
/* 针对宽度小于1280px的屏幕的样式 */
@media screen and (max-width: 1280px) {
  .header {
    background-color: lightblue;
  }
}
 
/* 针对宽度大于1920px的屏幕的样式 */
@media screen and (min-width: 1920px) {
  .header {
    background-color: lightgreen;
  }
}
</style>

在实际开发中，可以根据项目需求设置不同的断点，并为这些断点编写相应的CSS规则。使用媒体查询可以让你的网页在不同的设备上显示得更优雅。

2024-08-14




// manifest.json 中配置代理
{
  ...
  "h5" : {
    "devServer" : {
      "port": 8080,
      "proxy" : {
        "/api": {
          "target": "http://backend.example.com",
          "changeOrigin": true,
          "secure": false,
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  }
  ...
}




// vue.config.js 中配置代理
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

以上代码示例展示了如何在manifest.json和vue.config.js中配置代理，使得在开发环境下运行的UniApp项目可以通过代理服务器访问不同域的后端API。这有助于解决开发过程中的跨域问题，并允许开发者在本地进行调试。

VueJS 表单构建指南

2024-08-14




<template>
  <div>
    <el-form :model="form" ref="form" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单验证失败!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

这个代码实例展示了如何使用Element UI库中的<el-form>组件来创建一个简单的登录表单。它包括了表单项的创建、数据绑定、表单验证以及提交和重置表单的操作。这个例子是基于Vue.js和Element UI框架的实际应用场景。