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 相关文章推荐
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php删除数组元素示例分享
2014/02/17 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
python3生成随机数实例
2014/10/20 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
毕业生简单求职信
2013/11/19 职场文书
年会搞笑主持词
2014/03/27 职场文书
安全目标管理责任书
2014/07/25 职场文书
驻村工作先进事迹
2014/08/14 职场文书
移交协议书
2014/08/19 职场文书
志愿者个人总结
2015/03/03 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python