一篇文章帶你使用Typescript封裝一個Vue元件(簡單易懂)
阿新 • • 發佈:2020-06-08
一、搭建專案以及初始化配置
vue create ts_vue_btn
這裡使用了vue CLI3
自定義選擇的服務,我選擇了ts、stylus
等工具。然後建立完專案之後,進入專案。使用快捷命令code .
進入Vs code編輯器(如果沒有code .
,需要將編輯器的bin檔案目錄地址放到環境變數的path
中)。然後,我進入編輯器之後,進入設定工作區,隨便設定一個引數,這裡比如推薦設定字號,點下。這裡是為了生成.vscode
資料夾,裡面有個json
檔案。
我們在開發專案的時候,專案資料夾內的檔案很多,會有時影響視覺。那麼這個檔案就是設定什麼檔案隱藏,注意只是隱藏,而不是刪除!下面是我自己寫的,在Vue cli3生成的專案需要隱藏的檔案引數。
{ "files.exclude": { "**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true,"**/README.md": true,"**/node_modules":true,"**/shims-tsx.d.ts": true,"**/shims-vue.d.ts": true,"**/.browserslistrc": true,".eslintrc.js": true,"babel.config.js": true,"package-lock.json": true,".gitignore": true,"tsconfig.json": true } }
以下就是所看到的檔案目錄,我把一些無關緊要的檔案跟資料夾隱藏或者刪除後所看到的。
檔案解讀(從上往下):
資料夾或檔案 | 包含子資料夾或檔案 | 含義 |
---|---|---|
.vscode | settings.json | 隱藏檔案設定 |
public | index.html、favicon.ico | 靜態檔案存放處 |
src | components資料夾(存放元件)、App.vue、Home.vue、main.js | 專案主要資料夾 |
package.json | 無 | 專案依賴引數等 |
二、開發實踐
下圖為所需要建立的專案檔案目錄,這裡我們開發一個Vue按鈕元件。
如下圖所示,這就是我們要用Typescript
開發的元件。
開始編輯:
1、App.vue
<template> <div id="app"> <Home></Home> </div> </template> <script lang="ts"> import { Component,Vue } from 'vue-property-decorator';// 編寫類樣式元件所需要的一些類或者是裝飾器 import Home from "@/Home.vue"; // 引入頁面元件 // 這裡我們需要使用Component裝飾器,這個裝飾器是註冊元件用的,裡面的引數是一個物件,內有一個components屬性,值為引入的元件名 @Component({ components:{ Home } }) export default class App extends Vue {} </script> <style lang="stylus"> </style>
2、UIBtn.vue
<template> <!-- v-on="$listeners" 可以使用,在本類不再監聽,在其他地方監聽,可以不用$emit(),但是我們這裡不用它 --> <button class="ui-btn" @click="onBtnclick('success!')" :class="{ 'ui-btn-xsmall':xsmall,'ui-btn-small':small,'ui-btn-large':large,'ui-btn-xlarge':xlarge }" > <slot>Button</slot> </button> </template> <script lang="ts"> import { Component,Vue,Emit,Prop } from "vue-property-decorator"; // 編寫類樣式元件所需要的一些類或者是裝飾器 @Component export default class UIBtn extends Vue { @Prop(Boolean) private xsmall: boolean | undefined; @Prop(Boolean) private small: boolean | undefined; @Prop(Boolean) private large: boolean | undefined; @Prop(Boolean) private xlarge: boolean | undefined; // eslint-disable-next-line @typescript-eslint/no-empty-function @Emit("click") private emitclick(x: string) {} private mounted() { console.log(this.large); } private onBtnclick(x: string) { this.emitclick(x); } } </script> <style scoped lang="stylus" > resize(a,b,c) padding a b font-size c .ui-btn resize(12px,20px,14px) border 0 solid #000 border-radius 4px outline none font-weight 500; letter-spacing 0.09em background-color #409eff color #fff cursor pointer user-select none &:hover filter brightness(120%) &:active filter brightness(80%) &.ui-btn-xsmall resize(5px,15px,14px) &.ui-btn-small resize(8px,18px,14px) &.ui-btn-large resize(14px,22px,14px) &.ui-btn-xlarge resize(16px,24px,14px) </style>
3、Home.vue
<template> <div class="home-con"> <div class="btn-group"> <UIBtn class="btn" @click="resize('xsmall')">超小</UIBtn> <UIBtn class="btn" @click="resize('small')">小</UIBtn> <UIBtn class="btn" @click="resize('normal')">正常</UIBtn> <UIBtn class="btn" @click="resize('large')">大</UIBtn> <UIBtn class="btn" @click="resize('xlarge')">超大</UIBtn> </div> <div class="btn-con"> <UIBtn @click='onClick' :xlarge="xlarge" :large="large" :small="small" :xsmall="xsmall" >主要按鈕</UIBtn> </div> <div class="btn-pro"> <UIBtn large >樣式按鈕</UIBtn> </div> </div> </template> <script lang="ts"> import { Component,Vue } from 'vue-property-decorator'; // 編寫類樣式元件所需要的一些類或者是裝飾器 import UIBtn from '@/components/UIBtn.vue'; @Component({ components:{ UIBtn } }) export default class Home extends Vue { // eslint-disable-next-line @typescript-eslint/no-inferrable-types private xlarge: boolean = false; // eslint-disable-next-line @typescript-eslint/no-inferrable-types private large: boolean = false; // eslint-disable-next-line @typescript-eslint/no-inferrable-types private xsmall: boolean = false; // eslint-disable-next-line @typescript-eslint/no-inferrable-types private small: boolean = false; private resize (name: string){ console.log(name) switch (name) { case 'xsmall': this.xsmall=true; this.small=false; this.large=false; this.xlarge=false; break; case 'small': this.xsmall=false; this.small=true; this.large=false; this.xlarge=false; break; case 'normal': this.xsmall=false; this.small=false; this.large=false; this.xlarge=false; break; case 'large': this.xsmall=false; this.small=false; this.large=true; this.xlarge=false; break; case 'xlarge': this.xsmall=false; this.small=false; this.large=false; this.xlarge=true; break; } } private onClick(x: string) { console.log(x) } } </script> <style lang="stylus" scoped> .btn-group margin 50px 0 .btn margin 6px .btn-pro margin-top 50px </style>
到此這篇關於一篇文章帶你使用Typescript封裝一個Vue元件的文章就介紹到這了,更多相關Typescript封裝Vue元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!