vue3+ts+admin总结

图片上传 <template>
<!-- :data="driverSchool" :on-error="error"   :on-change="onchange" :on-success="uploadSuccess"  :auto-upload="false"-->
    <el-upload :show-file-list="false" :before-upload="handleBeforeUpload" :http-request="uploadFile" ref="upload">
        <el-avatar :src="imgUrl" style="width:80px;height:80px;line-height: 80px">
        </el-avatar>
    </el-upload>
</template>
<script setup lang="ts">
import { UploadRawFile, UploadRequestOptions } from "element-plus";
import { uploadFileApi } from "@/api/file";
const imgUrl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
/** * 自定义图片上传 * * @param options */
async function uploadFile(options: UploadRequestOptions): Promise<any> {
  const { data: fileInfo } = await uploadFileApi(options.file);
  imgUrl.value = fileInfo.url;
}
/** * 限制用户上传文件的格式和大小 */
function handleBeforeUpload(file: UploadRawFile) {
  if (file.size > 10 * 1048 * 1048) {
    ElMessage.warning("上传图片不能大于10M");
    return false;
  }
  return true;
}
</script>

/** * 上传文件api * * @param file */
export function uploadFileApi(file: File): AxiosPromise<FileInfo> {
  const formData = new FormData();
  formData.append("file", file);
  return request({
    url: "/api/v1/files",
    method: "post",
    data: formData,
    headers: {
      "Content-Type": "multipart/form-data",
    },
  });
}
<!--!!! :on-exceed="handleExceed"  :limit="1" 上传直接跟新图片，不需要覆盖前一个文件  -->
<el-upload ref="upload" class="upload-demo" drag :show-file-list="false" :http-request="uploadMethod1"  :before-upload="beforeAvatarUpload1">
          <img style="width: 100%;height: 100%;" v-if="imageUrl" :src="imageUrl" class="avatar" />
          <div v-else>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text"> <em>点击上传</em> 电子签名</div>
          </div>
</el-upload>


1. 登录页只走了login接口获取token；
权限页的路由前置守卫在有token但是没有角色时，去获取用户信息；
再根据角色获取用户的路由权限，
一共三个接口

2. v-hasPerm  按钮权限 自定义指令

3. 权限permission.js，调取store里封装的获取路由列表的permissionStore.generateRoutes(roles)，
设置路由菜单setRoutes（arr）合并动态权限路由，返回动态权限数组，添加到路由规则里面

1. 流程图 loginFlow

2. 组件实例ref获取不到值  // 只有defineExpose暴露的值或方法才能被父组件通过ref访问
defineExpose({
  formRouteList});

3. mock数据

 4. :menu-list="permissionStore.routes"   在sidebar的index.vue通过props传值给leftMenu.vue组件

 5. 在permission.ts 文件内添加
  permissionStore.setRoutes([])    // 没有token也要setRoutes 设置左侧菜单=》调用了usePermissionStore的方法

 6. 在login.vue文件跳过登录方法loginAPi

vue3中ref获取子组件的值 （项目新增业务）

一、< script setup >通过ref获取子组件的值或方法

父组件：

   <div class="stepMain">
      <div v-show="active === 0">
        <step1Com ref="refStep1Com" />
      </div>
      <div v-show="active === 1">
        <step2Com ref="refStep2Com" />
      </div>
      <div v-show="active === 2">
        <step3Com ref="refStep3Com" />
      </div>
      <div class="menuBtn">
        <div class="alignCenter">
          <el-button type="primary" plain v-if="active" style="margin-top: 12px;margin-right: 30px;"  @click="prev">上一步</el-button>
          <el-button type="primary" v-if="active != 2" style="margin-top: 12px" @click="next">下一步</el-button>
          <el-button type="primary" v-if="active == 2" style="margin-top: 12px" @click="done">完成</el-button>
        </div>
      </div>
    </div>
 <script lang="ts" setup>
import { ref } from 'vue';
import step2Com from "./compoments/step2.vue";
const router = useRouter();
const active = ref(0);
const refStep2Com = ref<InstanceType<typeof step2Com>>()
const prev = () => {
  active.value--;
  if (active.value < 1) {
    return false;
  }};
const next = () => {
  if (active.value == 1) {
   console.log(refStep2Com.value?.formRouteList);   // 父组件获取子组件ref值
 }
  active.value++;
  if (active.value > 2) {
    return false;
  }};
const done = () => {
  router.push({
    path: "/",
  });
  active.value = 0;
};
</script>

子组件：

<script lang="ts" setup>
import { ref, reactive, defineProps, defineExpose } from 'vue';
// 只有defineExpose暴露的值或方法才能被父组件通过ref访问 const formRouteList = ref<formRouteType[]>([])
defineExpose({
  formRouteList
});

二、setup（）通过ref获取子组件值

父组件：

<pane-account ref="accountRef"></pane-account>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

export default defineComponent({
  setup() {
    const accountRef = ref<InstanceType<typeof LoginAccount>>()

    const loginAction = () => {
     accountRef.value?.accountLoginAction()
    }
    return {
      loginAction,
      accountRef
    }
  }
})
</script>

子组件：

<script lang="ts">
import { defineComponent, PropType, computed, ref } from 'vue'
export default defineComponent({
  setup(props, { emit }) {
    const accountLoginAction = () => {
     console.log('子组件的方法')
    }

    return {
      accountLoginAction
    }
  }
})
</script>

• <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。

• cn.vuejs.org/guide/built…

  组件传一个 name prop 来声明一个过渡效果名 ...

  .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }

  .fade-enter-from, .fade-leave-to { opacity: 0; }

过渡模式