分类前端技术下的文章

2024-08-10

在Vue中实现可拖拽的音视频播放进度条，可以通过监听和设置视频元素的timeupdate和loadedmetadata事件来实现。以下是一个简单的Vue组件示例：




<template>
  <div>
    <video ref="video" @loadedmetadata="setVideoDuration" @timeupdate="updateProgress" controls>
      <source src="your-video-file.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div class="progress-bar" @click="seek">
      <div class="progress" :style="{ width: progress + '%' }"></div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      videoDuration: 0,
      progress: 0
    };
  },
  methods: {
    setVideoDuration() {
      this.videoDuration = this.$refs.video.duration;
    },
    updateProgress() {
      const video = this.$refs.video;
      this.progress = (video.currentTime / video.duration) * 100;
    },
    seek(event) {
      const video = this.$refs.video;
      const rect = event.target.getBoundingClientRect();
      const x = event.clientX - rect.left; // account for any borders
      const percentage = x / rect.width;
      video.currentTime = this.videoDuration * percentage;
    }
  }
};
</script>
 
<style>
.progress-bar {
  width: 100%;
  height: 5px;
  background-color: #ddd;
  cursor: pointer;
  position: relative;
}
 
.progress {
  width: 0%;
  height: 100%;
  background-color: #007bff;
  transition: width 0.05s;
  position: absolute;
}
</style>

在这个组件中，<video>元素用于播放视频，并包含了视频文件的路径。progress-bar和progress两个div分别用于显示和更新进度条的视觉效果。timeupdate事件用于更新当前播放的进度，loadedmetadata事件用于获取视频总时长。seek方法通过点击事件处理函数来更新视频的当前时间，实现拖拽功能。

- 阅读更多 -

vue 预览excel文件的又一伟大实践 —— vue-office

System

2024-08-10

所有,vue.js




<template>
  <div id="app">
    <vue-office
      :src="fileUrl"
      :status="status"
      @on-preview="handlePreview"
      @on-convert="handleConvert"
    />
  </div>
</template>
 
<script>
import VueOffice from 'vue-office'
 
export default {
  components: {
    VueOffice
  },
  data() {
    return {
      fileUrl: 'path/to/your/excel/file.xlsx',
      status: 'default' // 可以是 'default', 'converting', 'converted', 'error'
    }
  },
  methods: {
    handlePreview(fileUrl) {
      // 在新窗口中预览文件
      window.open(fileUrl)
    },
    handleConvert(fileUrl) {
      // 处理文件转换逻辑
      this.status = 'converting'
      // 模拟文件转换过程
      setTimeout(() => {
        this.status = 'converted'
        // 转换完成后可以下载或其他操作
        this.downloadFile(fileUrl)
      }, 3000)
    },
    downloadFile(fileUrl) {
      // 下载文件逻辑
    }
  }
}
</script>

这个简单的例子展示了如何在Vue应用中集成vue-office组件，并处理Excel文件的预览和转换。在这个例子中，我们假设vue-office组件已经安装并可以使用，并且fileUrl变量指向一个有效的Excel文件。当用户点击预览或转换按钮时，handlePreview或handleConvert方法会被调用，并可以执行相应的逻辑。

- 阅读更多 -

vue全景预览插件photo-sphere-viewer

System

2024-08-10

所有,vue.js




<template>
  <div id="panorama-container"></div>
</template>
 
<script>
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
import { PhotoSphereViewer } from 'photo-sphere-viewer';
 
export default {
  name: 'PanoramaViewer',
  data() {
    return {
      psv: null, // 用于保存全景预览实例
    };
  },
  mounted() {
    // 初始化全景预览
    this.psv = new PhotoSphereViewer({
      // 容器元素的选择器
      container: document.getElementById('panorama-container'),
      // 全景图片的URL
      panorama: 'path/to/your/panorama.jpg',
      // 其他配置项...
    });
  },
  beforeDestroy() {
    // 清理资源
    if (this.psv) {
      this.psv.destroy();
    }
  },
};
</script>
 
<style>
#panorama-container {
  width: 100%;
  height: 500px;
}
</style>

这个代码实例展示了如何在Vue组件中集成photo-sphere-viewer插件来创建全景图片预览。在mounted生命周期钩子中初始化了全景预览，并在beforeDestroy钩子中清理了相关资源。

System

2024-08-09

所有,css3

在flex布局中，align-items属性用于设置侧轴上的单行子元素的排列方式。




.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

align-items可以取以下值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设为auto，将占满整个容器的高度。

示例代码：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: lightgrey;
  align-items: center; /* 垂直居中 */
}
 
