1. 首页
  2. 分类
  3. 前端技术
Vue 3 + Element Plus 自定义弹出框组件实践
System
2024-08-16
所有,vue.js



<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    :top="top"
    :custom-class="customClass"
    :destroy-on-close="destroyOnClose"
    @open="onOpen"
    @close="onClose"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script>
export default {
  name: 'MyDialog',
  props: {
    title: String,
    width: {
      type: String,
      default: '30%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    customClass: {
      type: String,
      default: 'my-dialog'
    },
    destroyOnClose: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    onOpen() {
      this.visible = true;
      this.$emit('open');
    },
    onClose() {
      this.$emit('close');
    },
    handleConfirm() {
      this.$emit('confirm');
    }
  }
};
</script>
 
<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

这个代码实例展示了如何创建一个自定义的弹出框组件，它使用了Element Plus的el-dialog组件，并添加了一些自定义的功能，如在组件内部控制显示和隐藏。这个实例也展示了如何通过props传递参数，并通过emit触发自定义事件。

- 阅读更多 -
动态设置css样式，背景图，class
System
2024-08-16
所有,css3

在JavaScript中，您可以使用以下方法动态设置CSS样式，背景图片和类：

  1. 通过元素的style属性设置内联样式。
  2. 通过更改元素的className属性来更改类。
  3. 使用classList添加或删除类。
  4. 使用CSSStyleSheet接口修改现有样式规则。
  5. 为元素添加背景图片，可以通过设置style.backgroundImage属性。

以下是实现这些功能的示例代码：




// 获取元素
var element = document.getElementById('myElement');
 
// 设置内联样式
element.style.color = 'blue';
element.style.backgroundColor = 'yellow';
 
// 更改类
element.className = 'new-class';
 
// 或者使用classList
element.classList.add('another-class');
element.classList.remove('existing-class');
element.classList.toggle('active');
 
// 为元素添加背景图片
element.style.backgroundImage = 'url("path/to/your/image.jpg")';
 
// 动态创建并添加样式
var style = document.createElement('style');
style.innerHTML = `
  .custom-style {
    color: green;
    background-color: pink;
  }
`;
document.head.appendChild(style);
 
// 应用新创建的样式类
element.classList.add('custom-style');

请根据实际需求选择合适的方法来动态设置CSS样式。

- 阅读更多 -
css 实现简单的页面隐藏与浮现
System
2024-08-16
所有,css

在CSS中，可以使用display属性来隐藏或显示页面元素。以下是一个简单的示例，展示了如何使用CSS控制元素的显示和隐藏。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Visibility Toggle</title>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>
 
<button onclick="toggleVisibility()">Toggle Visibility</button>
 
<div id="myDiv">
  这里是一些内容。
</div>
 
<script>
function toggleVisibility() {
  var x = document.getElementById("myDiv");
  if (x.classList.contains('hidden')) {
    x.classList.remove('hidden');
  } else {
    x.classList.add('hidden');
  }
}
</script>
 
</body>
</html>

在这个示例中，我们有一个div元素和一个按钮。当按钮被点击时，它会调用toggleVisibility函数，这个函数会切换myDiv元素的hidden类。如果hidden类存在，它会被移除，使得元素显示；如果不存在，它会被添加，使得元素隐藏。这是通过切换CSS的display属性来实现的。

- 阅读更多 -
基于 Promise A+ 规范使用Typescript实现Promise
System
2024-08-16
所有,typescript

以下是一个简单的基于Promise/A+规范的Typescript实现的示例：




interface IPromise<T> {
    then<U>(onFulfilled?: (value: T) => U | IPromise<U>, onRejected?: (error: any) => U | IPromise<U>): IPromise<U>;
    catch<U>(onRejected?: (error: any) => U | IPromise<U>): IPromise<U>;
}
 
class MyPromise<T> implements IPromise<T> {
    private state: 'pending' | 'fulfilled' | 'rejected' = 'pending';
    private value: T | undefined;
    private reason: any;
    private onFulfilledCallbacks: Array<(value: T) => void> = [];
    private onRejectedCallbacks: Array<(reason: any) => void> = [];
 
    constructor(executor: (resolve: (value?: T | IPromise<T>) => void, reject: (reason?: any) => void) => void) {
        executor(this.resolve.bind(this), this.reject.bind(this));
    }
 
    private resolve(value?: T | IPromise<T>) {
        if (this.state === 'pending') {
            if (value instanceof MyPromise) {
                value.then(this.resolve.bind(this), this.reject.bind(this));
            } else {
                this.state = 'fulfilled';
                this.value = value as T;
                this.onFulfilledCallbacks.forEach(callback => callback(this.value));
            }
        }
    }
 
    private reject(reason?: any) {
        if (this.state === 'pending') {
            this.state = 'rejected';
            this.reason = reason;
            this.onRejectedCallbacks.forEach(callback => callback(this.reason));
        }
    }
 
