fl-web-component 0.1.0 → 0.1.1

package/package.json

@@ -1,47 +1,59 @@
-{
-  "name": "fl-web-component",
-  "version": "0.1.0",
-  "scripts": {
-    "dev": "vue-cli-service serve",
-    "lint": "vue-cli-service lint",
-    "build": "vue-cli-service build --target lib --name fl-web-component ./packages/index.js",
-    "release": "bumpp && npm publish"
-  },
-  "files": [
-    "dist",
-    "packages"
-  ],
-  "main": "dist/fl-web-component.common.js",
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.4.0",
-    "@vue/cli-plugin-eslint": "~4.4.0",
-    "@vue/cli-service": "~4.4.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "fl-web-component",
+  "version": "0.1.1",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "lint": "vue-cli-service lint",
+    "build": "vue-cli-service build --target lib --name fl-web-component ./src/main.js"
+  },
+  "files": [
+    "dist",
+    "packages",
+    "src",
+    "patches"
+  ],
+  "main": "dist/fl-web-component.common.js",
+  "dependencies": {
+    "camera-controls": "^2.6.0",
+    "core-js": "^3.6.5",
+    "element-ui": "2.15.14",
+    "html2canvas": "^1.4.1",
+    "konva": "^9.3.14",
+    "lodash": "^4.17.21",
+    "meshline": "^3.3.1",
+    "three": "^0.175.0",
+    "three.path": "^1.0.1",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "patch-package": "^6.4.7",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/packages/components/button/index.vue

@@ -1,7 +1,10 @@
 <template>
-    <button class="my-button" @click="handleClick">
-        {{ text }}
-    </button>
+    <div>
+        <img src="/example/test.png" alt="">
+        <button class="my-button" @click="handleClick">
+            {{ text }}
+        </button>
+    </div>
 </template>
 <script>
 export default {

package/packages/components/com-card/card-page.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-pagination v-if="pageFlag"
+                  :small="comCard.size=='mini'"
+                  :disabled="defaultPage.disabled"
+                  :hide-on-single-page="defaultPage.single"
+                  :pager-count="defaultPage.pagerCount"
+                  :current-page.sync="defaultPage.currentPage"
+                  :background="defaultPage.background"
+                  :page-size="defaultPage.pageSize"
+                  :page-sizes="defaultPage.pageSizes"
+                  @size-change="sizeChange"
+                  @prev-click="prevClick"
+                  @next-click="nextClick"
+                  @current-change="currentChange"
+                  :layout="defaultPage.layout"
+                  :total="defaultPage.total"></el-pagination>
+</template>
+
+<script>
+// import base from "../../utils/base.js";
+
+export default {
+  name: "comCard",
+  inject: ["comCard"],
+  // mixins: [base()],
+  data () {
+    return {
+      defaultPage: {
+        single: false,
+        total: 0, // 总页数
+        pagerCount: 7,//超过多少条隐藏
+        currentPage: 1, // 当前页数
+        pageSize: 10, // 每页显示多少条
+        pageSizes: [10, 20, 30, 40, 50, 100],
+        layout: 'total, sizes, prev, pager, next, jumper',
+        background: true // 背景颜色
+      }
+    };
+  },
+  created () {
+    this.pageInit();
+    this.comCard.$emit("on-load", this.defaultPage);
+  },
+  watch: {
+    'comCard.page': {
+      handler () {
+        this.pageInit();
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    pageFlag () {
+      return this.defaultPage.total != 0
+    }
+  },
+  methods: {
+    pageInit () {
+      this.defaultPage = Object.assign(this.defaultPage, this.comCard.page)
+      this.updateValue();
+    },
+    updateValue () {
+      console.log('updateValue defaultPage', this.defaultPage)
+      this.comCard.$emit('update:page', this.defaultPage)
+    },
+    //下一页事件
+    nextClick (val) {
+      console.log('nextClick', val)
+      this.comCard.$emit("next-click", val)
+    },
+    //上一页事件
+    prevClick (val) {
+      console.log('prevClick', val)
+      this.comCard.$emit("prev-click", val)
+    },
+    // 页大小回调
+    sizeChange (val) {
+      this.defaultPage.currentPage = 1;
+      this.defaultPage.pageSize = val;
+      this.updateValue();
+      console.log('sizeChange', val)
+      this.comCard.$emit("on-load", this.defaultPage);
+      this.comCard.$emit("size-change", val);
+    },
+    // 页码回调
+    currentChange (val) {
+      this.updateValue();
+      this.comCard.$emit("on-load", this.defaultPage);
+      this.comCard.$emit("current-change", val);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.el-pagination{
+  text-align: right;
+  padding: 15px 10px 15px 20px !important;
+}
+</style>

package/packages/components/com-card/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="card-container">
+    <!-- 列表区域-->
+    <div class="card-list">
+      <el-card 
+        v-loading="loading"
+        class="card"
+        v-for="(item, index) in data"
+        :key="index"
+        :body-style="{ padding: '0px' }"
+      >
+				<slot :data="item"></slot>
+      </el-card>
+    </div>
+    <!-- 分页区域 -->
+    <card-page ref="cardPage">
+    </card-page>
+  </div>
+</template>
+
+<script>
+import CardPage from "./card-page";
+
+export default {
+  name: "comCard",
+	provide () {
+    return {
+      comCard: this
+    };
+  },
+  components: {
+    CardPage, //分页
+  },
+	props: {
+		data: {
+			type: Array,
+			default: () => [],
+			require: true,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+    page: {
+      type: Object,
+      default () {
+        return {};
+      }
+    },
+	}
+};
+</script>
+
+<style></style>

package/packages/components/com-dialogWrapper/Readme.md

@@ -0,0 +1,53 @@
+<!-- 使用方法 样例 -->
+<template>
+  <div class="trigger_dialog">
+    <!-- 触发弹窗操作  -->
+    <el-button type="primary" @click="dialogVisible = true">触发对话框</el-button>
+    <!-- 弹窗组件 -->
+    <DialogWrapper
+      v-if="dialogVisible"
+      dialog-title="触发对话框"
+      :visible.sync="dialogVisible"
+      :popup-width="'35%'"
+      @handleClose="handleClose"
+      @submitDialogData="submitDialogData"
+    >
+      弹窗内容
+    </DialogWrapper>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+    // 弹窗引入，如注册全局组件则克直接使用
+    DialogWrapper: () => import('./DialogWrapper.vue')
+  },
+  props: {},
+  data() {
+    return {
+      dialogVisible: false // 弹框状态
+    }
+  },
+  computed: { },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 弹窗 修改是否让页面显示与隐藏的事件 */
+    updateVisible(val) {
+      this.dialogVisible = val
+    },
+    /* 弹窗 确认 操作 */
+    submitDialogData() {
+      this.dialogVisible = false
+    },
+    /* 弹窗 关闭 操作 */
+    handleClose() {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

package/packages/components/com-dialogWrapper/index.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-13 10:36:07
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-20 09:34:46
+ * @FilePath: /web/components/com-dialogWrapper/index.vue
+ * @Description: 弹窗封装
+-->
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    :title="dialogTitle"
+    :fullscreen="dialogFullScreen"
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+    :width="popupWidth"
+    append-to-body
+  >
+
+    <!-- 弹窗title -->
+    <template slot="title">
+      <div class="custom_dialog_header">
+        <span class="el_dialog_title">{{ dialogTitle }}</span>
+        <div class="custom_dialog_menu" @click="dialogFullScreen = !dialogFullScreen">
+          <svg-icon :icon-class="dialogFullScreen?'exit-fullscreen':'fullscreen'" />
+        </div>
+      </div>
+    </template>
+
+    <!-- 弹窗插槽 -->
+    <slot>
+      <p>弹框自定义的内容</p>
+    </slot>
+
+    <!-- 弹窗操作 -->
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'DialogWrapper',
+  components: {},
+  props: {
+    /* 弹窗 title标题 */
+    dialogTitle: {
+      type: String,
+      default: '标题'
+    },
+    /* 弹窗 width宽度 */
+    popupWidth: {
+      type: String,
+      default: '35%'
+    },
+    /* 弹窗 显示隐藏状态 */
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      openDialog: false,
+      dialogFullScreen: false
+    }
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        // 初始化数据
+        if (this.visible) Object.assign(this.$data, this.$options.data())
+        return this.visible
+      },
+      set(val) {
+        // 当visible改变的时候，触发父组件的 updateVisible方法，
+        // 在该方法中更改传入子组件的 centerDialogVisible的值
+        this.$emit('updateVisible', val)
+      }
+    }
+  },
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    /* 关闭弹窗 */
+    handleClose() {
+      this.$emit('handleClose')
+    },
+    /* 弹窗 确认 操作 */
+    handleSubmit() {
+      this.$emit('submitDialogData')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>