refactor: update color picker to support alpha

zh: 更新颜色选择器来支持透明度选择

refactor: update color picker to support alpha
zh: 更新颜色选择器来支持透明度选择
ly525
1 parent 51648b0d
Showing 7 changed files with 77 additions and 19 deletions
front-end/h5/babel.config.js
front-end/h5/package.json
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/plugins/common/props.js
front-end/h5/src/components/plugins/lbp-background.js
front-end/h5/src/main.js
front-end/h5/yarn.lock
 module.exports = {
   presets: [
     '@vue/app'
+    // ['es2015', { 'modules': false }]
+  ],
+  'plugins': [
+    [
+      'component',
+      {
+        'libraryName': 'element-ui',
+        'styleLibraryName': 'theme-chalk'
+      }
+    ]
   ]
 }
@@ -19,7 +19,7 @@
     "animate.css": "^3.7.2",
     "ant-design-vue": "^1.3.14",
     "core-js": "^2.6.5",
-    "element-ui": "^2.9.1",
+    "element-ui": "^2.13.0",
     "font-awesome": "4.7.0",
     "html2canvas": "^1.0.0-rc.3",
     "medium-editor": "^5.23.3",
@@ -39,7 +39,6 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "dart-sass": "^1.23.7",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-plugin-pwa": "^3.8.0",
@@ -50,6 +49,8 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
+    "babel-plugin-component": "^1.1.1",
+    "dart-sass": "^1.23.7",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "sass": "^1.18.0",
@@ -12,7 +12,7 @@ const defaultStyle = {
   zindex: 1,
   textAlign: 'center',
   color: '#000000',
-  backgroundColor: '#ffffff',
+  backgroundColor: 'rgba(255, 255, 255, 0)',
   fontSize: 14
 }