    then<U>(onFulfilled?: (value: T) => U | IPromise<U>, onRejected?: (error: any) => U | IPromise<U>): IPromise<U> {
        let promise2 = new MyPromise<U>((resolve, reject) => {
            if (this.state === 'fulfilled') {
                let x = onFulfilled ? onFulfilled(this.value as T) : this.value as U;
                resolve(x);
            } else if (this.state === 'rejected') {
                let x = onRejected ? onRejected(this.reason) : this.reason;
                reject(x);
            } else {
                this.onFulfilledCallbacks.push(() => {
                    let x = onFulfilled ? onFulfilled(this.value as T) : this.value as U;
                    resolve(x);
                });
                this.onRejectedCallbacks.push(() => {
                    let x = onRejected ? onRejected(this.reason) : this.reason;
                    reject(x);
                });
            }
        });
        r
- 阅读更多 -
Element Plus table formatter函数返回html内容
System
2024-08-16
所有,html

在Element Plus的Table组件中，你可以使用formatter函数来自定义列的内容。如果你想要返回HTML内容，可以直接在formatter函数中使用Vue的h函数（或者在Vue 3中使用createElement函数）来创建VNode。

以下是一个简单的例子，展示了如何在formatter函数中返回HTML内容：




<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatterAddress">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '张三',
        address: '<span style="color: red;">上海市普陀区金沙江路 1518 弄</span>'
      }, {
        date: '2016-05-04',
        name: '李四',
        address: '<span style="color: red;">上海市普陀区金沙江路 1517 弄</span>'
      }]
    }
  },
  methods: {
    formatterAddress(row, column, cellValue, index) {
      // Vue 3 使用 `h` 函数，Vue 2 使用 `this.$createElement`
      const vnode = this.$createElement('div', { domProps: { innerHTML: cellValue } });
      return vnode;
    }
  }
}
</script>

在这个例子中，我们定义了一个formatterAddress方法，该方法使用this.$createElement来创建一个VNode，这个VNode包含了原始地址数据，并允许它被渲染为HTML。然后，我们在el-table-column中通过formatter属性使用这个方法来格式化地址列的内容。

请注意，直接渲染HTML内容可能会带来安全风险，特别是如果内容是用户可控的。在实际应用中，你应该始终确保输入内容是安全的，避免XSS攻击。

- 阅读更多 -
jq-jquery根据内容设置select和input radio选中
System
2024-08-16
所有,jquery

在jQuery中，你可以使用:contains()选择器来选择包含特定文本的元素，然后使用.val()或.attr()方法来设置select和input[type=radio]的选中状态。

以下是一些示例代码：




// 假设你要选中包含文本"Option 2"的select元素
$('select option:contains("Option 2")').prop('selected', true);
 
// 假设你要选中value值为"2"的radio按钮
$('input[type=radio][value="2"]').prop('checked', true);

确保在DOM完全加载后执行这些代码，通常你会把它们放在$(document).ready()函数中：




$(document).ready(function() {
    // 设置select
    $('select option:contains("Option 2")').prop('selected', true);
 
    // 设置radio
    $('input[type=radio][value="2"]').prop('checked', true);
});

请注意，:contains()选择器是大小写敏感的，并且它会选择包含指定文本的元素，不管文本在元素中的位置如何。如果你需要更精确的匹配，你可能需要使用其他选择器或方法。

- 阅读更多 -
Servlet+Ajax实现对数据的列表展示（极简入门）
System
2024-08-16
所有,ajax

以下是一个简单的示例，展示了如何使用Servlet处理Ajax请求并返回数据，以及如何在前端使用Ajax显示这些数据。

后端代码 (Servlet):




import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/data-list")
public class DataListServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("application/json");
        PrintWriter out = response.getWriter();
        // 模拟数据
        String[] data = {"Item 1", "Item 2", "Item 3"};
        // 将数据转换为JSON格式
        out.print("[" + String.join(",", data) + "]");
        out.flush();
    }
}

前端代码 (HTML + JavaScript):




<!DOCTYPE html>
<html>
<head>
    <title>Data List</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = JSON.parse(xhr.responseText);
                    showData(data);
                }
            };
            xhr.open("GET", "/data-list", true);
            xhr.send();
        }
 
        function showData(data) {
            var list = document.getElementById("data-list");
            data.forEach(function(item) {
                var li = document.createElement("li");
                li.textContent = item;
                list.appendChild(li);
            });
        }
    </script>
</head>
<body onload="fetchData()">
    <h1>Data List</h1>
    <ul id="data-list"></ul>
</body>
</html>

在这个例子中，Servlet响应Ajax请求并返回一个JSON格式的数据列表。前端JavaScript通过Ajax请求这个数据，并将其插入到页面的列表中。这个例子展示了如何使用Servlet作为后端服务来处理Ajax请求和响应数据。

