Vue Cli Element 2

漓魍

已于 2022-01-23 09:23:09 修改

阅读量491

点赞数

文章标签： vue.js javascript 前端

于 2021-12-28 13:51:02 首次发布

本文链接：https://blog.youkuaiyun.com/u012949563/article/details/121870496

版权

本文介绍了如何在Vue CLI项目中整合Element Plus组件，包括使用`<router-view>`实现路由视图切换，创建可复用的组件并利用vue-clipboard3实现复制功能，以及处理组件间通信和时间格式转换。通过实例演示了组件间的父子通信和图标选择，以及如何监听数据变化并调整时间显示格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Router 视图

<router-view />

组件

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { reactive, onMounted, ref } from "vue";
export default {
  setup() {
    //变量
    let arg = ref(false);
    //函数
    let func = () => {};
    onMounted(() => {
      //初始化 生命周期
    });
    return {
      func,
      arg,
    };
  },
};
</script>

Router

<script>
import { useRouter,userRoute } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const route = userRoute();
	let method = ()=>{
		router.push("XXX");
	}
}
</script>

复制剪切板

安装

npm install --save vue-clipboard3

使用

<script>
import useClipboard from 'vue-clipboard3';
export default {
  setup() {
    const {toClipboard} = useClipboard();
	let method =async (text)=>{
      try {
        //复制
        await toClipboard(text);
      } catch (e) {
        //复制失败
        console.error(e);
      }
	}
}
</script>

组件通信

父组件

<template>
  <Test @upload="onUpload"></Test>
</template>
<script>
import Test from "../components/Test.vue";
export default {
  components: {
    Test,
  },
  setup() {
    let onUpload = () => {
      console.log("onUpload");
    };
    return { onUpload };
  },
};
</script>

子组件

<template>
  <button @click="onUpload">测试上传</button>
</template>
<script>
import {defineComponent } from "vue";
export default defineComponent ({
  name: "Test",
  props: {},
  setup(props,{emit}) {
    let onUpload = () => {
      emit("upload");
    };
    return { onUpload };
  },
})
</script>

参考

Vue3组件通信总结

ICON图标

官网
https://element-plus.gitee.io/zh-CN/component/icon.html#icon-collection
安装

npm install --save @element-plus/icons

使用

<template> 
  <el-icon class="el-icon--upload"> <upload-filled /></el-icon>   
</template>
<script>
import { UploadFilled } from "@element-plus/icons";
export default {
  components: { UploadFilled },
  setup() {   
  },
};
</script>

监听数据变化

<template>
   <el-input v-model="search" size="normal" placeholder="搜索" />        
</template>
<script>

import { ref,watch } from "vue";

export default { 
  setup() {
    let search = ref(""); //搜索字符串
    watch(
      search,
      (u, p) => {
        console.log(u);
        console.log(p);
      }
    );
    return {    
      search,
    };
  },
});
</script>

时间格式处理

安装插件

npm install --save moment

使用

<script>
import moment from "moment";
import 'moment/locale/zh-cn' //加入这个包设置为中文
export default {
  setup() {
  	let data = '这里是自行获取的时间字符串'
    let str = moment(data).format('LLLL')    
    };
</script>