一篇文章带你使用Typescript封装一个Vue组件

Jacquelyn38
• 阅读 1591

搭建项目以及初始化配置

vue create ts_vue_btn  

这里使用了vue CLI3自定义选择的服务,我选择了ts、stylus等工具。然后创建完项目之后,进入项目。使用快捷命令code .进入Vs code编辑器(如果没有code .,需要将编辑器的「bin文件目录地址」放到环境变量的path中)。然后,我进入编辑器之后,进入设置工作区,随便设置一个参数,这里比如推荐设置字号,点下。这里是为了生成.vscode文件夹,里面有个json文件。一篇文章带你使用Typescript封装一个Vue组件

我们在开发项目的时候,项目文件夹内的文件很多,会有时影响视觉。那么这个文件就是设置什么文件隐藏,注意只是隐藏,而不是删除!下面是我自己写的,在「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  
    }  
}  

以下就是所看到的文件目录,我把一些无关紧要的文件跟文件夹隐藏或者删除后所看到的。一篇文章带你使用Typescript封装一个Vue组件文件解读(从上往下):

文件夹或文件 包含子文件夹或文件 含义
.vscode settings.json 隐藏文件设置
public index.html、favicon.ico 静态文件存放处
src components文件夹(存放组件)、App.vue、Home.vue、main.js 项目主要文件夹
package.json 项目依赖参数等

开发实践

下图为所需要创建的项目文件目录,这里我们开发一个Vue按钮组件。一篇文章带你使用Typescript封装一个Vue组件)如下图所示,这就是我们要用Typescript开发的组件。一篇文章带你使用Typescript封装一个Vue组件


开始编辑:
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>  

结语

作者:「Vam的金豆之路」

主要领域:「前端开发」

我的微信:「maomin9761」

微信公众号:「前端历劫之路」

一篇文章带你使用Typescript封装一个Vue组件

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/7yVMIx2t4ErXdZTizY-TPw,如有侵权,请联系删除。

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
技术小男生 技术小男生
4个月前
linux环境jdk环境变量配置
1:编辑系统配置文件vi/etc/profile2:按字母键i进入编辑模式,在最底部添加内容:JAVAHOME/opt/jdk1.8.0152CLASSPATH.:$JAVAHOME/lib/dt.jar:$JAVAHOME/lib/tools.jarPATH$JAVAHOME/bin:$PATH3:生效配置
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue