commit
7a5a3606a4
@ -13,19 +13,47 @@
|
||||
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref,reactive } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const getUploadFile = (file)=>{
|
||||
console.log(file);
|
||||
const picList = ref([]);
|
||||
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 {
|
||||
getUploadFile
|
||||
getUploadFile,
|
||||
filetoDataURL,
|
||||
beginChoose,
|
||||
picList
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -84,7 +112,7 @@ export default {
|
||||
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
|
||||
|
||||
<template>
|
||||
<lay-upload @done="getUploadFile">
|
||||
<lay-upload @done="getUploadFile2">
|
||||
<template #preview>
|
||||
<div class="easy-wrap">
|
||||
<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'
|
||||
export default {
|
||||
setup() {
|
||||
const getUploadFile = (file)=>{
|
||||
const getUploadFile2 = (file)=>{
|
||||
console.log(file);
|
||||
};
|
||||
return {
|
||||
getUploadFile
|
||||
getUploadFile2
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -93,16 +93,16 @@ const change = function (page: any) {
|
||||
emit("change", page);
|
||||
};
|
||||
|
||||
const rowClick = function (data: any,evt:MouseEvent) {
|
||||
emit("row", data,evt);
|
||||
const rowClick = function (data: any, evt: MouseEvent) {
|
||||
emit("row", data, evt);
|
||||
};
|
||||
|
||||
const rowDoubleClick = function (data: any,evt:MouseEvent) {
|
||||
emit("row-double", data,evt);
|
||||
const rowDoubleClick = function (data: any, evt: MouseEvent) {
|
||||
emit("row-double", data, evt);
|
||||
};
|
||||
|
||||
const contextmenu = function (data: any,evt:MouseEvent) {
|
||||
emit("contextmenu", data,evt);
|
||||
const contextmenu = function (data: any, evt: MouseEvent) {
|
||||
emit("contextmenu", data, evt);
|
||||
};
|
||||
|
||||
// 打印 table 数据
|
||||
@ -292,9 +292,9 @@ onMounted(() => {
|
||||
<tbody>
|
||||
<template v-for="data in tableDataSource" :key="data">
|
||||
<tr
|
||||
@click.stop="rowClick(data,$event)"
|
||||
@dblclick.stop="rowDoubleClick(data,$event)"
|
||||
@contextmenu.stop="contextmenu(data,$event)"
|
||||
@click.stop="rowClick(data, $event)"
|
||||
@dblclick.stop="rowDoubleClick(data, $event)"
|
||||
@contextmenu.stop="contextmenu(data, $event)"
|
||||
>
|
||||
<!-- 复选框 -->
|
||||
<td v-if="checkbox" class="layui-table-col-special">
|
||||
|
@ -180,7 +180,6 @@ const getUploadChange = (e: any) => {
|
||||
}
|
||||
};
|
||||
const chooseFile = () => {
|
||||
console.log(orgFileInput.value);
|
||||
let _target = orgFileInput.value;
|
||||
if (_target) {
|
||||
_target.click();
|
||||
|
Loading…
Reference in New Issue
Block a user