分类前端技术下的文章

2024-08-08

ant-design-vue 是 Ant Design 的 Vue 实现，其中的 Message 组件用于显示非阻塞的通知信息。

用法




import { Message } from 'ant-design-vue';
 
// 基本用法
Message.info('这是一条信息消息');
 
// 带标题的
Message.info({ title: '标题', content: '这是一条信息消息' });
 
// 自定义时长
Message.info({ content: '自定义时长', duration: 5 });
 
// 关闭方法
const message = Message.info({ content: 'Click me to close', key: '1' });
message.then(message => {
  message.destroy();
});

内容为 HTML 片段

由于 ant-design-vue 的 Message 组件不直接支持 HTML 内容，你需要使用 Vue 的 render 函数来实现：




import { Message } from 'ant-design-vue';
 
Message.info({
  content: h => {
    return h('div', { dangerouslySetInnerHTML: { __html: '<strong>加粗文本</strong>' } });
  }
});

或者使用 v-html 指令（注意：这种方式可能会带来安全风险，仅在可信内容上使用）：




import { Message } from 'ant-design-vue';
 
Message.info({
  content: '<div v-html="htmlContent"></div>',
  onClose() {
    this.htmlContent = null;
  },
  duration: 0,
  getContainer() {
    return this.$el;
  },
  data() {
    return {
      htmlContent: '<strong>加粗文本</strong>'
    };
  }
});

请注意，使用 v-html 时需要手动关闭消息，并且设置 duration 为 0 防止自动关闭。另外，getContainer 方法用于指定挂载 Message 的 Vue 实例。

- 阅读更多 -

探索 `go-wkhtmltopdf`：优雅地将HTML转换为PDF

System

2024-08-08

所有,html




package main
 
import (
    "fmt"
    "log"
 
    "github.com/mh-cbon/go-wkhtmltopdf"
)
 
func main() {
    // 创建一个新的PDF文档
    pdf := wkhtmltopdf.NewPDF()
 
    // 添加一个HTML页面
    err := pdf.AddHTML("https://example.com")
    if err != nil {
        log.Fatal(err)
    }
 
    // 如果需要，可以添加更多的HTML页面
    // err = pdf.AddHTML("https://example.org")
    // if err != nil { {
    //     log.Fatal(err)
    // }
 
    // 生成PDF文件
    err = pdf.SaveFile("/path/to/output.pdf")
    if err != nil {
        log.Fatal(err)
    }
 
    fmt.Println("PDF文件已生成！")
}

这段代码演示了如何使用go-wkhtmltopdf包将一个网站的HTML内容转换为PDF文件，并保存到指定路径。首先创建一个PDF对象，然后通过AddHTML方法添加要转换的网页。最后调用SaveFile方法将PDF保存到文件系统。如果过程中发生错误，代码将记录错误并退出。

System

2024-08-08

所有,html

报错解释：

这个错误通常表示在JavaScript代码中出现了意外的字符<。在这个上下文中，它很可能是因为某个地方的代码被错误地解析，导致浏览器尝试将<解释为HTML标签的开始。

可能的原因：

某个JavaScript文件中的代码被错误地包含或引用为HTML。
服务器返回了错误的MIME类型，导致浏览器尝试将返回的内容解析为HTML。
前端资源（如JS或CSS文件）的URL可能被错误地修改，返回了实际上是HTML的内容。

解决方法：

检查所有的JavaScript引用，确保没有将JavaScript文件引用为HTML。
检查网络请求的返回内容，确保返回的是正确的JavaScript代码，而不是HTML。
确保服务器正确设置了MIME类型，返回JavaScript文件时使用application/javascript或text/javascript。
如果是通过AJAX请求获取资源，检查响应的Content-Type头部是否正确。
如果是模块打包工具（如Webpack）的配置问题，检查并修正相关配置。
清除浏览器缓存，有时候缓存的问题也会导致这样的错误。

