VUE -- 自定义控件(标签)

vue 引入自定义css 和js

一. 引入自定义js

1. 方法一

   首先在main.js中引入：

import Comjs from './js/common.js'     //引入公用js
Vue.prototype.$comjs = Comjs;         //添加到vue属性中

• 1
• 2

自定义js 中写：

const comjs = {

}

comjs.title = function (title) {
  alert(title)
}

export default comjs;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

页面中使用：

<template>
    <div>
        <button class="btn" @click="clickme">click me</button>
    </div>
</template>

<script>
    export default {
        data(){
            return{
            }
        },
        methods:{
            clickme(){
                this.$comjs.title('你点我了');
            }
        }
    }
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

2.方法二（此方法不需要在main.js中引入）

自定义js 中写：

function title(t){
    alert(t);
}

export {
    title     //多个方法在此处json中export出去
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

页面中使用：

<template>
    <div>
        <button class="btn" @click="clickme">click me</button>
    </div>
</template>
<script>
    import {title} from './js/common.js'   //可以选择需要的方法引入
    export default {
        data(){
            return{
            }
        },
        methods:{
            clickme(){
                title('你点我了');
            }
        }
    }
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

二. 引入自定义css 
在main.js中引入公用css

import '../static/css/common.css'          //引入公用css 

• 1

在页面中引入单独css

<style scoped>
    @import '../../static/css/header.css';
</style>