1. 首页
  2. 标签
  3. VUE
实战分享！基于 Vue3 + CSS3 + js-tool-big-box 打造超炫的字符串中间加星号效果
System
2024-08-23
所有,css3



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 CSS3 String with Star Example</title>
    <style>
        .string-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        .string-box {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #333;
            padding: 0 5px;
            background: linear-gradient(to right, #30cfd0 0%, #330f70 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            transition: 0.5s ease-in-out;
        }
        .string-box:hover {
            background-size: 150% auto;
            color: #fff;
            transition-delay: 0.5s;
        }
    </style>
</head>
<body>
    <div id="app" class="string-container">
        <div class="string-box">
            <span>{{ stringWithStars }}</span>
        </div>
    </div>
 
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    originalString: 'HelloWorld',
                };
            },
            computed: {
                stringWithStars() {
                    return this.originalString.split('').join('* ');
                }
            }
        });
 
        app.mount('#app');
    </script>
</body>
</html>

这段代码使用Vue3创建了一个简单的应用，其中stringWithStars计算属性将原始字符串的每个字符之间插入星号，并在页面上以炫丽的视觉效果呈现。通过CSS3的background-clip属性和-webkit-text-fill-color属性实现了文字的渐变效果，并且在鼠标悬停时添加了视觉效果。这个例子展示了如何将创意的CSS3效果融入Vue3应用程序中，提升用户界面的视觉吸引力。

- 阅读更多 -
vue 进度条组件（可拖拽可点击）
System
2024-08-23
所有,css3

在Vue中创建一个可拖拽和可点击的进度条组件，你可以使用vue-slider-component库，它提供了一个可自定义样式的滑块组件。以下是一个简单的例子：

  1. 首先，安装vue-slider-component：



npm install vue-slider-component --save
  1. 然后，在你的Vue组件中使用它：



<template>
  <div>
    <vue-slider v-model="progress" :min="0" :max="100" @change="handleProgressChange"></vue-slider>
  </div>
</template>
 
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'
 
export default {
  components: {
    VueSlider
  },
  data() {
    return {
      progress: 0
    }
  },
  methods: {
    handleProgressChange(value) {
      // 处理进度条值改变时的逻辑
      console.log('Progress changed to:', value);
    }
  }
}
</script>
 
<style>
/* 在这里可以自定义进度条的样式 */
</style>

在这个例子中，vue-slider-component被用作可拖拽的进度条，并绑定了一个v-modelprogress来同步进度值。当进度条的值改变时，@change事件被触发，并调用handleProgressChange方法来处理进度值的变化。你可以在handleProgressChange方法中实现你的逻辑，比如播放视频、调整音量等。

- 阅读更多 -
three.js CSS3DObject在非全屏场景下浏览器缩放尺寸导致位置偏移问题（vue）
System
2024-08-23
所有,css3



// 假设你已经有了three.js的场景(scene)和渲染器(renderer)对象
// 创建一个CSS3DObject
var element = document.createElement( 'div' );
element.style.cssText = 'border: 1px solid red; padding: 10px;';
element.innerHTML = 'Some text';
var object = new THREE.CSS3DObject( element );
object.position.set( 0, 0, 0 );
scene.add( object );
 
// 监听浏览器缩放事件
function onResize() {
    // 更新渲染器大小以匹配窗口大小
    renderer.setSize( window.innerWidth, window.innerHeight );
    // 更新相机投影矩阵，确保3D内容适应新的屏幕尺寸
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}
 
// 监听浏览器缩放事件
window.addEventListener( 'resize', onResize, false );

这段代码示例展示了如何在Vue项目中使用Three.js创建一个CSS3DObject，并在浏览器窗口尺寸变化时更新渲染器和相机的设置，以保持3D场景的正确显示。

- 阅读更多 -
vue技术框架下手机端移动上拉实现分页功能
System
2024-08-23
所有,css3

在Vue技术栈下实现移动端上拉分页功能，可以通过监听滚动事件来判断用户是否到达了页面底部，进而加载更多数据。以下是一个简单的示例：




<template>
  <div class="scroll-container" @scroll="handleScroll">
    <div v-for="item in items" :key="item.id">{{ item.content }}</div>
    <div v-if="isLoading" class="loading-text">加载中...</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [], // 数据列表
      isLoading: false, // 是否正在加载
      page: 1, // 当前页码
      pageSize: 10, // 每页数据量
      total: 100 // 总数据量，根据实际情况获取
    };
  },
  methods: {
    handleScroll(event) {
      if (!this.isLoading && this.canLoadMore()) {
        this.isLoading = true;
        // 模拟异步加载数据
        setTimeout(() => {
          for (let i = 0; i < this.pageSize; i++) {
            this.items.push({
              id: this.items.length + 1,
              content: `Item ${this.items.length + 1}`,
            });
          }
          this.isLoading = false;
          this.page++;
        }, 1000);
      }
    },
    canLoadMore() {
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      // 当滚动条到达底部，且还有数据未加载时，允许加载更多数据
      return (
        scrollTop + clientHeight >= scrollHeight - 5 && // 5是一个偏差值，确保在距离底部足够近时加载
        this.items.length < this.total
      );
    }
  }
};
</script>
 
