首页 > 上网技巧 > 使用element+vuedraggable实现图片上传拖拽排序

使用element+vuedraggable实现图片上传拖拽排序

时间:2020-11-14 20:13 作者:QQ地带 我要评论

 <code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token comment">// 上传组件</span>

<span class="token operator"><</span>template<span class="token operator">></span>
    <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"allUpload"</span><span class="token operator">></span>
        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"clearfix"</span><span class="token operator">></span>
            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"wrap"</span><span class="token operator">></span>
                <span class="token operator"><</span>draggable
                    v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"value"</span>  
                    forceFallback<span class="token operator">=</span><span class="token string">"true"</span> 
                    animation<span class="token operator">=</span><span class="token string">"400"</span> 
                    <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"clearfix"</span>
                <span class="token operator">></span>
                    <span class="token operator"><</span>transition<span class="token operator">-</span>group<span class="token operator">></span>
                        <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"left middleCenter"</span> v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(item,index) in value"</span> <span class="token punctuation">:</span>key<span class="token operator">=</span><span class="token string">"item.id"</span><span class="token operator">></span>
                            <span class="token operator"><</span>img <span class="token punctuation">:</span>src<span class="token operator">=</span><span class="token string">"item.url"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">></span>
                            
                            <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"content-wrap"</span><span class="token operator">></span>
                                <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"content middleCenter"</span><span class="token operator">></span>
                                    <span class="token operator"><</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"el-icon-zoom-in"</span> @click<span class="token operator">=</span><span class="token string">"showImg(item.url)"</span> <span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span>
                                    <span class="token operator"><</span>i <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"el-icon-delete"</span> @click<span class="token operator">=</span><span class="token string">"delImg(item,index)"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span>
                                <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
                            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
                        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
                    <span class="token operator"><</span><span class="token operator">/</span>transition<span class="token operator">-</span>group<span class="token operator">></span>
                    <span class="token operator"><</span>div slot<span class="token operator">=</span><span class="token string">"footer"</span> style<span class="token operator">=</span><span class="token string">"float:left"</span><span class="token operator">></span>
                        <span class="token operator"><</span>el<span class="token operator">-</span>upload
                            <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"wrap"</span>
                            list<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">"picture-card"</span>
                            <span class="token punctuation">:</span>action<span class="token operator">=</span><span class="token string">"imgUploadUrl"</span>
                            <span class="token punctuation">:</span>show<span class="token operator">-</span>file<span class="token operator">-</span>list<span class="token operator">=</span><span class="token string">"false"</span>
                            <span class="token punctuation">:</span>limit<span class="token operator">=</span><span class="token string">"max"</span>
                            <span class="token punctuation">:</span>on<span class="token operator">-</span>progress<span class="token operator">=</span><span class="token string">"handlePictureCardPreview"</span>
                            <span class="token punctuation">:</span>on<span class="token operator">-</span>exceed<span class="token operator">=</span><span class="token string">"onExceed"</span>
                            <span class="token punctuation">:</span>disabled<span class="token operator">=</span><span class="token string">"disabled"</span>
                            <span class="token punctuation">:</span>on<span class="token operator">-</span>change<span class="token operator">=</span><span class="token string">"onChange"</span>
                            <span class="token punctuation">:</span>file<span class="token operator">-</span>list<span class="token operator">=</span><span class="token string">"fileList"</span>
                            <span class="token punctuation">:</span>multiple<span class="token operator">=</span><span class="token string">"true"</span>
                            <span class="token punctuation">:</span>on<span class="token operator">-</span>success<span class="token operator">=</span><span class="token string">"handleSuccess"</span>
                            v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"isUploadBtn"</span>
                        <span class="token operator">></span>
                            <span class="token operator"><</span>i slot<span class="token operator">=</span><span class="token string">"default"</span> <span class="token punctuation">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"uploadLoading ? 'el-icon-loading' : 'el-icon-plus'"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span>
                        <span class="token operator"><</span><span class="token operator">/</span>el<span class="token operator">-</span>upload<span class="token operator">></span>
                    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
                <span class="token operator"><</span><span class="token operator">/</span>draggable<span class="token operator">></span>
            <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
            
        <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
        
        <span class="token operator"><</span>el<span class="token operator">-</span>dialog title<span class="token operator">=</span><span class="token string">"查看图片"</span> <span class="token punctuation">:</span>visible<span class="token punctuation">.</span>sync<span class="token operator">=</span><span class="token string">"dialogVisible"</span><span class="token operator">></span>
            <span class="token operator"><</span>img width<span class="token operator">=</span><span class="token string">"100%"</span> <span class="token punctuation">:</span>src<span class="token operator">=</span><span class="token string">"dialogImageUrl"</span> alt<span class="token operator">=</span><span class="token string">""</span><span class="token operator">></span>
        <span class="token operator"><</span><span class="token operator">/</span>el<span class="token operator">-</span>dialog<span class="token operator">></span>
    <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
 