.flex-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: cornflowerblue;
  text-align: center;
  line-height: 100px; /* 使文字垂直居中 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container设置了align-items: center;，使得其中的.flex-item子元素垂直居中。

- 阅读更多 -

前端开发：JS中深拷贝和浅拷贝的区别

System

2024-08-09

所有,javascript

浅拷贝和深拷贝是编程中对象复制的两种方式。

浅拷贝：

创建一个新对象。
这个新对象有着原始对象属性的一,个浅拷贝（换句话说，新对象的属性指向原始对象属性的指引）。

深拷贝：

创建一个新对象。
新对象有着原始对象所有的属性的一个深拷贝（换句话说，新对象的属性是原始对象属性的拷贝，而不是指向它们的指引）。

在JavaScript中，浅拷贝可以通过对象的展开运算符（...）或者Array.prototype.slice()方法实现，而深拷贝则需要递归地复制嵌套的对象。

例子：




// 浅拷贝示例
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };
 
// 深拷贝示例
const obj = { a: 1, b: { c: 2 } };
 
function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
 
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }
 
    if (obj instanceof Array) {
        return obj.reduce((arr, item, i) => {
            arr[i] = deepCopy(item);
            return arr;
        }, []);
    }
 
    if (obj instanceof Object) {
        return Object.keys(obj).reduce((newObj, key) => {
            newObj[key] = deepCopy(obj[key]);
            return newObj;
        }, {});
    }
}
 
const deepCopyObj = deepCopy(obj);

在这个深拷贝函数中，我们考虑了几种特殊的对象类型（null，日期，数组）并对它们进行了特殊处理。对于普通的对象和数组，我们使用了Array.prototype.reduce()和Object.keys.reduce()方法来递归地复制所有的属性和值。

System

2024-08-09

所有,react native

由于提供的代码已经是一个完整的解析工具，下面我将提供一个简化的代码实例，展示如何使用这个解析工具来获取一个React Native项目的依赖信息。




const parser = require('react-native-project-parser');
 
// 假设你已经有了一个React Native项目的路径
const projectPath = '/path/to/your/react-native-project';
 
parser.parse(projectPath).then(projectConfig => {
  // 打印出项目的依赖信息
  console.log('React Native Dependencies:', projectConfig.dependencies);
  console.log('React Native Dev Dependencies:', projectConfig.devDependencies);
}).catch(error => {
  console.error('解析项目配置失败:', error);
});

这段代码展示了如何使用react-native-project-parser库来解析一个React Native项目的配置信息，并打印出其中的依赖信息。在实际应用中，你需要替换projectPath变量为你的React Native项目的实际路径。

- 阅读更多 -

探索React Native：跨平台移动应用开发的新纪元

System

2024-08-09

所有,react native




import React from 'react';
import { Text, View } from 'react-native';
 
export default class HelloWorldApp extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

这段代码展示了如何使用React Native创建一个简单的移动应用，它只包含一个文本标签来显示“Hello, world!”。这个应用程序将在iOS和Android设备上看起来非常相似，因为它使用了React Native的基础组件。这是学习React Native开发的一个很好的起点。

- 阅读更多 -

使用ESLint与Prettier优化React Native开发体验

System

2024-08-09

所有,react native




// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    // 在这里添加或覆盖 ESLint 规则
    'react/no-unescaped-entities': 'off',
  },
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier', 'react'],
  env: {
    browser: true,
    node: true,
  },
  overrides: [
    {
      files: ['**/*.ts?(x)'],
      rules: {
        'react/prop-types': 'off', // 关闭对 React `propTypes` 的检查
      },
    },
  ],
};

这个配置文件关闭了对 JSX 属性中的 propTypes 进行类型检查，并将 ESLint 配置为使用 TypeScript 解析器。它还关闭了 ESLint 中对 React 中未转义的 HTML 实体的检查，这在处理如这类字符时非常有用。最后，它启用了 prettier/recommended 插件，该插件将 Prettier 集成到 ESLint 中，确保代码格式一致。

- 阅读更多 -

推荐优秀开源项目：React Native Exception Handler

System

2024-08-09

所有,react native

React Native Exception Handler是一个用于处理React Native应用中未捕获异常的库。它提供了一个全局的异常处理器，可以捕获应用崩溃时产生的异常，并且可以选择将异常信息发送到后台服务器进行记录和分析。

以下是如何使用React Native Exception Handler的简单示例：

首先，你需要安装这个库：




npm install react-native-exception-handler

或者




yarn add react-native-exception-handler

然后，你需要根据平台进行相应的配置。

对于iOS，在AppDelegate.m中添加：




#import "RCTExceptionsManager.h"
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [RCTExceptionsManager setup];
    ...
}

对于Android，在MainApplication.java中添加：




import com.masteratul.exceptionhandler.ExceptionHandler;
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    ...
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      ExceptionHandler.register(this, getResources().getBoolean(R.bool.enableProdMetrics));
    }
    ...
  };
 
  ...
}

接下来，你可以在React Native代码中使用Exception Handler来捕获异常：




import ExceptionHandler from 'react-native-exception-handler';
 
ExceptionHandler.registerHandler(async (error, isFatal) => {
  // 处理异常，例如发送到服务器
  await sendExceptionToServer(error, isFatal);
});
 
function sendExceptionToServer(error, isFatal) {
  // 发送异常到服务器的代码
}

这个示例展示了如何注册一个异常处理器，当应用中发生未捕获的异常时，这个处理器会被调用。在实际应用中，你可能需要将异常信息发送到你的后台服务器进行进一步的分析和处理。

- 阅读更多 -

探索React Native Login：构建现代移动应用的新范式

System

2024-08-09

所有,react native




import React, { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
 
export default function LoginScreen() {
  const [userName, setUserName] = useState('');
 
  const handleLogin = () => {
    // 这里应该是登录逻辑，例如调用API验证用户名和密码
    console.log('登录用户名:', userName);
    // ...登录逻辑
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login Screen</Text>
      <TextInput
        style={styles.input}
        placeholder="Enter your username"
        value={userName}
        onChangeText={setUserName}
      />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 20,
    margin: 10,
  },
  input: {
    height: 40,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    margin: 10,
    padding: 5,
  },
});

这个代码实例展示了如何在React Native应用中创建一个简单的登录界面，并使用useState钩子来管理用户名的状态。用户可以输入他们的用户名，并通过点击按钮触发登录逻辑。这个例子教会开发者如何在React Native中处理表单输入和按钮点击事件。

- 阅读更多 -