第三章：书写html组件

sa-admin不仅支持vue组件，还支持html组件，在html引入vue组件，使用httpVueLoader的形式，记得使用el绑定到节点中。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 所有的

苍穹之跃

87997人浏览 · 2021-10-24 14:50:42

苍穹之跃 · 2021-10-24 14:50:42 发布

sa-admin不仅支持vue组件，还支持html组件，在html引入vue组件，使用httpVueLoader的形式，记得使用el绑定到节点中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 所有的 css & js 资源 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../static/sa.css">
    <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
    <script src="../../static/sa.js"></script>
</head>
<body>
<div id="root">
    <div>
        <el-input placeholder="目的地"></el-input>
    </div>
    <ddusers-add></ddusers-add>
</div>
<script type="text/javascript">
    let vue = new Vue({
        //一定要绑定到节点上去
        el: "#root",
        //引入组件
        components: {
            "ddusers-add": httpVueLoader('./ddusers-add.vue')
        },
        data: {
            //从url上获取参数
            id: sa.p('id', "0"),
        },
        methods: {}
    });
</script>
</body>
</html>

在导航栏中引入，找到sa-frame目录下的menu-list.js文件

访问页面可以看到已经访问成功

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^