通常情况下，检查并修正引用路径、文件内容、服务器配置和缓存问题，可以解决这个错误。

- 阅读更多 -

HTML深入体验

System

2024-08-08

所有,html

在HTML中，可以使用表单（form）元素来创建用户输入内容的界面。以下是一个简单的HTML表单示例，包含文本输入框、密码输入框和提交按钮：




<!DOCTYPE html>
<html>
<head>
    <title>简单表单</title>
</head>
<body>
    <form action="/submit-form" method="post">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
 
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
 
        <input type="submit" value="提交">
    </form>
</body>
</html>

在这个例子中，我们创建了一个表单，它包含两个输入框和一个提交按钮。输入框分别用于输入用户名和密码，并且都是必填字段。表单数据通过POST方法发送到服务器的/submit-form路径。

要进一步深化HTML表单的体验，可以添加例如验证、数据绑定、事件处理等功能，这些通常需要结合JavaScript来实现。

- 阅读更多 -

[html+css+js] 小米官网首页制作，CSS的行内样式与内联样式

System

2024-08-08

所有,css




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <style>
        /* 这里是内部样式表，可以写CSS规则 */
        body {
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #FF5E1F;
            color: white;
            text-align: center;
            padding: 10px;
        }
        /* 更多样式规则 */
    </style>
</head>
<body>
    <div class="header">
        <h1>小米官网</h1>
    </div>
    <!-- 页面的其余内容 -->
</body>
</html>

这个示例展示了如何在HTML文件的<head>部分使用<style>标签来包含CSS代码。这是内部样式表的一个简单用法，它将样式信息直接嵌入HTML文档中。在实际开发中，内部样式表适用于单个页面的样式定义。

- 阅读更多 -

@rollup/plugin-html 使用及原理介绍

System

2024-08-08

所有,html

@rollup/plugin-html 插件用于处理 HTML 文件，它能够将 HTML 文件作为 Rollup 打包过程的一部分来处理。这个插件能够提取 JavaScript 依赖、插入通过 Rollup 打包生成的 bundle 到 HTML 文件中，并且可以通过模板定制最终生成的 HTML 文件。

使用方法

首先，你需要安装这个插件：




npm install @rollup/plugin-html --save-dev

然后，在你的 Rollup 配置文件中引入并使用这个插件：




import html from '@rollup/plugin-html';
 
export default {
  plugins: [
    html({
      // 插件选项
    }),
  ],
  // ... 其他 Rollup 配置
};

工作原理

@rollup/plugin-html 插件会查找 Rollup 配置中指定的 HTML 文件，并读取其中的内容。插件会解析这些文件，寻找 JavaScript 依赖，并且可以将这些依赖项添加到 Rollup 的打包过程中。

在打包过程完成后，插件会将生成的 bundle 引用插入到 HTML 文件中。这个过程是可配置的，你可以指定插入 bundle 的位置，是否生成带 hash 的文件名等。

此外，插件还允许你通过模板定制最终生成的 HTML 文件。你可以指定一个模板文件，插件会使用你指定的模板来生成最终的 HTML 文件。

示例配置




import html from '@rollup/plugin-html';
 
export default {
  plugins: [
    html({
      template: ({ attributes, bundle: { code }, files, meta }) => {
        return `
          <!doctype html>
          <html ${attributes.toString()}>
            <head>
              <meta charset="utf-8">
              ${Object.keys(meta).map(key => `
                <meta name="${key}" content="${meta[key]}">
              `).join('')}
            </head>
            <body>
              <div id="app"></div>
              ${code}
            </body>
          </html>
        `;
      }
    }),
  ],
  // ... 其他 Rollup 配置
};

在这个配置中，template 选项是一个函数，它接收一个对象作为参数，该对象包含了 attributes, bundle, files, 和 meta 属性。插件会使用这个函数来生成最终的 HTML 文件。在这个函数中，你可以自定义你的 HTML 结构，包括如何引入生成的 bundle 和其他资源。

- 阅读更多 -

