2021-04-30 09:43发布
sortable,vue-slicksort,vuedraggable都用过了,在web端可以正常运行 但是在移动端就没有效果了,求大神解答一下
安装npm或yarn安装都可$ npm install vue-slicksort --save或$ yarn add vue-slicksort使用引入import { SlickList, SlickItem } from 'vue-slicksort'export default { components: { SlickList, SlickItem, }, data () { return { commonsApplication: [] } }}使用(部分代码片段) :pressDelay="300" v-model="commonsApplication" helperClass="helperClass" class="ul" axis="xy"> v-for="(item,index) in commonsApplication" :index="index" :key="index+'key'" class="li"> {{ item.menuName }} v-if="isEditMenus"/> src="@/assets/newIcon/deleteMenus.svg" alt="删除应用" class="delete-app" @click.stop="deleteApp(item,index)">
{{ item.menuName }}
最多设置5个标签!
安装
:pressDelay="300"
v-for="(item,index) in commonsApplication"
npm或yarn安装都可
$ npm install vue-slicksort --save
或
$ yarn add vue-slicksort
使用
引入
import { SlickList, SlickItem } from 'vue-slicksort'
export default {
components: {
SlickList,
SlickItem,
},
data () {
return {
commonsApplication: []
}
}
}
使用(部分代码片段)
v-model="commonsApplication"
helperClass="helperClass"
class="ul"
axis="xy">
:index="index"
:key="index+'key'"
class="li">
{{ item.menuName }}
v-if="isEditMenus"/> src="@/assets/newIcon/deleteMenus.svg"
alt="删除应用"
class="delete-app"
@click.stop="deleteApp(item,index)">
自定义样式(部分代码片段)
.ul{
display: flex;
flex-wrap: wrap;
text-align: center;
padding-bottom:18px;
.li{
width: 25%;
margin: 5px 0px;
padding:0 4px;
.add-border{
border: 1px solid #E2E3E7 !important;
}
.app-border{
z-index:99999!important;
box-sizing: border-box;
border-radius: 8px;
position:relative;
padding:5px;
.app-icon{
width: 48px;
height: 48px;
}
}
}
}
参数说明
要想得到你想要的样式,要注意在SlickList和SlickItem上添加你定义的class,可以直接将二者当成两个div。
一周热门 更多>