twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-09 13:53:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: print and perf style

Browse Source
This commit is contained in:
xiaoxian521
2022-03-02 13:56:07 +08:00
parent e3fda52801
commit 727c0fe3c0
31 changed files with 4475 additions and 1787 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
src/views/components/draggable/index.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import draggable from "vuedraggable/src/vuedraggable";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
let gridLists = ref<Array<Object>>([
{ grid: "cn", num: 1 },
@@ -47,77 +48,92 @@ onMounted(() => {
</script>
<template>
<div class="drag-container">
<!-- grid列表拖拽 -->
<el-row :gutter="25">
<el-col :xs="25" :sm="8" :md="8" :lg="8">
<el-card>
<template #header>
<div class="card-header">
<span>grid列表拖拽</span>
</div>
</template>
<draggable
v-model="gridLists"
class="grid-container"
item-key="grid"
animation="300"
chosenClass="chosen"
forceFallback="true"
>
<template #item="{ element }">
<div :class="'item' + ' ' + 'item-' + element.num">
{{ element.num }}
<el-card>
<template #header>
<div class="card-header">
<span
>拖拽组件，采用开源的<el-link
href="https://sortablejs.github.io/vue.draggable.next/#/simple"
target="_blank"
:icon="useRenderIcon('rank')"
style="font-size: 16px; margin: 0 4px 5px"
>vuedraggable</el-link
></span
>
</div>
</template>
<div class="drag-container">
<!-- grid列表拖拽 -->
<el-row :gutter="25">
<el-col :xs="25" :sm="8" :md="8" :lg="8">
<el-card>
<template #header>
<div class="card-header">
<span>grid列表拖拽</span>
</div>
</template>
</draggable>
</el-card>
</el-col>
<el-col :xs="25" :sm="8" :md="8" :lg="8">
<el-card>
<template #header>
<div class="card-header">
<span>单列拖拽</span>
</div>
</template>
<!-- 单列拖拽 -->
<draggable
v-model="lists"
item-key="name"
@change="change"
chosen-class="chosen"
force-fallback="true"
animation="300"
>
<template #item="{ element, index }">
<div class="item-single">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</el-card>
</el-col>
<el-col :xs="25" :sm="8" :md="8" :lg="8">
<el-card>
<template #header>
<div class="card-header">
<span>拖拽实现元素位置切换</span>
</div>
</template>
<!-- 拖拽实现元素位置切换 -->
<div class="cut-container">
<div
class="item-cut"
v-for="(item, index) in cutLists"
:key="index"
<draggable
v-model="gridLists"
class="grid-container"
item-key="grid"
animation="300"
chosenClass="chosen"
forceFallback="true"
>
<p>{{ item.name }}</p>
<template #item="{ element }">
<div :class="'item' + ' ' + 'item-' + element.num">
{{ element.num }}
</div>
</template>
</draggable>
</el-card>
</el-col>
<el-col :xs="25" :sm="8" :md="8" :lg="8">
<el-card>
<template #header>
<div class="card-header">
<span>单列拖拽</span>
</div>
</template>
<!-- 单列拖拽 -->
<draggable
v-model="lists"
item-key="name"
@change="change"
chosen-class="chosen"
force-fallback="true"
animation="300"
>
<template #item="{ element, index }">
<div class="item-single">{{ element.name }} {{ index }}</div>
</template>
</draggable>
</el-card>
</el-col>
<el-col :xs="25" :sm="8" :md="8" :lg="8">
<el-card>
<template #header>
<div class="card-header">
<span>拖拽实现元素位置切换</span>
</div>
</template>
<!-- 拖拽实现元素位置切换 -->
<div class="cut-container">
<div
class="item-cut"
v-for="(item, index) in cutLists"
:key="index"
>
<p>{{ item.name }}</p>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
</el-card>
</template>
<style lang="scss" scoped>