vue制作toast组件npm包示例代码


Posted in Javascript onOctober 29, 2020

之前写了一个ui组件,但是感觉没必要的东西太多了,所以做了一下优化

介绍

之前制作的小组件是用webpack-simple搭建的,但是左思右想感觉没必要的东西太多太多,所以又写了一个清洁版的,直接开整

开始

建立一个空文件夹, 然后直接终端运行 npm init
建立完之后会生成一个 package.json 文件,内容如下

vue制作toast组件npm包示例代码

注意:name是之后要发的npm包的名字 不要重名,建议去npm先搜一下有没有在取

接下来对 package.json 文件添加所需模块,

{
 "name": "sever-ui",
 "version": "1.0.0",
 "description": "一个移动端ui小组件",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --hot --inline",
  "build": "webpack --display-error-details --config webpack.config.js"
 },
 "author": "sever27",
 "license": "ISC",

 "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.7",
    "es6-promise": "^4.1.1",
    "vue": "^2.5.9",
    "vue-hot-reload-api": "^2.2.4",
    "vue-html-loader": "^1.2.4",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^3.9.1",
    "webpack-dev-server": "^2.9.5"
 }
}

配置修改完成之后 终端运行 npm install 安装依赖。

接着在目录下创建文件夹 src及文件等,这是我的目录结构

vue制作toast组件npm包示例代码

对应文件内容
src/main.vue

<template>
 <div v-if="visible" class="sever-toast">
   <span class="toast-msg" >{{msg}}</span>
 </div>
</template>
<script>
export default {
 name:"sever-toast",
 data(){
  return {
   visible:false,
   msg:'默认值',
   duration:'3000',
  }
 },
 methods:{
  close(){
   setTimeout(() => {
    this.visible = false;
   }, this.duration);

  }
 },
 mounted(){
 }
}
</script>
<style >
 .sever-toast{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
 }
 .toast-msg{
  color: #ffffff;
  background:rgba(0,0,0,0.5);
  padding:0.3rem;
  border-radius: 0.1rem;
  font-size: 0.34rem;
 }
</style>

src/main.js

import Vue from 'vue';
import Main from './main.vue'
let MmToast = Vue.extend(Main);

let instance ;

const Toast = function(options) {
 instance = new MmToast({
  data: options
 });
 instance.$mount();
 document.body.appendChild(instance.$el);
 instance.visible = true;

 return instance.close()
}

export default Toast

Toast/index.js

import Toast from './src/main.js'
export default Toast

index.js

import Toast from './Toast/index.js' 

const install = function(Vue) {

 Vue.prototype.$toast = Toast

}
console.log(typeof window !== 'undefined' , window.Vue)

if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue);
}

export default {
 install,
 Toast,
}

接下来修改webpack.dev.conf.js

const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin");

module.exports = {
  devtool: 'source-map',
  entry: "./src/index.js",//入口文件,src目录下的index.js文件,
  output: {
    path: path.resolve(__dirname, './dist'),//输出路径,就是新建的dist目录,
    publicPath: '/dist/',
    filename: 'sever-ui.min.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    rules: [{
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.less$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "less-loader" }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        loader: 'babel-loader'
      },
      {
        test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
        loader: 'url-loader',
        query: {
          limit: 30000,
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    })
  ]
}

好了 一个简单的toast组件已经完成了
接下来是打包 执行 npm run build 生成文件

vue制作toast组件npm包示例代码

接着修改package.json

"main":"./dist/sever-ui.min.js",

然后我们就可以上传到npm了
执行

npm login
npm publish

接下来让我们看看效果

npm install sever-ui

引入

vue制作toast组件npm包示例代码

<template>
 <div class="home">
  <div @click="Toast()">点击Toast</div>
 </div>
</template>

<script>

export default {
 name: 'Home',
 components: {
 },
 methods:{
  Toast(){
   this.$toast({msg:'哈哈哈哈哈哈'})
  }
 }
}
</script>

vue制作toast组件npm包示例代码

修改

优化

只是一个toast感觉直接输入内容,所以做了一下修改
main.js

import Vue from 'vue';
import Main from './main.vue'
let MmToast = Vue.extend(Main);

let instance ;

const Toast = function(options) {
 if( typeof options === 'string'){
  options = {
   msg:options
  }
 }
 instance = new MmToast({
  data: options
 });
 instance.$mount();
 document.body.appendChild(instance.$el);
 instance.visible = true;

 return instance.close()
}

export default Toast

这样 就可以直接使用 this.$toast('toast内容')

到此这篇关于vue制作一个toast组件npm包的文章就介绍到这了,更多相关vue toast组件npm包内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript实现列表分页功能特效
May 15 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
vue axios用法教程详解
Jul 23 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 #Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 #Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 #Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 #Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 #Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 #Javascript
解决ant Design Search无法输入内容的问题
Oct 29 #Javascript
You might like
关于php fread()使用技巧
2010/01/22 PHP
PHP curl使用实例
2015/07/02 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
详解js访问对象的属性和方法
2018/10/25 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
网页美工求职信
2014/02/15 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
二手房购房意向书
2015/05/09 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL