VUE component模板

最新推荐文章于 2024-08-06 10:17:00 发布

captaintao

最新推荐文章于 2024-08-06 10:17:00 发布

阅读量631

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/taotaox/article/details/79113367

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

注意：<script type="text/javascript">标签是js下，而模板：<template id="upLoading">标签只能在html标签下，所以把模板做成js使用不了，只能写在当前HTML引用页面一起加载

HTML的使用：

<up-loading ref="ss"></up-loading>

<%- include('./../../../Main/views/vue_component/ui') %>

VUE 调用：

that.$refs.ss.Open('xxx');

Open为模板里的方法，ss不能有大写字母，不然无法识别。

<!-- UpLoading -->
<template id="upLoading">

<div >
    <input v-show="show" id="fileSelect" name="fileSelect"  @change="update" ref="inputer" type="file" multiple/>

</div>

</template>

<script type="text/javascript">
    "use strict";
    Vue.component('up-loading', {    //不能有大写
        template    : '#upLoading',
        props: {
            drop: {
                default: false,
            },
            value: {        //前端传来的插槽值
                type: Array,
                default: Array,
            },
        },
        data() {      //写法不能改变
            return{
                show: true,
                files:[],
            }

        },


        watch: {
            files:function () {
                console.log("file changed");
            }
        },

        methods: {

            update: function () {
               
               

            },

            fileopen:function () {
              
            },

            filepost:function () {
                
              
            },

            //file列表删除
            delfile:function (index) {
                //this.files.remove(index);
            },

            unselect () {
                this.$refs.table1.unSelectAll()
            },
        }

    });
</script>