- 阅读更多 -
npm install安装依赖报错——常见报错解决方案
System
2024-08-16
所有,npm

由于npm install可能出现多种不同的错误，并没有一个特定的错误信息描述，因此我将提供一些常见的npm install错误及其解决方案：

  1. 权限问题：

    • 错误信息示例：EACCES: permission denied
    • 解决方案：使用sudo npm install来给予安装命令更高的权限，或者更改npm配置使用不需要管理员权限的目录。

  2. 包版本冲突：

    • 错误信息示例：npm ERR! code ERESOLVE
    • 解决方案：更新包到兼容的版本，使用npm update或npm install <package>@<version>指定版本。

  3. 包不存在：

    • 错误信息示例：npm ERR! 404 Not Found
    • 解决方案：检查包名是否正确，确认网络连接，并确保包在npm仓库中是可用的。

  4. 网络问题：

    • 错误信息示例：npm ERR! network
    • 解决方案：检查网络连接，尝试更换网络或使用代理。

  5. npm缓存问题：

    • 错误信息示例：npm ERR! code EINVALIDCACHE
    • 解决方案：清除npm缓存，使用npm cache clean --force。

  6. node\_modules不一致：

    • 错误信息示例：npm ERR! code ENOENT 和 npm ERR! enoent
    • 解决方案：删除node_modules文件夹和package-lock.json文件，然后重新运行npm install。

  7. npm版本过时：

    • 错误信息示例：npm WARN npm npm does not support Node.js vX.Y.Z
    • 解决方案：升级npm到最新版本，使用npm install -g npm@latest。

  8. 依赖关系问题：

    • 错误信息示例：npm ERR! code EPEERINVALID
    • 解决方案：更新有问题的包到兼容版本，或者更新其他依赖包。

每个错误的具体解决方案可能需要根据错误信息的详细内容来确定。如果上述方案都不能解决问题，可以查看npm的日志文件或者使用npm-debug.log文件来获取更详细的错误信息，进一步诊断问题。

- 阅读更多 -
Vue.js + Vuex + TypeScript 实战项目开发与项目优化
System
2024-08-16
所有,typescript



import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
// 定义State接口
interface State {
  count: number;
}
 
// 定义Mutations接口
interface Mutations {
  INCREMENT(state: State, payload: number): void;
}
 
// 定义Actions接口
interface Actions {
  increment(context: any, payload: number): void;
}
 
// 定义Getters接口
interface Getters {
  doubleCount(state: State): number;
}
 
// 创建并导出Vuex.Store实例
const store = new Vuex.Store<State>({
  state: {
    count: 0,
  },
  mutations: {
    INCREMENT(state, payload) {
      state.count += payload;
    },
  } as Mutations,
  actions: {
    increment({ commit }, payload) {
      commit('INCREMENT', payload);
    },
  } as Actions,
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  } as Getters,
});
 
export default store;

这段代码定义了一个简单的Vuex store，包含state、mutations、actions和getters。它使用TypeScript接口来规定状态、变化方式和业务逻辑的方法签名，使得代码更加清晰和类型安全。在实际开发中，可以根据项目需求进一步扩展store的功能。

- 阅读更多 -
vue3项目引入本地js文件，实现一个音频播放按钮
System
2024-08-16
所有,javascript

在Vue 3项目中引入本地JavaScript文件并实现一个音频播放按钮可以通过以下步骤完成：

  1. 将你的本地JavaScript文件放在项目的适当位置，例如在src/assets文件夹内。
  2. 在你的Vue组件中，使用import语句引入这个JavaScript文件。
  3. 在模板中添加一个按钮，并绑定点击事件来触发音频播放。

以下是一个简单的示例：

首先，确保你有一个音频文件，例如src/assets/audio.mp3。

然后，创建一个本地JavaScript文件，比如src/assets/audioPlayer.js，并在其中定义播放音频的函数：




// src/assets/audioPlayer.js
export function playAudio(audioUrl) {
  const audio = new Audio(audioUrl);
  audio.play();
}

接下来，在你的Vue组件中引入这个JavaScript文件，并添加播放按钮：




<template>
  <button @click="playAudio">播放音频</button>
</template>
 
<script>
// 引入本地JavaScript文件
import { playAudio } from '@/assets/audioPlayer.js';
 
export default {
  setup() {
    // 音频文件的URL
    const audioUrl = '@/assets/audio.mp3';
 
    // 播放音频函数
    function playAudio() {
      playAudio(audioUrl);
    }
 
    return { playAudio };
  },
};
</script>

在这个例子中，我们定义了一个playAudio函数来播放音频，并在模板中通过按钮点击事件触发它。当用户点击按钮时，playAudio函数会被调用，并播放定义好的音频文件。

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