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

refactor: use setup refactor

Browse Source
This commit is contained in:
xiaoxian521
2021-09-17 10:29:59 +08:00
parent d4302627e8
commit ff329b1e8e
17 changed files with 2844 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/components/button/index.vue
View File

@@ -1,24 +1,17 @@
<script setup lang="ts">
import { ref } from "vue";
const url = ref(
process.env.NODE_ENV === "production"
? "/manages/html/button.html"
: "/html/button.html"
);
</script>
<template>
<iframe :src="url" frameborder="0" class="iframe"></iframe>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
name: "reButton",
setup() {
const url = ref(
process.env.NODE_ENV === "production"
? "/manages/html/button.html"
: "/html/button.html"
);
return {
url
};
}
};
</script>
<style scoped>
.iframe {
width: 98%;

23
src/views/components/contextmenu/index.vue
View File

@@ -1,3 +1,9 @@
<script setup lang="ts">
import basic from "./basic.vue";
import menuGroup from "./menuGroup.vue";
import menuDynamic from "./menuDynamic.vue";
</script>
<template>
<div style="margin: 10px">
<el-row :gutter="24">
@@ -16,20 +22,3 @@
</el-row>
</div>
</template>
<script lang="ts">
import basic from "./basic.vue";
import menuGroup from "./menuGroup.vue";
import menuDynamic from "./menuDynamic.vue";
export default {
name: "reContextmenu",
components: {
basic,
menuGroup,
menuDynamic
},
setup() {
return {};
}
};
</script>

19
src/views/components/count-to/index.vue
View File

@@ -1,3 +1,7 @@
<script setup lang="ts">
import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
</script>
<template>
<div style="margin: 10px">
<el-row :gutter="24">
@@ -30,21 +34,6 @@
</div>
</template>
<script lang="ts">
import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
export default {
name: "reCountTo",
components: {
ReNormalCountTo,
ReboundCountTo
},
setup() {
return {};
}
};
</script>
<style lang="scss" scoped>
.flex {
display: flex;

62
src/views/components/cropping/index.vue
View File

@@ -1,3 +1,27 @@
<script setup lang="ts">
import { ref, nextTick, getCurrentInstance } from "vue";
import Cropper from "/@/components/ReCropper";
import img from "./picture.jpeg";
const instance = getCurrentInstance();
let info = ref<object>("");
let cropperImg = ref<string>("");
const onCropper = (): void => {
nextTick(() => {
instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
let fileReader: FileReader = new FileReader();
fileReader.onloadend = (e: ProgressEvent) => {
// @ts-ignore
cropperImg.value = e.target.result;
info.value = instance.refs.refCropper.cropper.getData();
};
fileReader.readAsDataURL(blob);
}, "image/jpeg");
});
};
</script>
<template>
<div style="margin: 10px">
<div class="cropper-container">
@@ -9,44 +33,6 @@
</div>
</template>
<script lang="ts">
import { ref, nextTick, getCurrentInstance } from "vue";
import Cropper from "/@/components/ReCropper";
import img from "./picture.jpeg";
export default {
name: "reCropping",
components: {
Cropper
},
setup() {
const instance = getCurrentInstance();
let info = ref("");
let cropperImg = ref("");
const onCropper = (): void => {
nextTick(() => {
instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
let fileReader: FileReader = new FileReader();
fileReader.onloadend = (e: any) => {
cropperImg.value = e.target.result;
info.value = instance.refs.refCropper.cropper.getData();
};
fileReader.readAsDataURL(blob);
}, "image/jpeg");
});
};
return {
img,
info,
cropperImg,
onCropper
};
}
};
</script>
<style scoped>
.cropper-container {
display: flex;

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

@@ -1,3 +1,51 @@
<script setup lang="ts">
import { ref, onMounted } from "vue";
import draggable from "vuedraggable/src/vuedraggable";
let gridLists = ref<Array<Object>>([
{ grid: "cn", num: 1 },
{ grid: "cn", num: 2 },
{ grid: "cn", num: 3 },
{ grid: "cn", num: 4 },
{ grid: "cn", num: 5 },
{ grid: "cn", num: 6 },
{ grid: "cn", num: 7 },
{ grid: "cn", num: 8 },
{ grid: "cn", num: 9 }
]);
let lists = ref<Array<Object>>([
{ people: "cn", id: 1, name: "www.itxst.com" },
{ people: "cn", id: 2, name: "www.baidu.com" },
{ people: "cn", id: 3, name: "www.taobao.com" },
{ people: "cn", id: 4, name: "www.google.com" }
]);
let cutLists = ref<Array<Object>>([
{ people: "cn", id: 1, name: "cut1" },
{ people: "cn", id: 2, name: "cut2" },
{ people: "cn", id: 3, name: "cut3" },
{ people: "cn", id: 4, name: "cut4" }
]);
const change = (evt): void => {
console.log("evt: ", evt);
};
onMounted(() => {
// 使用原生sortable实现元素位置切换
// @ts-ignore
// eslint-disable-next-line no-undef
new Sortable(document.querySelector(".cut-container"), {
swap: true,
forceFallback: true,
chosenClass: "chosen",
swapClass: "highlight",
animation: 300
});
});
</script>
<template>
<div class="drag-container">
<!-- grid列表拖拽 -->
@@ -72,64 +120,6 @@
</div>
</template>
<script lang="ts">
import draggable from "vuedraggable/src/vuedraggable";
import { reactive, toRefs, onMounted } from "vue";
export default {
name: "reDraggable",
components: { draggable },
setup() {
const myArray = reactive({
gridLists: [
{ grid: "cn", num: 1 },
{ grid: "cn", num: 2 },
{ grid: "cn", num: 3 },
{ grid: "cn", num: 4 },
{ grid: "cn", num: 5 },
{ grid: "cn", num: 6 },
{ grid: "cn", num: 7 },
{ grid: "cn", num: 8 },
{ grid: "cn", num: 9 }
],
lists: [
{ people: "cn", id: 1, name: "www.itxst.com" },
{ people: "cn", id: 2, name: "www.baidu.com" },
{ people: "cn", id: 3, name: "www.taobao.com" },
{ people: "cn", id: 4, name: "www.google.com" }
],
cutLists: [
{ people: "cn", id: 1, name: "cut1" },
{ people: "cn", id: 2, name: "cut2" },
{ people: "cn", id: 3, name: "cut3" },
{ people: "cn", id: 4, name: "cut4" }
]
});
const change = (evt): void => {
console.log("evt: ", evt);
};
onMounted(() => {
// 使用原生sortable实现元素位置切换
// @ts-ignore
// eslint-disable-next-line no-undef
new Sortable(document.querySelector(".cut-container"), {
swap: true,
forceFallback: true,
chosenClass: "chosen",
swapClass: "highlight",
animation: 300
});
});
return {
...toRefs(myArray),
change
};
}
};
</script>
<style lang="scss" scoped>
/* grid列表拖拽 */
.grid-container {

17
src/views/components/map/index.vue
View File

@@ -1,22 +1,13 @@
<script setup lang="ts">
import { Amap } from "/@/components/ReMap";
</script>
<template>
<div class="map">
<Amap />
</div>
</template>
<script lang="ts">
import { Amap } from "/@/components/ReMap";
export default {
name: "reMap",
components: {
Amap
},
setup() {
return {};
}
};
</script>
<style scoped>
.map {
width: 100%;

110
src/views/components/seamless-scroll/index.vue
View File

@@ -1,3 +1,51 @@
<script setup lang="ts">
import { ref, unref } from "vue";
import { templateRef } from "@vueuse/core";
import SeamlessScroll from "/@/components/ReSeamlessScroll";
// eslint-disable-next-line no-undef
const scroll = templateRef<ElRef | null>("scroll", null);
let listData = ref<Array<Object>>([
{
title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
},
{
title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
},
{
title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
},
{
title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
},
{
title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
},
{
title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
},
{
title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
},
{
title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
},
{
title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
}
]);
let classOption = ref<Object>({
direction: "top"
});
function changeDirection(val) {
unref(scroll).reset();
unref(classOption).direction = val;
}
</script>
<template>
<el-space wrap>
<el-card class="box-card">
@@ -60,68 +108,6 @@
</el-space>
</template>
<script lang="ts">
import { ref, unref } from "vue";
import { templateRef } from "@vueuse/core";
import SeamlessScroll from "/@/components/ReSeamlessScroll";
export default {
name: "reSeamlessScroll",
components: {
SeamlessScroll
},
setup() {
// eslint-disable-next-line no-undef
const scroll = templateRef<ElRef | null>("scroll", null);
let listData = ref([
{
title: "无缝滚动第一行无缝滚动第一行！！！！！！！！！！"
},
{
title: "无缝滚动第二行无缝滚动第二行！！！！！！！！！！"
},
{
title: "无缝滚动第三行无缝滚动第三行！！！！！！！！！！"
},
{
title: "无缝滚动第四行无缝滚动第四行！！！！！！！！！！"
},
{
title: "无缝滚动第五行无缝滚动第五行！！！！！！！！！！"
},
{
title: "无缝滚动第六行无缝滚动第六行！！！！！！！！！！"
},
{
title: "无缝滚动第七行无缝滚动第七行！！！！！！！！！！"
},
{
title: "无缝滚动第八行无缝滚动第八行！！！！！！！！！！"
},
{
title: "无缝滚动第九行无缝滚动第九行！！！！！！！！！！"
}
]);
let classOption = ref({
direction: "top"
});
function changeDirection(val) {
unref(scroll).reset();
unref(classOption).direction = val;
}
return {
listData,
classOption,
changeDirection
};
}
};
</script>
<style lang="scss" scoped>
.box-card {
margin: 10px;

58
src/views/components/selector/index.vue
View File

@@ -1,3 +1,26 @@
<script setup lang="ts">
import { ref } from "vue";
import Selector from "/@/components/ReSelector";
let selectRange = ref<string>("");
let dataLists = ref<Array<Object>>([
{
title: "基本使用",
echo: [],
disabled: false
},
{
title: "回显模式",
echo: [2, 7],
disabled: true
}
]);
const selectedVal = ({ left, right }): void => {
selectRange.value = `${left}-${right}`;
};
</script>
<template>
<div>
<el-card
@@ -21,38 +44,3 @@
</el-card>
</div>
</template>
<script lang="ts">
import { ref } from "vue";
import Selector from "/@/components/ReSelector";
export default {
name: "reSelector",
components: { Selector },
setup() {
let selectRange = ref(null);
let dataLists = ref([
{
title: "基本使用",
echo: [],
disabled: false
},
{
title: "回显模式",
echo: [2, 7],
disabled: true
}
]);
const selectedVal = ({ left, right }) => {
selectRange.value = `${left}-${right}`;
};
return {
selectedVal,
selectRange,
dataLists
};
}
};
</script>

46
src/views/components/split-pane/index.vue
View File

@@ -1,3 +1,20 @@
<script setup lang="ts">
import splitpane, { ContextProps } from "/@/components/ReSplitPane";
import { reactive } from "vue";
const settingLR: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "vertical"
});
const settingTB: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "horizontal"
});
</script>
<template>
<div class="split-pane">
<splitpane :splitSet="settingLR">
@@ -22,35 +39,6 @@
</div>
</template>
<script lang="ts">
import splitpane, { ContextProps } from "/@/components/ReSplitPane";
import { reactive } from "vue";
export default {
name: "reSplitPane",
components: {
splitpane
},
setup() {
const settingLR: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "vertical"
});
const settingTB: ContextProps = reactive({
minPercent: 20,
defaultPercent: 40,
split: "horizontal"
});
return {
settingLR,
settingTB
};
}
};
</script>
<style lang="scss" scoped>
$W: 100%;
$H: 80vh;

45
src/views/components/video/index.vue
View File

@@ -1,8 +1,4 @@
<template>
<div id="mse"></div>
</template>
<script lang="ts">
<script setup lang="ts">
import { onMounted } from "vue";
import Player from "xgplayer/dist/simple_player";
import volume from "xgplayer/dist/controls/volume";
@@ -10,28 +6,27 @@ import playbackRate from "xgplayer/dist/controls/playbackRate";
import screenShot from "xgplayer/dist/controls/screenShot";
import { deviceDetection } from "/@/utils/deviceDetection";
export default {
name: "reVideo",
setup() {
onMounted(() => {
new Player({
id: "mse",
autoplay: false,
screenShot: true,
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
poster:
"https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
fluid: deviceDetection(),
controlPlugins: [volume, playbackRate, screenShot],
playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
});
});
return {};
}
};
onMounted(() => {
new Player({
id: "mse",
autoplay: false,
screenShot: true,
url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4",
poster:
"https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
fluid: deviceDetection(),
controlPlugins: [volume, playbackRate, screenShot],
//传入倍速可选数组
playbackRate: [0.5, 0.75, 1, 1.5, 2]
});
});
</script>
<style lang="scss" scoped>
<template>
<div id="mse"></div>
</template>
<style scoped>
#mse {
flex: auto;
}

2
src/views/permission/button/index.vue
View File

@@ -2,7 +2,7 @@
import { ref } from "vue";
import { storageSession } from "/@/utils/storage";
const auth = ref(storageSession.getItem("info").username || "admin");
const auth = ref<Boolean>(storageSession.getItem("info").username || "admin");
function changRole(value) {
storageSession.setItem("info", {

2
src/views/permission/page/index.vue
View File

@@ -2,7 +2,7 @@
import { ref, unref } from "vue";
import { storageSession } from "/@/utils/storage";
let purview: string = ref(storageSession.getItem("info").username);
let purview = ref<string>(storageSession.getItem("info").username);
function changRole() {
if (unref(purview) === "admin") {