ssl-random-bgcolor - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "ssl-random-bgcolor",
-  "version": "1.0.0",
-  "description": "Click on the box to replace the random background",
+  "version": "1.0.1",
+  "description": "",
   "main": "ssl-random-bgcolor.common.js",
@@ -9,8 +9,5 @@ "scripts": {
   },
-  "keywords": [
-    "bgcolor",
-    "random"
-  ],
+  "keywords": ["bgcolor","random"],
   "author": "",
   "license": "ISC"
 }

README.md

@@ -1,26 +0,24 @@
-  # ssl-random-bgcolor
-  Click on the box to replace the random background
+#ssl-random-bgcolor
+Click on the box to replace the random background
 
-  [![version](https://badgen.net/badge/version/v1.0.0/green)](https://npmjs.com/package/ssl-random-bgcolor)
+[![version](https://badgen.net/badge/version/v1.0.0/green)](https://npmjs.com/package/your-package-name)
 
-  # Install
-  ```js
-  npm i ssl-random-bgcolor
-  ```
+#Install
+npm i ssl-random-bgcolor
 
-  # Usage
-  ```js
-  // 在vue文件main.js中引入自定义插件
-  import RandomBgcolor from 'ssl-random-bgcolor'
-  import "../node_modules/ssl-random-bgcolor/ssl-random-bgcolor.css"
-  Vue.use(RandomBgcolor)
-  ```
+#Usage
+```js
+// 在vue文件main.js中引入自定义插件
+import RandomBgcolor from 'ssl-random-bgcolor'
+import "../node_modules/ssl-random-bgcolor/ssl-random-bgcolor.css"
+Vue.use(RandomBgcolor)
+```
 
-  Use in the page:
-  ```vue
-  <template>
-    <div>
-      <random-bgcolor></random-bgcolor>
-    </div>
-  </template>
-  ```
+Use in the page:
+```vue
+<template>
+  <div>
+    <random-bgcolor></random-bgcolor>
+  </div>
+</template>
+```

ssl-random-bgcolor.common.js

@@ -67,3 +67,3 @@ /******/ (function() { // webpackBootstrap
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=template&id=0601cf50&scoped=true
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=template&id=2c542c9d&scoped=true
 var render = function render() {
@@ -73,3 +73,6 @@ var _vm = this,
   return _c('div', {
-    staticClass: "container"
+    staticClass: "container",
+    on: {
+      "click": _vm.changeBgColor
+    }
   }, [_c('h1', [_vm._v(" " + _vm._s(_vm.message) + " ")])]);
@@ -79,17 +82,30 @@ };
 
+;// CONCATENATED MODULE: ./src/package/utils/tools.js
+function random(upper, lower) {
+  return Math.round(Math.random() * (upper - lower) + lower);
+}
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=script&lang=js
+
 /* harmony default export */ var randomBgcolorvue_type_script_lang_js = ({
   data() {
     return {
-      message: "Hello"
+      message: "点我"
     };
   },
-  methods: {}
+  methods: {
+    changeBgColor() {
+      const r = random(0, 255);
+      const g = random(0, 255);
+      const b = random(0, 255);
+      const result = `rgb(${r},${g},${b})`;
+      document.body.style.backgroundColor = result;
+    }
+  }
 });
 ;// CONCATENATED MODULE: ./src/package/randomBgcolor/index.vue?vue&type=script&lang=js
  /* harmony default export */ var package_randomBgcolorvue_type_script_lang_js = (randomBgcolorvue_type_script_lang_js); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=0601cf50&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=2c542c9d&prod&scoped=true&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=0601cf50&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=2c542c9d&prod&scoped=true&lang=css
 
@@ -209,3 +225,3 @@ ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
   null,
-  "0601cf50",
+  "2c542c9d",
   null
@@ -212,0 +228,0 @@

ssl-random-bgcolor.umd.js

@@ -77,3 +77,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=template&id=0601cf50&scoped=true
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=template&id=2c542c9d&scoped=true
 var render = function render() {
@@ -83,3 +83,6 @@ var _vm = this,
   return _c('div', {
-    staticClass: "container"
+    staticClass: "container",
+    on: {
+      "click": _vm.changeBgColor
+    }
   }, [_c('h1', [_vm._v(" " + _vm._s(_vm.message) + " ")])]);
@@ -89,17 +92,30 @@ };
 
+;// CONCATENATED MODULE: ./src/package/utils/tools.js
+function random(upper, lower) {
+  return Math.round(Math.random() * (upper - lower) + lower);
+}
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=script&lang=js
+
 /* harmony default export */ var randomBgcolorvue_type_script_lang_js = ({
   data() {
     return {
-      message: "Hello"
+      message: "点我"
     };
   },
-  methods: {}
+  methods: {
+    changeBgColor() {
+      const r = random(0, 255);
+      const g = random(0, 255);
+      const b = random(0, 255);
+      const result = `rgb(${r},${g},${b})`;
+      document.body.style.backgroundColor = result;
+    }
+  }
 });
 ;// CONCATENATED MODULE: ./src/package/randomBgcolor/index.vue?vue&type=script&lang=js
  /* harmony default export */ var package_randomBgcolorvue_type_script_lang_js = (randomBgcolorvue_type_script_lang_js); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=0601cf50&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=2c542c9d&prod&scoped=true&lang=css
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=0601cf50&prod&scoped=true&lang=css
+;// CONCATENATED MODULE: ./src/package/randomBgcolor/index.vue?vue&type=style&index=0&id=2c542c9d&prod&scoped=true&lang=css
 
@@ -219,3 +235,3 @@ ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
   null,
-  "0601cf50",
+  "2c542c9d",
   null
@@ -222,0 +238,0 @@

ssl-random-bgcolor.umd.min.js

@@ -1,2 +0,2 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["ssl-random-bgcolor"]=t():e["ssl-random-bgcolor"]=t()})("undefined"!==typeof self?self:this,(function(){return function(){"use strict";var e={};!function(){e.d=function(t,n){for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})}}(),function(){e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){e.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){e.p=""}();var t={};if(e.r(t),e.d(t,{default:function(){return p}}),"undefined"!==typeof window){var n=window.document.currentScript,o=n&&n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(e.p=o[1])}var r=function(){var e=this,t=e._self._c;return t("div",{staticClass:"container"},[t("h1",[e._v(" "+e._s(e.message)+" ")])])},i=[],s={data(){return{message:"Hello"}},methods:{}},c=s;function f(e,t,n,o,r,i,s,c){var f,d="function"===typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),o&&(d.functional=!0),i&&(d._scopeId="data-v-"+i),s?(f=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},d._ssrRegister=f):r&&(f=c?function(){r.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:r),f)if(d.functional){d._injectStyles=f;var u=d.render;d.render=function(e,t){return f.call(t),u(e,t)}}else{var a=d.beforeCreate;d.beforeCreate=a?[].concat(a,f):[f]}return{exports:e,options:d}}var d=f(c,r,i,!1,null,"0601cf50",null),u=d.exports;const a={install:function(e){e.component("RandomBgcolor",u)}};"undefined"!==typeof window&&window.Vue&&window.Vue.use(a);var l=a,p=l;return t}()}));
+(function(e,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports["ssl-random-bgcolor"]=n():e["ssl-random-bgcolor"]=n()})("undefined"!==typeof self?self:this,(function(){return function(){"use strict";var e={};!function(){e.d=function(n,t){for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})}}(),function(){e.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)}}(),function(){e.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){e.p=""}();var n={};if(e.r(n),e.d(n,{default:function(){return _}}),"undefined"!==typeof window){var t=window.document.currentScript,o=t&&t.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(e.p=o[1])}var r=function(){var e=this,n=e._self._c;return n("div",{staticClass:"container",on:{click:e.changeBgColor}},[n("h1",[e._v(" "+e._s(e.message)+" ")])])},i=[];function s(e,n){return Math.round(Math.random()*(e-n)+n)}var c={data(){return{message:"点我"}},methods:{changeBgColor(){const e=s(0,255),n=s(0,255),t=s(0,255),o=`rgb(${e},${n},${t})`;document.body.style.backgroundColor=o}}},d=c;function a(e,n,t,o,r,i,s,c){var d,a="function"===typeof e?e.options:e;if(n&&(a.render=n,a.staticRenderFns=t,a._compiled=!0),o&&(a.functional=!0),i&&(a._scopeId="data-v-"+i),s?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},a._ssrRegister=d):r&&(d=c?function(){r.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:r),d)if(a.functional){a._injectStyles=d;var u=a.render;a.render=function(e,n){return d.call(n),u(e,n)}}else{var f=a.beforeCreate;a.beforeCreate=f?[].concat(f,d):[d]}return{exports:e,options:a}}var u=a(d,r,i,!1,null,"2c542c9d",null),f=u.exports;const l={install:function(e){e.component("RandomBgcolor",f)}};"undefined"!==typeof window&&window.Vue&&window.Vue.use(l);var p=l,_=p;return n}()}));
 //# sourceMappingURL=ssl-random-bgcolor.umd.min.js.map

No alert changes

Improved metrics

Total package byte prevSize

57034

increased by7.97%

Lines of code

462

increased by7.19%

Worsened metrics

Number of lines in readme file

24

decreased by-7.69%

No dependency changes