<style>
.scroll-container {
  height: 100vh; /* 根据实际情况设置容器高度 */
  overflow-y: auto;
}
.loading-text {
  text-align: center;
  margin-top: 10px;
}
</style>

在这个示例中，.scroll-container 是一个具有滚动条的容器，它包含了一个数据列表。handleScroll 方法会在用户滚动时被调用，并通过 canLoadMore 方法检查是否到达了加载更多数据的条件。如果满足条件，则开始加载更多数据，并更新 items 数组。

请注意，示例中的异步加载数据是通过 setTimeout 模拟的。在实际应用中，你需要从一个API或其他数据源获取实际的数据集。同时，你可能需要根据实际的页数管理策略来调整 total、page 和 pageSize 的值。

- 阅读更多 -
Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位
System
2024-08-23
所有,css



<template>
  <div class="container">
    <div class="box static">静态定位</div>
    <div class="box relative">相对定位</div>
    <div class="box absolute">绝对定位</div>
  </div>
</template>
 
<style scoped>
.container {
  position: relative;
  height: 200px;
  border: 2px solid #000;
}
 
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
 
.static {
  background-color: lightblue;
}
 
.relative {
  position: relative;
  top: 40px;
  left: 40px;
  background-color: lightcoral;
}
 
.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: lightgreen;
}
</style>

这个代码实例展示了如何在Vue组件中使用CSS定位。.container 设置为 position: relative; 以建立一个定位上下文。.static 类使用默认的静态定位。.relative 类使用 position: relative; 并通过 top 和 left 属性进行相对定位。.absolute 类使用 position: absolute; 并通过 top 和 right 属性进行绝对定位。这些属性值都是相对于包含它们的 .container 元素的边缘。

- 阅读更多 -
vue项目中在scss代码中使用data中的变量
System
2024-08-23
所有,css

在Vue项目中，你可以通过JavaScript将数据传递到SCSS文件中。这通常通过将数据属性绑定到元素上，并在SCSS文件中使用css-loader的scope选项来实现。

首先，确保你的项目配置支持SCSS并且你已经安装了node-sass或sass-loader。

  1. 在Vue组件中，使用data属性定义你的变量：



<template>
  <div :style="{ backgroundColor: bgColor }">
    <!-- 你的内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      bgColor: '#3498db' // 你希望传递到SCSS的颜色变量
    }
  }
}
</script>
  1. 在你的SCSS文件中，不能直接使用Vue的data中的变量，因为SCSS是在编译时处理的，而不是在运行时处理。你可以通过CSS变量（CSS custom properties）或者sass-loader的additionalData选项将变量传递到SCSS。

使用CSS变量的例子：




<style lang="scss">
:root {
  --bg-color: #{$bgColor}; /* 使用内联样式语法将data中的变量传递给SCSS */
}
 
div {
  background-color: var(--bg-color); /* 使用CSS变量 */
}
</style>

使用additionalData的例子：




// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'sass-loader',
        options: {
          additionalData: `$bgColor: ${process.env.VUE_APP_BG_COLOR};` // 使用环境变量或其他方式传递变量
        }
      }
    ]
  }
}



<style lang="scss">
$bg-color: #{$bgColor}; /* 使用SCSS变量来接收传递的数据 */
 
div {
  background-color: $bg-color;
}
</style>

请注意，这些方法都需要你的Vue项目配置支持SCSS和相关的loader。如果你的项目配置有特殊需求，可能需要调整上述代码以适应你的配置。

- 阅读更多 -
Python私教张大鹏 Vue3整合Tailwindcss之max-width样式类
System
2024-08-23
所有,css



/* 在Tailwind CSS中使用max-width样式 */
/* 定义一个最大宽度类，用于在移动设备上限制容器宽度 */
.max-w-mobile {
    max-width: 375px; /* 适用于大多数手机屏幕 */
}
 
/* 定义一个最大宽度类，用于在平板设备上限制容器宽度 */
.max-w-tablet {
    max-width: 768px; /* 适用于平板电脑屏幕 */
}
 
/* 在Vue 3中使用Tailwind CSS */
<template>
  <div class="max-w-mobile">
    <!-- 内容 -->
  </div>
</template>
 
