微语：代码适合中午敲，早晚出BUG

相册图库图片相册介绍
站长工具各种快捷工具
我的邻居我的小伙伴们
热门文章关注点最多文章
账号注册注册本站账号
技术支持大佬指导员

vue 组件封装 Vue

1.创建子组件

components/ListUl.vue

2.父组件引入子组件

    components: {
        ListUl: () => import('@/components/ListUl.vue')
    },

3.父组件中使用

<list-ul></list-ul>

4.父组件传值

<list-ul :sum="list" ></list-ul>

5.子组件接收参数

export default {
    props: ["sum"], // 接收父组件传递的参数
}

6.子组件使用参数

    <ul>
        <li v-for="(v, i) in sum" :key="i">
        </li>
    </ul>

小诸葛 vue 组件封装 6-13

评论(0) 浏览(306)

vue 日期过滤器 Vue

格式：年-月-日时：分：秒

Vue.filter("datetime", (d) => {
    let d1 = new Date(d);
    let year = d1.getFullYear();//年
    let month = ("0" + (d1.getMonth() + 1)).slice(-2);//月
    let day = ("0" + d1.getDate()).slice(-2);//日
    let hour = ("0" + d1.getHours()).slice(-2);//时
    let minute = ("0" + d1.getMinutes()).slice(-2);//分
    let second = ("0" + d1.getSeconds()).slice(-2);//秒

    // 格式化输出
    return (
        year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
    );
});

小诸葛日期过滤器 6-7

评论(0) 浏览(321)

echarts图表自适应 Vue

在vue中使用echarts图表，窗口收缩图表不自适应解决办法

在绘制图表下添加：

  window.onresize=function(){
            myChart.resize()
        }

离开页面的时候销毁resize事件

destroyed(){
        window.onresize=null//组件销毁时去除resize事件
    }

小诸葛 echarts 6-4

评论(0) 浏览(323)

图片上传API 前端

前端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>图片上传示例</title>
</head>
<body>
  <form>
    <input type="file" id="fileInput">
    <button type="button" onclick="upload()">上传</button>
  </form>
  <script>
    function upload() {
      var fileInput = document.getElementById("fileInput");
      var file = fileInput.files[0];
      var ajax = new XMLHttpRequest();
      var url = "http://home.v6g.cn/upload.php";
      ajax.open("POST", url, true);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          // 请求成功，在此处理返回的数据
           var responseJson = JSON.parse(ajax.responseText);
    console.log(responseJson); 
        }
      };
      var formData = new FormData();
      formData.append("file", file);
      ajax.send(formData);
    }

  </script>
</body>
</html>

后端代码

<?php
header("Content-Type:text/html;charset=UTF-8");
header('Access-Control-Allow-Origin: *'); // 允许跨域访问
header('Access-Control-Allow-Methods: POST'); // 允许POST请求
header('Access-Control-Allow-Headers: Content-Type'); // 允许数据类型为JSON
if ($_FILES["file"]["error"] > 0) {
    // 如果文件上传错误，返回错误信息
    echo json_encode(array('code' => -1, 'msg' => '上传失败：' . $_FILES["file"]["error"]));
} else {
    // 将上传的文件移动到指定位置
    $uploadDir = "./uploads/";
    if (!is_dir($uploadDir)) {
        mkdir($uploadDir, 0777, true);
    }
    $fileName = md5(time() . rand()) . '.' . pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
    $uploadPath = "./uploads/" . $fileName;
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $uploadPath)) {
        // 获取上传文件信息
        $fileSize = filesize($uploadPath);
        $fileUrl = 'http://' . $_SERVER['HTTP_HOST'] . '/uploads/' . $fileName;
        $fileTime = date('Y-m-d H:i:s', filemtime($uploadPath));
        // 返回上传成功后的文件地址和信息
        $response = array(
            'code' => 0,
            'msg' => '上传成功',
            'data' => array(
                'src' => $fileUrl,
                'name' => $fileName,
                'size' => $fileSize,
                'time' => $fileTime
            )
        );
        echo json_encode($response);
    } else {
        echo json_encode(array('code' => -2, 'msg' => '上传失败'));
    }
}
?>

使用方法：

1. 根目录创建 文件夹 uploads 用于存放图片
2. 创建 upload.php 放入后端代码
3. 创建 index.html 存放前端代码
4. 访问前端代码 上传图片，打开控制台，即可看到返回结果

小诸葛图片上传API 6-3

评论(0) 浏览(383)

Vue组件之间传递数据 Vue

1.设置总线，在main.js中

// 设置一个总线，用于组件之间传递参数
Vue.prototype.$bus = new Vue()