【css】使用css实现提示框各种弹出效果。

System

2024-08-08

所有,css3

在CSS中，实现弹出提示框的效果可以通过使用关键帧动画和变换来完成。以下是一个简单的弹出提示框效果的实现：

HTML:




<div class="popup">
  <div class="content">这是弹出提示框</div>
</div>

CSS:




.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-out, opacity 0.2s ease-out;
  opacity: 0;
}
 
.popup.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
 
.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

JavaScript:




// 弹出提示框
function showPopup() {
  const popup = document.querySelector('.popup');
  popup.classList.add('active');
  
  // 3秒后关闭提示框
  setTimeout(() => {
    popup.classList.remove('active');
  }, 3000);
}
 
// 调用函数来显示弹出框
showPopup();

这段代码实现了一个简单的弹出提示框，并通过CSS动画将其从无到有并缩放显示。JavaScript函数用于在页面上添加 .active 类，触发动画，并在3秒后关闭提示框。

- 阅读更多 -

js几种打印方法的几种方法

System

2024-08-08

所有,javascript

JavaScript中常见的打印方法有以下几种：

使用console.log()：这是最常用的打印方法，通常用于在控制台输出信息。




console.log('Hello, World!');

使用document.write()：这个方法可以直接在浏览器的页面上打印信息。




document.write('Hello, World!');

使用window.alert()：这个方法可以弹出一个警告框，显示信息。




window.alert('Hello, World!');

使用console.table()：当你想以表格形式打印对象或数组时，这个方法很有用。




const students = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 22 },
];
console.table(students);

使用console.error()：当你想要标记错误或异常时，可以使用这个方法。




console.error('An error occurred!');

使用console.info()：这个方法用于输出提示性信息。




console.info('This is an information.');

使用console.warn()：这个方法用于输出警告信息。




console.warn('This is a warning.');

使用模板字符串：这是ES6中的新特性，可以用来构造字符串，包括换行和嵌入变量等。




const name = 'World';
console.log(`Hello, ${name}!`);

以上就是JavaScript中常见的打印方法。

- 阅读更多 -

css设置div水平居中方法

System

2024-08-08

所有,css3

在CSS中，可以使用多种方法来实现div的水平居中。以下是几种常用的方法：

使用flexbox布局:




.center-flex {
  display: flex;
  justify-content: center;
}




<div class="center-flex">
  <div>内容</div>
</div>

使用margin:auto方法:




.center-margin {
  margin-left: auto;
  margin-right: auto;
}




<div class="center-margin">
  <div>内容</div>
</div>

使用定位(position)和transform:




.center-position {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}




<div class="center-position">
  <div>内容</div>
</div>

使用text-align和inline-block:




.center-text {
  text-align: center;
}
.center-text div {
  display: inline-block;
}




<div class="center-text">
  <div>内容</div>
</div>

这些方法可以根据不同的布局需求选择使用。

- 阅读更多 -

CSS过渡，转换与动画

System

2024-08-08

所有,css3

在CSS中，过渡、转换和动画是实现界面效果的三种机制。

过渡（Transition）：用于在属性改变时平滑地过渡到新的样式。




/* 应用于元素的所有改变 */
.element {
  transition: all 0.5s ease-in-out;
}
 
/* 仅应用于背景色和宽度 */
.element {
  transition: background-color 0.5s, width 0.5s;
}

转换（Transform）：用于创建2D或3D转换效果。




/* 旋转 */
.element {
  transform: rotate(45deg);
}
 
/* 缩放 */
.element {
  transform: scale(1.5, 1.5);
}
 
/* 倾斜 */
.element {
  transform: skew(30deg, 20deg);
}
 
/* 移动 */
.element {
  transform: translate(50px, 100px);
}

动画（Animation）：结合关键帧和过渡，创建更复杂的动画序列。




/* 定义关键帧 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画 */
.element {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

这些技术可以单独使用，也可以结合使用以创建更复杂的界面效果。

- 阅读更多 -