@@ -31,12 +31,13 @@ export default {
   },
   backgroundColor: {
     type: String,
-    default: '#ffffff',
+    default: 'rgba(255, 255, 255, 0.2)',
     editor: {
-      type: 'a-input', // lbs-color-picker
+      type: 'el-color-picker',
       label: '背景颜色',
       prop: {
-        type: 'color'
+        size: 'mini',
+        showAlpha: true
       },
       require: true
     }
@@ -48,11 +49,12 @@ export default {
     // The value of an <input> element of type color is always a DOMString which contains a 7-character string specifying an RGB color in hexadecimal format.
     default: '#000000',
     editor: {
-      type: 'a-input',
+      type: 'el-color-picker',
       label: '文字颜色',
       // !#zh 为编辑组件指定 prop
       prop: {
-        type: 'color'
+        size: 'mini',
+        showAlpha: true
       },
       require: true
     }
@@ -117,10 +119,11 @@ export default {
     type: String,
     default: '#ced4da',
     editor: {
-      type: 'a-input', // lbs-color-picker
+      type: 'el-color-picker',
       label: '边框颜色',
       prop: {
-        type: 'color'
+        size: 'mini',
+        showAlpha: true
       },
       require: true
     }
+/*
+ * @Author: ly525
+ * @Date: 2019-11-24 18:51:58
+ * @LastEditors: ly525
+ * @LastEditTime: 2019-11-30 23:02:31
+ * @FilePath: /luban-h5/front-end/h5/src/components/plugins/lbp-background.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Description: luban-h5 background image/color component/plugin
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ */
 export default {
   name: 'lbp-background',
   render () {
@@ -46,12 +56,13 @@ export default {
       // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value
       // The value of an <input> element of type color is always a DOMString which contains a 7-character string specifying an RGB color in hexadecimal format.
-      default: '#ffffff',
+      default: 'rgba(255, 255, 255, 0.2)',
       editor: {
-        type: 'a-input', // lbs-color-picker
+        type: 'el-color-picker',
         label: '背景颜色',
         prop: {
-          type: 'color'
+          size: 'mini',
+          showAlpha: true
         },
         require: true
       }
@@ -5,6 +5,7 @@ import store from &#39;./store/&#39;
 import i18n from './locales'
 // import './registerServiceWorker'
 // import ElementUI from 'element-ui'
+import { ColorPicker, Button } from 'element-ui'
 import Antd from 'ant-design-vue'
 // import 'element-ui/lib/theme-chalk/index.css'
@@ -16,7 +17,15 @@ import vClickOutside from &#39;v-click-outside&#39;
 Vue.config.productionTip = false
 Vue.use(Antd)
 Vue.use(vClickOutside)
-// Vue.use(ElementUI)
+
+/**
+ * #!en import element-ui color picker for bgcolor、color, because a-input(ant-design-vue) component do not support alpha
+ * #!zh 引入 element-ui 颜色选择器，因为 ant-design-vue 没有提供颜色选择器，默认的 <a-input type="color" /> 不支持选择透明度
+ *
+ * https://github.com/ly525/luban-h5/issues/105
+ */
+Vue.component(Button.name, Button)
+Vue.component(ColorPicker.name, ColorPicker)
 new Vue({
   router,
@@ -142,6 +142,14 @@
   dependencies:
     "@babel/types" "^7.5.5"
+"@babel/helper-module-imports@7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.npm.taobao.org/@babel/helper-module-imports/download/@babel/helper-module-imports-7.0.0-beta.35.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fhelper-module-imports%2Fdownload%2F%40babel%2Fhelper-module-imports-7.0.0-beta.35.tgz#308e350e731752cdb4d0f058df1d704925c64e0a"
+  integrity sha1-MI41DnMXUs200PBY3x1wSSXGTgo=
+  dependencies:
+    "@babel/types" "7.0.0-beta.35"
+    lodash "^4.2.0"
+
 "@babel/helper-module-imports@^7.0.0":
   version "7.0.0"
   resolved "https://registry.npm.taobao.org/@babel/helper-module-imports/download/@babel/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@@ -687,6 +695,15 @@
     globals "^11.1.0"
     lodash "^4.17.13"
+"@babel/types@7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.0.0-beta.35.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Ftypes%2Fdownload%2F%40babel%2Ftypes-7.0.0-beta.35.tgz#cf933a9a9a38484ca724b335b88d83726d5ab960"
+  integrity sha1-z5M6mpo4SEynJLM1uI2Dcm1auWA=
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5", "@babel/types@^7.6.0", "@babel/types@^7.6.3":
   version "7.6.3"
   resolved "https://registry.npm.taobao.org/@babel/types/download/@babel/types-7.6.3.tgz#3f07d96f854f98e2fbd45c64b0cb942d11e8ba09"
@@ -1932,6 +1949,13 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
+babel-plugin-component@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npm.taobao.org/babel-plugin-component/download/babel-plugin-component-1.1.1.tgz#9b023a23ff5c9aae0fd56c5a18b9cab8c4d45eea"
+  integrity sha1-mwI6I/9cmq4P1WxaGLnKuMTUXuo=
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.35"
+
 babel-plugin-dynamic-import-node@^2.2.0, babel-plugin-dynamic-import-node@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npm.taobao.org/babel-plugin-dynamic-import-node/download/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
@@ -3971,10 +3995,10 @@ electron-to-chromium@^1.3.295:
   resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.302.tgz?cache=0&sync_timestamp=1572711562817&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.302.tgz#4c7ba3d56166507a56f7eb603fdde1ed701f5ac8"
   integrity sha1-THuj1WFmUHpW9+tgP93h7XAfWsg=
-element-ui@^2.9.1:
-  version "2.12.0"
-  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.12.0.tgz#a893bc11ae4f7dbb7e9d541606f23e643f131ee4"
-  integrity sha1-qJO8Ea5Pfbt+nVQWBvI+ZD8THuQ=
+element-ui@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.0.tgz#f6bb04e5b0a76ea5f62466044b774407ba4ebd2d"
+  integrity sha1-9rsE5bCnbqX2JGYES3dEB7pOvS0=
   dependencies:
     async-validator "~1.8.1"
     babel-helper-vue-jsx-merge-props "^2.0.0"
@@ -7065,7 +7089,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.15"
   resolved "https://registry.npm.taobao.org/lodash/download/lodash-4.17.15.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=