<script>
export default {
  // 组件逻辑
};
</script>
 
<style>
/* 在style标签中直接使用定义好的最大宽度类 */
.max-w-mobile {
  background-color: #f3f3f3; /* 为了演示，设置背景色 */
}
</style>

这个代码实例展示了如何在Tailwind CSS中定义自定义的最大宽度类，并在Vue 3组件中使用它们。通过这种方式，开发者可以更灵活地控制他们的应用布局，并且保持样式的一致性和可维护性。

- 阅读更多 -
Vite+Vue3项目全局引入scss文件
System
2024-08-23
所有,css

在Vite+Vue 3项目中，要全局引入SCSS文件，你可以使用Vite提供的全局样式插件。以下是步骤和示例代码：

  1. 安装SCSS预处理器依赖：



npm install -D sass
  1. 在项目根目录下创建一个全局样式文件，比如styles/global.scss。
  2. 在vite.config.js配置文件中，使用css选项来指定全局样式文件，并确保scss选项设置为true。



// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/global.scss";`
      }
    }
  }
})
  1. 在global.scss文件中，写入你的全局样式规则。



// styles/global.scss
@import '~@/styles/abstracts/variables.scss';
@import '~@/styles/abstracts/mixins.scss';
 
body {
  font-family: 'Arial', sans-serif;
  color: map-get($colors, 'primary');
}
 
/* 其他全局样式 */

确保你的样式导入采用绝对路径的形式，以便Vite可以正确处理它们。

以上步骤将会使得global.scss中的样式在项目的每个组件中自动应用。

- 阅读更多 -
在vue2中使用tailwindcss（完整教程）
System
2024-08-23
所有,css

在Vue 2项目中使用Tailwind CSS需要几个步骤：

  1. 安装Tailwind CSS：



npm install -D tailwindcss postcss autoprefixer
  1. 使用Tailwind CSS创建配置文件：



npx tailwindcss init -p
  1. 在tailwind.config.js中配置Tailwind CSS（如果已经创建了配置文件，则可以直接编辑）：



// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
  1. 在postcss.config.js中配置PostCSS（如果没有，则需要创建）：



// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
  1. 在Vue组件中引入Tailwind CSS：



<template>
  <div class="text-blue-700">Hello Tailwind!</div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style>
/* 在这里也可以使用Tailwind CSS */
</style>
  1. 在Vue单文件组件中使用Tailwind CSS提供的实用程序类。
  2. 在main.js或App.vue中引入Tailwind CSS：



import './assets/css/tailwind.css';

确保在package.json中的scripts部分包含正确的构建步骤：




"scripts": {
  "build": "vue-cli-service build",
  "serve": "vue-cli-service serve",
  "lint": "vue-cli-service lint",
  "postcss": "tailwindcss -i ./src/assets/css/tailwind.css -o ./src/assets/css/tailwind.css"
}

现在，你应该能够在Vue 2项目中使用Tailwind CSS了。

- 阅读更多 -
【Vue中的Ajax配置代理slot插槽】
System
2024-08-23
所有,ajax

在Vue中，如果您需要配置Ajax请求并使用slot插槽进行代理，您可以使用第三方库如Axios来发送请求，并在Vue组件中定义插槽。以下是一个简单的例子：

首先，安装Axios：




npm install axios

然后，在Vue组件中使用Axios发送请求并定义插槽：




<template>
  <div>
    <slot></slot>
  </div>
</template>
 
<script>
import axios from 'axios';
 
export default {
  name: 'AjaxProxy',
  props: {
    url: {
      type: String,
      required: true
    },
    method: {
      type: String,
      default: 'get'
    },
    params: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios({
        method: this.method,
        url: this.url,
        params: this.params
      }).then(response => {
        // 处理响应数据
        this.$emit('success', response.data);
      }).catch(error => {
        // 处理错误
        this.$emit('error', error);
      });
    }
  }
};
</script>

在父组件中，您可以这样使用AjaxProxy组件：




<template>
  <ajax-proxy url="https://api.example.com/data" @success="handleSuccess" @error="handleError">
    <!-- 这里是插槽内容 -->
    <p>Loading...</p>
  </ajax-proxy>
</template>
 
<script>
import AjaxProxy from './AjaxProxy.vue';
 
export default {
  components: {
    AjaxProxy
  },
  methods: {
    handleSuccess(data) {
      // 处理成功获取的数据
      console.log(data);
    },
    handleError(error) {
      // 处理请求错误
      console.error(error);
    }
  }
};
</script>

在这个例子中，AjaxProxy组件负责发送Ajax请求，并在slot插槽中显示加载状态的消息。父组件可以通过插槽传递加载时的自定义内容，并通过事件监听来接收请求的成功或错误响应。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号