feat(ui): 添加二维码，图片组件

packages/ui/package.json

@@ -13,11 +13,13 @@
  "dependencies": {
  "@tmagic/schema": "^1.0.0-rc.2",
  "delegate": "^3.2.0",
+ "qrcode": "^1.5.0",
  "tiny-emitter": "^2.1.0",
  "vue": "^3.2.0"
  },
  "devDependencies": {
  "@testing-library/vue": "^6.4.2",
+ "@types/qrcode": "^1.4.2",
  "@vue/compiler-sfc": "^3.2.0",
  "@vue/test-utils": "^2.0.0-rc.12"
  }

packages/ui/src/container/src/Container.vue

@@ -1,7 +1,7 @@
 <template>
  <div
  v-if="display()"
- :id="config.id"
+ :id="`${config.id || ''}`"
  :class="`magic-ui-container${config.className ? ` ${config.className}` : ''}`"
  :style="style"
  >

packages/ui/src/img/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Img from './src/index.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+
+export default Img;

packages/ui/src/img/src/formConfig.ts

@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+ {
+ text: '图片',
+ name: 'src',
+ },
+ {
+ text: '链接',
+ name: 'url',
+ },
+];

packages/ui/src/img/src/index.vue

@@ -0,0 +1,30 @@
+<template>
+ <img class="magic-ui-img" :src="config.src" @click="clickHandler" />
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+import { MImg } from '../../types';
+
+export default defineComponent({
+ name: 'magic-ui-img',
+ props: {
+ config: {
+ type: Object as PropType<MImg>,
+ default: () => ({}),
+ },
+
+ model: {
+ type: Object,
+ default: () => ({}),
+ },
+ },
+ setup(props) {
+ return {
+ clickHandler() {
+ window.location.href = props.config.url;
+ },
+ };
+ },
+});
+</script>

packages/ui/src/img/src/initValue.ts

@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default {
+ src: 'https://puui.qpic.cn/vupload/0/1573555382625_bhp0wud8l6w.png/0',
+ url: '',
+ style: {
+ position: 'absolute',
+ left: '57',
+ width: '176',
+ height: '176',
+ },
+};

packages/ui/src/index.ts

@@ -18,14 +18,18 @@
 
 import Button from './button';
 import Container from './container';
+import Img from './img';
 import Page from './page';
+import Qrcode from './qrcode';
 import Text from './text';
 
 const ui: Record<string, any> = {
  page: Page,
  container: Container,
  button: Button,
  text: Text,
+ img: Img,
+ qrcode: Qrcode,
 };
 
 export default ui;

packages/ui/src/qrcode/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Qrcode from './src/index.vue';
+
+export { default as config } from './src/formConfig';
+export { default as value } from './src/initValue';
+
+export default Qrcode;

packages/ui/src/qrcode/src/formConfig.ts

@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default [
+ {
+ text: '链接',
+ name: 'url',
+ },
+];