一篇文章带你使用Typescript封装一个Vue组件(简单易懂)


Posted in Javascript onJune 05, 2020

一、搭建项目以及初始化配置

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>

到此这篇关于一篇文章带你使用Typescript封装一个Vue组件的文章就介绍到这了,更多相关Typescript封装Vue组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 #Javascript
vue渲染方式render和template的区别
Jun 05 #Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 #Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 #Javascript
VueX模块的具体使用(小白教程)
Jun 05 #Javascript
Vuex的热更替如何实现
Jun 05 #Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 #Javascript
You might like
PHP编程网上资源导航
2006/10/09 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php强制运行广告的方法
2014/12/01 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python实现画出e指数函数的图像
2019/11/21 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
python如何调用java类
2020/07/05 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
酒吧副总经理岗位职责
2013/12/10 职场文书
招商业务员岗位职责
2013/12/16 职场文书
经济管理专业自荐信
2013/12/30 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
项目建议书范文
2014/05/12 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
一年级小学生评语大全
2014/12/25 职场文书
法定代表人资格证明书
2015/06/18 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Python find()、rfind()方法及作用
2022/12/24 Python