[Vue] 35. 插件的使用：定义一个数据校验插件

最新推荐文章于 2023-04-03 09:18:56 发布

weiweicn!

最新推荐文章于 2023-04-03 09:18:56 发布

阅读量323

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014627255/article/details/125640648

版权

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

做一个对年龄限制的数据校验

原始代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>33</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // 对数据做校验的插件
        const app = Vue.createApp({
            data() {
                return {name: 'dell', age: 28}
            },
            template: `
            <div>name: {{name}}, age: {{age}}</div>
            `
        });
        const vm = app.mount('#root')
    </script>
</body>
</html>

用mixin实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>33</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // 对数据做校验的插件
        const app = Vue.createApp({
            data() {
                return {name: 'dell', age: 28}
            },
            rules: {
                age: {
                    validate: age => age > 25,
                    message: 'too young'
                }
            },
            template: `
            <div>name: {{name}}, age: {{age}}</div>
            `
        });
        app.mixin({
            created() {
                for(let key in this.$options.rules) {
                    const item = this.$options.rules[key];
                    console.log(item)
                    this.$watch(key, (value) => {
                        const result = item.validate(value);
                        if(!result) {
                            console.log(item.message);
                        }
                    })
                }
            }
        })
        const vm = app.mount('#root')
    </script>
</body>
</html>

在这里插入图片描述

用插件实现（插件中封装mixin）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>33</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        // 对数据做校验的插件
        const app = Vue.createApp({
            data() {
                return {name: 'dell', age: 28}
            },
            rules: {
                age: {
                    validate: age => age > 25,
                    message: 'too young'
                }
            },
            template: `
            <div>name: {{name}}, age: {{age}}</div>
            `
        });
        const validatorPlugin = (app, options) => {
            app.mixin({
            created() {
                for(let key in this.$options.rules) {
                    const item = this.$options.rules[key];
                    console.log(item)
                    this.$watch(key, (value) => {
                        const result = item.validate(value);
                        if(!result) {
                            console.log(item.message);
                        }
                    })
                }
            }
        })
        }
        app.use(validatorPlugin)
        const vm = app.mount('#root')
    </script>
</body>
</html>