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 相关文章推荐
JS中处理与当前时间间隔的函数代码
May 23 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
javascript实现简单页面倒计时
Mar 02 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
浅析vue数据绑定
2017/01/17 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue2.0实现音乐/视频播放进度条组件
2018/06/06 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
浅谈python import引入不同路径下的模块
2017/07/11 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
单位提档介绍信
2014/01/17 职场文书
教育科研先进个人材料
2014/01/26 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
新春寄语大全
2014/04/09 职场文书
商场促销活动总结
2014/07/10 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
Apache POI的基本使用详解
2021/11/07 Servers
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers