mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-09 13:53:38 +08:00
feat: print and perf style
This commit is contained in:
xiaoxian521
@@ -7,13 +7,19 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<iframe :src="url" frameborder="0" class="iframe"></iframe>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">通过iframe引入按钮页面</span>
|
||||
</div>
|
||||
</template>
|
||||
<iframe :src="url" frameborder="0" class="iframe"></iframe>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.iframe {
|
||||
width: 98%;
|
||||
height: 90vh;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,12 @@ import menuDynamic from "./menuDynamic.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">右键菜单组件</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基本使用 -->
|
||||
@@ -20,5 +25,5 @@ import menuDynamic from "./menuDynamic.vue";
|
||||
<menuDynamic />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@@ -3,35 +3,32 @@ import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="always">
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2.3em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="always">
|
||||
<ul class="flex">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">数字动画组件</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="flex items-center">
|
||||
<ReNormalCountTo
|
||||
prefix="$"
|
||||
:duration="1000"
|
||||
:color="'#409EFF'"
|
||||
:fontSize="'2em'"
|
||||
:startVal="1"
|
||||
:endVal="1000"
|
||||
/>
|
||||
<ul class="flex ml-8">
|
||||
<ReboundCountTo
|
||||
v-for="(num, inx) of [1, 6, 6, 6]"
|
||||
:key="inx"
|
||||
:i="num"
|
||||
:blur="inx"
|
||||
:delay="inx + 1"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -3,9 +3,9 @@ import { ref, nextTick, getCurrentInstance } from "vue";
|
||||
import Cropper from "/@/components/ReCropper";
|
||||
import img from "./picture.jpeg";
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
let info = ref<object>(null);
|
||||
let cropperImg = ref<string>("");
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const onCropper = (): void => {
|
||||
nextTick(() => {
|
||||
@@ -25,14 +25,19 @@ const onCropper = (): void => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">图片裁剪组件</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="cropper-container">
|
||||
<Cropper ref="refCropper" :width="'40vw'" :src="img" />
|
||||
<img :src="cropperImg" class="croppered" v-if="cropperImg" />
|
||||
</div>
|
||||
<el-button type="primary" @click="onCropper">裁剪</el-button>
|
||||
<p v-if="cropperImg">裁剪后图片信息：{{ info }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -16,27 +16,34 @@ const settingTB: ContextProps = reactive({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="split-pane">
|
||||
<splitpane :splitSet="settingLR">
|
||||
<!-- #paneL 表示指定该组件为左侧面板 -->
|
||||
<template #paneL>
|
||||
<!-- 自定义左侧面板的内容 -->
|
||||
<div class="dv-a">A</div>
|
||||
</template>
|
||||
<!-- #paneR 表示指定该组件为右侧面板 -->
|
||||
<template #paneR>
|
||||
<!-- 再次将右侧面板进行拆分 -->
|
||||
<splitpane :splitSet="settingTB">
|
||||
<template #paneL>
|
||||
<div class="dv-b">B</div>
|
||||
</template>
|
||||
<template #paneR>
|
||||
<div class="dv-c">C</div>
|
||||
</template>
|
||||
</splitpane>
|
||||
</template>
|
||||
</splitpane>
|
||||
</div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">切割面板组件</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="split-pane">
|
||||
<splitpane :splitSet="settingLR">
|
||||
<!-- #paneL 表示指定该组件为左侧面板 -->
|
||||
<template #paneL>
|
||||
<!-- 自定义左侧面板的内容 -->
|
||||
<div class="dv-a">A</div>
|
||||
</template>
|
||||
<!-- #paneR 表示指定该组件为右侧面板 -->
|
||||
<template #paneR>
|
||||
<!-- 再次将右侧面板进行拆分 -->
|
||||
<splitpane :splitSet="settingTB">
|
||||
<template #paneL>
|
||||
<div class="dv-b">B</div>
|
||||
</template>
|
||||
<template #paneR>
|
||||
<div class="dv-c">C</div>
|
||||
</template>
|
||||
</splitpane>
|
||||
</template>
|
||||
</splitpane>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -2,13 +2,16 @@
|
||||
import { onMounted } from "vue";
|
||||
import Player from "xgplayer/dist/simple_player";
|
||||
import volume from "xgplayer/es/controls/volume";
|
||||
import playbackRate from "xgplayer/es/controls/playbackRate";
|
||||
import screenShot from "xgplayer/es/controls/screenShot";
|
||||
import { deviceDetection } from "/@/utils/deviceDetection";
|
||||
import playbackRate from "xgplayer/es/controls/playbackRate";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
onMounted(() => {
|
||||
new Player({
|
||||
id: "mse",
|
||||
// 默认静音
|
||||
volume: 0,
|
||||
autoplay: false,
|
||||
screenShot: true,
|
||||
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
|
||||
@@ -23,7 +26,22 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="mse"></div>
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium"
|
||||
>视频组件，采用开源的<el-link
|
||||
href="https://v2.h5player.bytedance.com"
|
||||
target="_blank"
|
||||
:icon="useRenderIcon('video-play')"
|
||||
style="font-size: 16px; margin: 0 4px 5px"
|
||||
>西瓜播放器</el-link
|
||||
></span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<div id="mse"></div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user