參考vue創建組件的方式：
https://blog.csdn.net/WU5229485/article/details/82908068
https://blog.csdn.net/wxw20147854/article/details/82829096
https://doc.vue-js.com/v2/guide/components.html
我使用以下的方式自定義組件
折行轉義字符
目錄結構
sort-dropdown我的自定義組件，代碼如下：
JS代碼：demo-component.js
/**
* course-sort組件
*/
/* 註冊全局組件 */
Vue.component('course-sort',{
template: '\
<el-dropdown placement="bottom-start" trigger="click" @command="handleCommandSort">\
<span class="el-dropdown-link">\
課程\
</span>\
<el-dropdown-menu slot="dropdown">\
<el-container class="sort-list-container">\
<el-main class="sort-list-main">\
<div class="sort-title">課程分類</div>\
<el-dropdown-item v-for="(item, index) in rootResourceTypeList" \
:key="index"\
:command="index">\
{{ item.resourceTypeName }}\
</el-dropdown-item>\
</el-main>\
</el-container>\
</el-dropdown-menu>\
</el-dropdown>\
',
props: [],
data: function () {
return {
rootResourceTypeList: []
};
},
mounted: function () {
this.getRootResourceTypeList();
},
methods: {
/**
* 點擊下拉菜單的分類選項
* @param e command元素
*/
handleCommandSort: function(i){
if(i == -1) return;
this.childrenCourse(this.rootResourceTypeList[i].resourceTypeId, this.rootResourceTypeList[i].resourceTypeName);
},
/**
* 根據資源類型的名稱查看相關的子分類的課程
* @param resourceTypeName
*/
childrenCourse(resourceTypeId, resourceTypeName){
console.log("點擊了分類子項目：");
console.log(resourceTypeId,resourceTypeName);
},
/**
* 獲取所有的二級課程分類
*/
getRootResourceTypeList: function() {
this.rootResourceTypeList = [{
resourceTypeId: '1001',
resourceTypeName: '計算機1'
},
{
resourceTypeId: '1002',
resourceTypeName: '計算機2'
},
{
resourceTypeId: '1003',
resourceTypeName: '計算機3'
},
{
resourceTypeId: '1004',
resourceTypeName: '計算機4'
},
{
resourceTypeId: '1005',
resourceTypeName: '計算機5'
}];
console.log("獲取分類");
}
}
});
CSS代碼：demo-component.css
.el-dropdown {
font-size: 16px;
cursor: pointer;
}
.el-dropdown-menu {
width: 600px;
height: 300px;
padding: 10px 20px;
}
.el-dropdown-menu__item {
display: inline-block;
min-width: 110px;
padding: 0 10px;
margin: 10px 12px 2px 0;
border-radius: 16px;
line-height: 32px;
font-size: 14px;
color: #333333;
text-align: center;
background-color: rgba(0, 0, 0, 0.04);
}
.sort-title {
width: 100%;
line-height: 18px;
color: black;
font-size: 16px;
text-align: left;
border-radius: 0;
padding: 0;
background-color: rgba(0, 0, 0, 0);
}
.sort-title:hover {
background-color: rgba(0, 0, 0, 0) !important;
color: black !important;
}
.sort-list-container {
width: 100%;
height: 100%;
padding-bottom: 10px;
overflow-x: hidden;
}
.sort-list-main {
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: auto;
overflow-x: hidden;
}
.content{
width: 70%;
}
在index.html中調用自定義組件sort-dropdown
調用方式：
<!-- sort-dropdown 使用組件 -->
<script src="components/sort-dropdown/demo-component.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="components/sort-dropdown/demo-component.css">
index.html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="common/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="common/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="common/base.css"/>
<!-- element-ui引入樣式 引入組件庫-->
<script src="common/element-ui/index.js"></script>
<link rel="stylesheet" href="common/element-ui/index.css">
<!-- sort-dropdown 使用組件 -->
<script src="components/sort-dropdown/demo-component.js"
type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="components/sort-dropdown/demo-component.css">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="padding-xl">
<h1>{{ title }}</h1>
<course-sort class="margin-top"></course-sort>
</div>
</body>
</html>
index.html中的index.js代碼如下：
var app;
$(document).ready(function(){
app = new Vue({
el: '#app',
components: { // 不需要註冊也能使用
},
mounted: function () {
console.log("vue掛載完成");
},
data: {
title: '使用CDN構建VUE項目'
},
methods: {
}
});
});
效果圖：
總結：
通過CDN方式構建vue項目的自定義組件，目前我還沒有找到如何做成單文件組件的效果，現在只能這樣湊合着使用，將js和HTML寫在一起，樣式文件分開，使用的時候進行導入。
如有方式能做成單文件效果，歡迎留言~