commit
7a5a3606a4
@ -13,19 +13,47 @@
|
|||||||
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
|
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-upload @done="getUploadFile"/>
|
<lay-upload @done="getUploadFile" @choose="beginChoose">
|
||||||
|
<template #preview>
|
||||||
|
<div v-for="(item,index) in picList" :key="`demo1-pic-'${index}`">
|
||||||
|
<img :src="item"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</lay-upload>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref } from 'vue'
|
import { ref,reactive } from 'vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const getUploadFile = (file)=>{
|
const picList = ref([]);
|
||||||
console.log(file);
|
const filetoDataURL=(file,fn)=>{
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = function(e){
|
||||||
|
fn(e.target.result);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
};
|
||||||
|
const getUploadFile=(files)=>{
|
||||||
|
if(Array.isArray(files)&&files.length>0){
|
||||||
|
files.forEach((file,index,array)=>{
|
||||||
|
filetoDataURL(file,(res)=>{
|
||||||
|
console.log(res);
|
||||||
|
picList.value.push(res);
|
||||||
|
console.log(picList.value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const beginChoose =(e)=>{
|
||||||
|
console.log("beginChoose",e);
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
getUploadFile
|
getUploadFile,
|
||||||
|
filetoDataURL,
|
||||||
|
beginChoose,
|
||||||
|
picList
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -84,7 +112,7 @@ export default {
|
|||||||
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
|
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-upload @done="getUploadFile">
|
<lay-upload @done="getUploadFile2">
|
||||||
<template #preview>
|
<template #preview>
|
||||||
<div class="easy-wrap">
|
<div class="easy-wrap">
|
||||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||||
@ -101,11 +129,11 @@ export default {
|
|||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const getUploadFile = (file)=>{
|
const getUploadFile2 = (file)=>{
|
||||||
console.log(file);
|
console.log(file);
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
getUploadFile
|
getUploadFile2
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -93,16 +93,16 @@ const change = function (page: any) {
|
|||||||
emit("change", page);
|
emit("change", page);
|
||||||
};
|
};
|
||||||
|
|
||||||
const rowClick = function (data: any,evt:MouseEvent) {
|
const rowClick = function (data: any, evt: MouseEvent) {
|
||||||
emit("row", data,evt);
|
emit("row", data, evt);
|
||||||
};
|
};
|
||||||
|
|
||||||
const rowDoubleClick = function (data: any,evt:MouseEvent) {
|
const rowDoubleClick = function (data: any, evt: MouseEvent) {
|
||||||
emit("row-double", data,evt);
|
emit("row-double", data, evt);
|
||||||
};
|
};
|
||||||
|
|
||||||
const contextmenu = function (data: any,evt:MouseEvent) {
|
const contextmenu = function (data: any, evt: MouseEvent) {
|
||||||
emit("contextmenu", data,evt);
|
emit("contextmenu", data, evt);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 打印 table 数据
|
// 打印 table 数据
|
||||||
@ -292,9 +292,9 @@ onMounted(() => {
|
|||||||
<tbody>
|
<tbody>
|
||||||
<template v-for="data in tableDataSource" :key="data">
|
<template v-for="data in tableDataSource" :key="data">
|
||||||
<tr
|
<tr
|
||||||
@click.stop="rowClick(data,$event)"
|
@click.stop="rowClick(data, $event)"
|
||||||
@dblclick.stop="rowDoubleClick(data,$event)"
|
@dblclick.stop="rowDoubleClick(data, $event)"
|
||||||
@contextmenu.stop="contextmenu(data,$event)"
|
@contextmenu.stop="contextmenu(data, $event)"
|
||||||
>
|
>
|
||||||
<!-- 复选框 -->
|
<!-- 复选框 -->
|
||||||
<td v-if="checkbox" class="layui-table-col-special">
|
<td v-if="checkbox" class="layui-table-col-special">
|
||||||
|
@ -180,7 +180,6 @@ const getUploadChange = (e: any) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
const chooseFile = () => {
|
const chooseFile = () => {
|
||||||
console.log(orgFileInput.value);
|
|
||||||
let _target = orgFileInput.value;
|
let _target = orgFileInput.value;
|
||||||
if (_target) {
|
if (_target) {
|
||||||
_target.click();
|
_target.click();
|
||||||
|
Loading…
Reference in New Issue
Block a user