Giter VIP home page Giter VIP logo

Comments (5)

lljj-x avatar lljj-x commented on May 10, 2024 2

Widget 组件都必须是 v-model 的，并且在vue3中都使用modelValue props

<template>
    <div>
        <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            :before-upload="uploadFile"
        >
            <img
                v-if="image"
                style="width: 100%"
                :src="image"
                alt="avatar"
            />
            <div v-else>
                <loading-outlined v-if="loading" />
                <plus-outlined v-else />
                <div class="ant-upload-text">Upload</div>
            </div>
        </a-upload>
        <a-input
            :value="image"
            @change="changeImage"
        />
    </div>
</template>
<script>
import {
    PlusOutlined,
    LoadingOutlined,
} from '@ant-design/icons-vue';
import { ref, computed } from 'vue';

export default {
    name: 'JsonSchemaImageWidget',
    components: {
        PlusOutlined,
        LoadingOutlined,
    },
    props: {
        modelValue: {
            type: String,
            default: null
        }
    },
    setup(props, { emit }) {
        const loading = ref(false);

        const image = computed({
            get: () => props.modelValue,
            set: (val) => {
                emit('update:modelValue', val);
            },
        });

        const changeImage = (e) => {
            image.value = e.target.value;
        };

        const uploadFile = async (e) => {
            loading.value = true;

            image.value = 'https://ww.ww.w.w';

            loading.value = false;
            return Promise.resolve();
        };

        return {
            image,
            changeImage,
            uploadFile,
            loading
        };
    }
};
</script>

image

from vue-json-schema-form.

lljj-x avatar lljj-x commented on May 10, 2024 1

奈斯，vue3 antd 没有提供 color picker，所以就使用了原生的 ，这样挺好，到时候可以更新在后续版本默认的format color中 。

另外上面使用 a-input 这类组件时，一般是直接使用 v-model 的，不用像 react 手动 vaule + onChange

<template>
    <div>
        <a-input
            v-model:value="color"
            style="width: 150px"
        >
            <template #addonAfter>
                <a-input
                    v-model:value="color"
                    style="width: 40px"
                    type="color"
                />
            </template>
        </a-input>
    </div>
</template>
<script>
import { computed } from 'vue';

export default {
    name: 'JsonSchemaColorPicker',
    props: {
        modelValue: {
            type: String,
            default: null
        }
    },
    setup(props, { emit }) {
        const color = computed({
            get: () => props.modelValue,
            set: (val) => {
                emit('update:modelValue', val);
            },
        });
        return {
            color
        };
    }
};
</script>

from vue-json-schema-form.

lljj-x avatar lljj-x commented on May 10, 2024

其实原本的设计，是希望如果需要符合业务的场景可以去定义自己的 Widget 比如这里的上传

提议1

  • json schema编写支持图片的image类型，并且支持支持input输入。

这里不能直接配置 type 为 img，因为目前是基于JSON Schema 规范，type 类型是不能有 img 的

所以推荐的解决方案，是封装你自己的upload，可以包含你的 默认图片上传地址，包含输入框 等你需要自定义的内容

并且配置也会像下面这样简单，这样也不会打破 JSON Schema 规范

"imgUrl": {
    "title": "单个图片",
    "type": "string",
    "ui:widget": "YourUploadImg" // 自定义你的上传图片
}

// 注册一个全局组件
Vue.component('YourUploadImg', {
 render(h) {
  return h('a-upload', {
   ...
  })
 }
})

提议2

上面已经提到了，可以封装到你的 upload 组件中，比如直接使用现有的 UploadWidget ，那可以直接对组件加一个默认prop

Vue.component('my-upload', {
  functional: true,
  render: function (h, context) {
    return h(
      'UploadWidget',
      {
        ...context.data,
        props: {
          action: 'https://www..w.w.w/upload',
          ...context.data.props
        }
      },
      context.children
    )
  }
})

from vue-json-schema-form.

jobyrao avatar jobyrao commented on May 10, 2024

写了个自定义widget，此时该值如何修改到 formData.imgUrl ?

"imgUrl": {
    "title": "单个图片",
    "type": "string",
    "ui:widget": "JsonSchemaImageWidget"
}
<template>
  <div>
    <a-upload
        name="avatar"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        :beforeUpload="uploadFile"
    >
      <img style="width: 100%" v-if="image" :src="image" alt="avatar" />
      <div v-else>
        <loading-outlined v-if="loading" />
        <plus-outlined v-else />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-input :value="image" @change="changeImage" />

  </div>
</template>
<script>
import {
  PlusOutlined,
  LoadingOutlined,
} from '@ant-design/icons-vue';
import {ref} from 'vue'
import {putCOS} from "@/services/common";

export default {
  name: 'JsonSchemaImageWidget',
  props: {
  },
  components: {
    PlusOutlined,
    LoadingOutlined,
  },
  setup(props) {
    const image = ref('');
    const loading = ref(false);

    const changeImage = (e) => {
      image.value = e.target.value
    }

    const uploadFile = async(e) => {
      loading.value = true;

      const res = await putCOS(e);
      image.value = res.location;

      loading.value = false;
      return Promise.reject();
    }

    return {
      image,
      changeImage,
      uploadFile,
      loading
    }
  }
};
</script>

image

from vue-json-schema-form.

jobyrao avatar jobyrao commented on May 10, 2024

good, 有用。
另外，翻了下颜色选择器实现，用的原生，一旦选择了颜色没法清空。。

再定义了一个颜色选择器

<template>
  <div>
    <a-input style="width: 150px" :value="color" @change="changeColor">
      <template #addonAfter>
        <a-input style="width: 40px" type="color" :value="color" @change="changeColor" />
      </template>
    </a-input>

  </div>
</template>
<script>
import {computed} from 'vue'

export default {
  name: 'JsonSchemaColorPicker',
  props: {
    modelValue: {
      type: String,
      default: null
    }
  },
  setup(props, { emit }) {

    const color = computed({
      get: () => props.modelValue,
      set: (val) => {
        emit('update:modelValue', val);
      },
    });
    const changeColor = (e) => {
      color.value = e.target.value
    }

    return {
      color,
      changeColor,
    }
  }
};
</script>

image

from vue-json-schema-form.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.