2.需要传数据出去的组件

            // 传递参数
            this.$bus.$emit("sendImg", res.imgUrl);

3.接收数据的组件

         // 接收参数
        this.$bus.$on('sendImg',(url)=>{
            this.imgUrl=url
        })

小诸葛数据传递 6-1

评论(0) 浏览(357)

vue 解决路径多次点击报错 Vue

在路由中如下配置即可解决

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

小诸葛 vue 5-29

评论(0) 浏览(349)

登录模板 Vue

基于vue的登录模板

登录模板

<template>
    <div class="login">
        <div class="login_box">
            <h1> 登录系统</h1>
            <el-input prefix-icon="el-icon-search" v-model="form.username"
                :class="{ username: username, usernames: usernames }" @focus="uname" @blur="unames"></el-input>
            <el-input prefix-icon="el-icon-lock " v-model="form.password"
                :class="{ username: password, usernames: passwords }" show-password @focus="pad" @blur="pads"></el-input>
            <el-button type="primary" @click="submits">登录</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                username: '',
                password: '',
            },
            username: true,
            usernames: false,
            password: true,
            passwords: false,
        }
    },
    methods: {
        // 登录事件
        submits() {
            this.$router.push('/index')
        },
        // 获取焦点
        //账号
        uname() {
            this.username = false;
            this.usernames = true;
        },
        // 密码
        pad() {
            this.password = false;
            this.passwords = true;
        },
        // 失去焦点
        // 账号
        unames() {
            this.username = true;
            this.usernames = false;
            if (this.form.username !== "") {
                this.username = false;
            }
        },
        // 失去焦点
        // 密码
        pads() {
            this.password = true;
            this.passwords = false;
            if (this.form.password !== "") {
                this.password = false;
            }
        },
    }
}
</script>

<style lang="less" scoped>
.login::after {
    content: '';
    /* 必须的属性 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom right, #dbe464, rgb(123, 218, 162), #f18e9b);
    background-size: cover;
    z-index: -1;
}

.login {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    .username::after,
    .usernames::after,
    .password::after,
    .passwords::after {
        content: "账号";
        color: #c0c4cc;
        display: block;
        top: 13px;
        left: 33px;
        position: absolute;
        font-size: 14px;
        transition: all 0.5s;
        // 鼠标点击穿透
        pointer-events: none;
    }

    .usernames::after,
    .password::after,
    .passwords::after {
        content: "账号";
        top: -7px;
        color: #409eff;
    }

    input {
        position: relative;

    }

    input::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        filter: blur(10px);
        z-index: -1;
    }

    .password::after {
        content: "密码";
    }

    .passwords::after {
        content: "密码";
    }

    .login_box {
        position: relative;
        width: 400px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        padding: 0 20px;
        border-radius: 10px;
        border: 1px solid rgb(255, 255, 255, 0.5);
        border-right: 1px solid rgba(63, 62, 62, 0.2);
        border-bottom: 1px solid rgba(63, 62, 62, 0.2);

        background-color: #ffffff45;

        h1 {
            position: relative;
            color: #ffffff;
            font-size: 25px;
        }

        .el-button {
            width: 100%;
        }
    }

    /* 小于等于手机屏幕尺寸 400px 时样式 */
    @media screen and (max-width: 500px) {

        /* 添加您想要的样式 */
        .login_box {
            height: 280px;
            width: 85%;
        }

    }
}
</style>

小诸葛登录模板 5-28

评论(0) 浏览(353)

vue中设置网页标题 Vue

1.在项目根目录中的 vue.config.js 文件中设置 title 字段，代码如下：

// vue.config.js
module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      title: 'My App' //在这里修改应用程序的标题
    }
  }
}

在上面的示例代码中，我们将 title 字段设置为 "My App"。此时，如果您在浏览器中打开应用程序，将会看到浏览器标签页中显示的标题是 "My App"。
如果您希望在不同页面中显示不同的标题，可以使用 vue-router 提供的 meta 属性。例如：

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: '首页' // 修改页面标题
      }
    },
    //...其他路由省略
  ]
})

router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = 'My App' // 默认标题
  }
  next()
})

export default router

在上述代码中，我们在路由配置中添加了 meta 属性，并在 beforeEach 钩子函数中设置了页面的标题，这样就可以为不同的页面设置不同的标题了。

需要注意的是，由于在浏览器中，document.title 是全局变量，因此最好在每次切换路由时都设置一次标题，以确保应用程序的标题在每个页面上都正确显示。

小诸葛 vue 5-28

评论(0) 浏览(380)