xayah v2.2.31

xayah

阿里云上传配套组件(iView)

• 安装
• 使用
• 属性
• 事件
• 更新日志

安装

npm install xayah

使用

app.js

import iView from 'iview';
Vue.use(iView); //xayah 依赖iView 此代码必须
import 'iview/dist/styles/iview.css';

import xayah from 'xayah';
vue.use(xayah);

demo.vue

<template>
    <div>
        <xayah
            v-model="images"
            :urls="urls"
            :id="id"
            :max="5"
            :config="config"
            @callback="callback"
        >
        </xayah>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                images: [
                    {
                        url: ''
                    }
                ],
                urls:{
                    index: '',    //获取文件地址
                    upload: '',   //上传地址
                    create: '',   //创建目录地址
                    check: '',    //检查文件唯一
                    policy: '',   //获取上传策略地址
                    delete: '',   //删除文件或目录地址
                    return: '',   //本地回调地址
                },
                id:'editorImage',
                max:5,
                config:{
                    random:false,
                    size:0,
                    format:[
                        'jpg','png','jpeg'
                    ],
                    style:'?x-oss-process=style/thumb',
                    key:'id',
                    gateway:'oss'
                }
            }
        },
        methods: {
            callback(val){
                console.log(val);
            }
        }
    }
</script>

属性

事件

使用说明

配置ID说明

用途:富文本编辑器插入图片 示例:以quill富文本编辑器为例

    demo.vue

    <template>
           <div>
               <xayah
                   style="display:none;"
                   v-model="[]"
                   :config="config"
                   :urls="urls"
                   :id="id"
                   :max="5"
                   @callback="callback"
               >
               </xayah>

               <quill-editor
                   v-model="content"
                   ref="myQuillEditor">
                </quill-editor>
           </div>
       </template>
       <script>
           export default {
               data() {
                   return {
                       content:null,
                       images: [
                           {
                               url: ''
                           }
                       ],
                       urls:{
                            index: '',    //获取文件地址
                            upload: '',   //上传地址
                            create: '',   //创建目录地址
                            check: '',    //检查文件唯一
                            policy: '',   //获取上传策略地址
                            delete: '',   //删除文件或目录地址
                            return: '',   //本地回调地址
                       },
                       id:'editorImage',
                       max:5,
                       config:{
                            random:false,
                            size:0,
                            format:[
                                'jpg','png','jpeg'
                            ],
                            key:'id',
                            style:'',
                            gateway:'oss'
                       }
                   }
               },
               mounted(){
                    this.initEditor();
               },
               methods: {
                   callback(val){
                       console.log(val);
                       let that=this;
                        $.each(res, function (index, value, array) {
                           that.$refs.myQuillEditor.quill.insertEmbed(10, 'image', value.url);
                        });
                   },
                   imageHandler() {
                       document.getElementById('editorImage').click();
                   },
                   initEditor(){
                        this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imageHandler);
                   }
               }
           }
       </script>

配套后台

https://github.com/TELstatic/rakan https://kodos.cn

TODO

1. 优化样式,去除内联样式

Buy me a coffee

Liked some of my work? Buy me a coffee (or more likely a beer)

代码贡献

如果您有其它需求，或者发现本项目中需要改进的代码，欢迎 Fork 并提交 PR！