thefunpower开发包

# sortable

# 加载js

misc("sortable");

# 图片拖拽

<draggable style="display: flex;" v-model="form.imgs"   @start="drag=true" @end="drag=false"> 
  <div style="margin-right:5px;position: relative;" v-for="(v,k) in form.imgs">
    <img :src="v" style="width:90px;height: 90px;">
    <span @click="remove_img(k)" style="position:absolute;right: 3px;top: -11px;color: #eee;" class="hand">X</span>
  </div>
</draggable>

这样就会出现上传组件，上传多个图片后可以拖拽图片排序，无需额外代码.

# 表格排序

misc('sortable'); 
$vue->sort(".sortable1 tbody","_this.form.xcx_banner");

table

<table style="width:100%;" class="sortable1 pure-table pure-table-bordered">
    <thead>
      <tr>
        <th>图片 <span @click="add_banner" class="hand link">添加</span></th>
        <th >地址</th> 
        <th >状态</th> 
        <th style="width:50px;">操作</th> 
      </tr>
    </thead> 
    <tbody>
    
        <tr  v-for="(v,index) in banner" :key="index">
          <td  class="move" > 
            <div class="flex">
              <div>
                <el-image v-if="banner[index].img_url"
              style="width: 100px; height: 100px"
              :src="banner[index].img_url"
              fit="contain"></el-image>
              </div>
              <div style="width: 100%;">
                <el-upload  
                      :action="'/api/admin/upload.php?index='+index+'&new_upload_url=data/uploads'"
                      :on-success="success_banner" 
                      accept="<?= lib\Mime::get('jpg,png,gif,webp')?>"  
                      >
                      <span class="link hand">点击上传</span> 
                </el-upload>

                <el-input  v-model="banner[index].img_url"></el-input> 
              </div>
            </div>  
          </td>
          <td class="move" ><el-input v-model="banner[index].http_url"></el-input></td> 
          <td class="move" >
            <el-switch
            v-model="banner[index].status"
            active-value="1"
            inactive-value="-1"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
         </td> 	
         <td class="move" >
          <span @click="del_banner(index)" class="hand link">删除</span>
         </td>
      </tr> 
  </tbody>
  </table>

← composer →