<span class="token operator"><</span>script<span class="token operator">></span>
<span class="token keyword">import</span> draggable <span class="token keyword">from</span> <span class="token string">'vuedraggable'</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>imgUpload<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/api/upload'</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>MathRandom<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{<!-- --></span>
    name<span class="token punctuation">:</span><span class="token string">'Upload'</span><span class="token punctuation">,</span>
    <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
            dialogImageUrl<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
            uploadLoading<span class="token punctuation">:</span><span class="token boolean">false</span><span class="token punctuation">,</span>
            dialogVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            disabled<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            fileList<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            imgUploadUrl<span class="token punctuation">:</span><span class="token function">imgUpload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    props<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
        value<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
            type<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
                <span class="token keyword">return</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        max<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
            type<span class="token punctuation">:</span><span class="token punctuation">[</span>Number<span class="token punctuation">,</span>String<span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token keyword">default</span><span class="token punctuation">:</span><span class="token number">9</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        disabled<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
            type<span class="token punctuation">:</span>Boolean<span class="token punctuation">,</span>
            <span class="token keyword">default</span><span class="token punctuation">:</span><span class="token boolean">false</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    model<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
        event<span class="token punctuation">:</span> <span class="token string">'giveActive'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    computed<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
        <span class="token function">isUploadBtn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span>length<span class="token operator"><</span><span class="token keyword">this</span><span class="token punctuation">.</span>max
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
<span class="token comment">// 监听一次value,只执行一次,用于回显图片,</span>
        <span class="token keyword">const</span> unwatch <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$watch</span><span class="token punctuation">(</span><span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>newValue<span class="token punctuation">,</span> oldValue<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>fileList <span class="token operator">=</span> newValue
            <span class="token function">unwatch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
        <span class="token function">go</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'giveActive'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">showImg</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogImageUrl <span class="token operator">=</span> url
            <span class="token keyword">this</span><span class="token punctuation">.</span>dialogVisible <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">delImg</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span>index<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$confirm</span><span class="token punctuation">(</span><span class="token string">'此操作将永久删除该图片, 是否继续?'</span><span class="token punctuation">,</span> <span class="token string">'提示'</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
                confirmButtonText<span class="token punctuation">:</span> <span class="token string">'确定'</span><span class="token punctuation">,</span>
                cancelButtonText<span class="token punctuation">:</span> <span class="token string">'取消'</span><span class="token punctuation">,</span>
                type<span class="token punctuation">:</span> <span class="token string">'warning'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>fileList<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span>
                        
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">onChange</span><span class="token punctuation">(</span>file<span class="token punctuation">,</span>fileList<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>fileList <span class="token operator">=</span> fileList
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        
        <span class="token function">handlePictureCardPreview</span><span class="token punctuation">(</span>file<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>uploadLoading <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">onExceed</span><span class="token punctuation">(</span>files<span class="token punctuation">,</span> fileList<span class="token punctuation">,</span>props<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$message</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
                message<span class="token punctuation">:</span><span class="token template-string"><span class="token string">`超出最大上传数量,最多可上传</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>max<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">张图片`</span></span><span class="token punctuation">,</span>
                type<span class="token punctuation">:</span><span class="token string">'error'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">handleSuccess</span><span class="token punctuation">(</span>response<span class="token punctuation">,</span> file<span class="token punctuation">,</span>fileList<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">,</span><span class="token string">'结果'</span><span class="token punctuation">)</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">,</span>fileList<span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>uploadLoading <span class="token operator">=</span><span class="token boolean">false</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">urlList</span><span class="token punctuation">(</span>response<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">urlList</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
            <span class="token keyword">const</span> obj<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>
                id<span class="token punctuation">:</span><span class="token function">MathRandom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                url<span class="token punctuation">:</span>res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
                status<span class="token punctuation">:</span><span class="token string">'success'</span><span class="token punctuation">,</span>
                uid<span class="token punctuation">:</span><span class="token function">MathRandom</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>    
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
 
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
 
<span class="token operator"><</span>style lang<span class="token operator">=</span><span class="token string">'scss'</span> scoped<span class="token operator">></span>
    <span class="token punctuation">.</span>allUpload<span class="token punctuation">{<!-- --></span>
        <span class="token punctuation">.</span>left<span class="token punctuation">{<!-- --></span>
            float<span class="token punctuation">:</span> left<span class="token punctuation">;</span>
            width<span class="token punctuation">:</span> <span class="token number">148</span>px<span class="token punctuation">;</span>
            height<span class="token punctuation">:</span> <span class="token number">148</span>px<span class="token punctuation">;</span>
            border<span class="token operator">-</span>radius<span class="token punctuation">:</span> <span class="token number">6</span>px<span class="token punctuation">;</span>
            border<span class="token punctuation">:</span> <span class="token number">1</span>px solid #c0ccda<span class="token punctuation">;</span>
            margin<span class="token punctuation">:</span><span class="token number">0</span> <span class="token number">20</span>px <span class="token number">20</span>px <span class="token number">0</span><span class="token punctuation">;</span>
            overflow<span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
            position<span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
            cursor<span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
            <span class="token operator">&</span><span class="token punctuation">:</span>hover<span class="token punctuation">{<!-- --></span>
                <span class="token punctuation">.</span>content<span class="token operator">-</span>wrap<span class="token punctuation">{<!-- --></span>
                    display<span class="token punctuation">:</span> block<span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
            img<span class="token punctuation">{<!-- --></span>
                max<span class="token operator">-</span>width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                max<span class="token operator">-</span>height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                object<span class="token operator">-</span>fit<span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token punctuation">.</span>content<span class="token operator">-</span>wrap<span class="token punctuation">{<!-- --></span>
                display<span class="token punctuation">:</span> none<span class="token punctuation">;</span>
                position<span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
                width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                background<span class="token punctuation">:</span><span class="token function">rgba</span><span class="token punctuation">(</span>$color<span class="token punctuation">:</span> #<span class="token number">000000</span><span class="token punctuation">,</span> $alpha<span class="token punctuation">:</span> <span class="token number">0.4</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">.</span>content<span class="token punctuation">{<!-- --></span>
                    width<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                    height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span>
                    i<span class="token punctuation">{<!-- --></span>
                        color<span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
                        font<span class="token operator">-</span>size<span class="token punctuation">:</span> <span class="token number">18</span>px<span class="token punctuation">;</span>
                        <span class="token operator">&</span><span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token keyword">of</span><span class="token operator">-</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                            margin<span class="token operator">-</span>right<span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
                            
                        <span class="token punctuation">}</span>
                        <span class="token operator">&</span><span class="token punctuation">:</span>nth<span class="token operator">-</span><span class="token keyword">of</span><span class="token operator">-</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
                            margin<span class="token operator">-</span>left<span class="token punctuation">:</span> <span class="token number">10</span>px<span class="token punctuation">;</span>
                            
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
            
        <span class="token punctuation">}</span>
        <span class="token punctuation">.</span>wrap<span class="token punctuation">{<!-- --></span>
            float<span class="token punctuation">:</span> left<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.4259&quot;}"></div></code>
 
 
 
使用组件:
 
<code class="prism language-javascript has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token operator"><</span>template<span class="token operator">></span>
<span class="token operator"><</span>div<span class="token operator">></span>
  <span class="token operator"><</span>Upload 
      <span class="token punctuation">:</span>max<span class="token operator">=</span><span class="token string">"4"</span>
      v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"active"</span>
    <span class="token operator">></span>
  <span class="token operator"><</span><span class="token operator">/</span>Upload<span class="token operator">></span>
  <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
 
<span class="token operator"><</span>script<span class="token operator">></span>
 
<span class="token comment">// </span>
<span class="token keyword">import</span> draggable <span class="token keyword">from</span> <span class="token string">'vuedraggable'</span>
<span class="token keyword">import</span> Upload <span class="token keyword">from</span> <span class="token string">'@/components/Upload'</span>
<span class="token keyword">import</span> <span class="token punctuation">{<!-- --></span>MathRandom<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{<!-- --></span>
  name<span class="token punctuation">:</span> <span class="token string">'treeDrag'</span><span class="token punctuation">,</span>
  components<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span> draggable <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
      active<span class="token punctuation">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
      
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  components<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span>
    Upload
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  
  <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{<!-- --></span>
      <span class="token keyword">const</span> obj <span class="token operator">=</span><span class="token punctuation">{<!-- --></span>
          url<span class="token punctuation">:</span><span class="token string">'https://tcity-mall.oss-cn-shenzhen.aliyuncs.com/2020/09/29/b46661a32d914158a4ae68a026cb6e83.jpg'</span><span class="token punctuation">,</span>
          id<span class="token punctuation">:</span><span class="token function">MathRandom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          status<span class="token punctuation">:</span><span class="token string">'success'</span><span class="token punctuation">,</span>
          uid<span class="token punctuation">:</span><span class="token function">MathRandom</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>active<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>obj<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">2000</span><span class="token punctuation">)</span>
    
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
<div class="hljs-button signin" data-title="登录后复制" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.4259&quot;}"></div></code>

标签: element
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告