随笔分类 - vue
摘要：官网 https://www.wangeditor.com/v5/for-frame.html#%E4%BD%BF%E7%94%A8-1 安装： npm install @wangeditor/editor --save npm install @wangeditor/editor-for-vue@
阅读全文
摘要：1 子组件 Demo 里： <script setup> import {ref} from 'vue' let ceshi = ref(520) defineExpose({ // 通过 defineExpose 将 子组件 内部 数据 暴露给 父组件 ！！！！ ceshi }) </script
阅读全文
摘要：父传子 父组件 绑定传参( :img_type="img_type") 不绑定只能传字符串 import {defineProps } from 'vue' let props = defineProps({ //子组件接收父组件传递过来的值 img_type: String, }) //视图中直接
阅读全文
摘要：shallowRef 定义得数组 清空 let component_list = shallowRef([ {unit: Head, name: 'Head', id: 1}, {unit: TopClass, name: 'TopClass', id: 2}, ]) component_list.
阅读全文
摘要：官网地址>> 引入后样式不对截图： 在 App.vue 贴上代码 如下： 附上代码： .el-message__content { width: auto; height: auto; background: none; } 达到期望结果截图：
阅读全文
摘要：<script setup> import { useStore } from 'vuex' import { computed } from 'vue' let store = useStore() let sel = computed(() => store.state.login_index)
阅读全文
摘要：1. npm 安装 npm install echarts --save 2. 使用 <template> <div> <div id="myChart123" :style="{width: '1500px', height: '550px'}"></div> </div> </template>
阅读全文
摘要：1.在 node_modules 里找到 vue-count-to 2. 将 vue-count-to src 文件夹 里的 3 个文件 放到 自己 src components 里 调用 ( 我这里用 count-to 文件包裹起来的) 3. 删除package.json内的 "vue-count
阅读全文
摘要：因为比较简单先说解决方法： 用一个 div 把 过渡到的 代码(组件代码) 包起来即可 详情： 用到 transition: (提升用户体验组件动画) 警告信息： 过渡的 组件 代码： 解决：(用div 把所有 代码包起来) 期望结果： 由于vue3 支持碎片写法没错，但是 transition 内
阅读全文
摘要：document.onkeydown = e => { // login() 登录事件 if(e.key == 'Enter') login() }
阅读全文
摘要：1. watch监听 import { watch} from 'vue' import {useRouter} from 'vue-router' let router = useRouter() watch(() =>router.currentRoute._value,(m,n)=> { co
阅读全文
摘要：使用场景： 提一下vue2 用法>> 下面回到正题 vue3 用法 1 安装包： npm install @icon-park/vue-next --save 2 字节跳动图标库取图地址>> 3 用法： <template> <div class="mm"> <!-- 使用 --> <home-tw
阅读全文
摘要：场景： 用到技术： vue vite element plus 我这里是 修改 element plus css 需要用到 这里先说 root 变量用法及声明。 1. 静态文件 创建一个 public.css 文件 :root { --hoverc: #fe4800; --hoverbgc: #fe
阅读全文
摘要：安装 vuex npm i vuex@next -S // 安装最新vuex store/index.js import { createStore } from 'vuex' export default createStore({ state: { login_index: 0, // 变量 }
阅读全文
摘要：<template> <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm" :rules="rules" > <el-form-item label="age" pro
阅读全文
摘要：Transition描述: “CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。" 语法: transition ： [ || || || [, [ || || || ]]
阅读全文
摘要：vue3 + Vite + Element Plus 构建项目 请耐心看完。 创建准备：检查是否安装 npm // 安装了能看到版本号，如果没有安装 请移步>> npm -v 一. 创建项目 - 1. 创建项目 my-vue-app 项目名称疑似不能用中文 npm init vite@latest
阅读全文
摘要：先看效果图： 附上代码： <template> <button @click="fullScreen"> {{ fullscreen ? '取消全屏' : '全屏' }} </button> </template> <script setup> import { ElMessage } from '
阅读全文
摘要：没有安装 element-plus/icons 的，安装命令如下： npm install @element-plus/icons-vue 一. 全部引入 main.js 挂载: import { createApp } from 'vue' import App from './App.vue'
阅读全文
摘要：先看效果： 上面两个图对比，明显看出下面图在窗口缩小时，dom包括文字在等比例缩小。 方法： 1. npm install lib-flexible postcss-pxtorem 2. package.json 文件里添加以下代码：（rootValue: 55 可根据自己适应窗口大小改变） "po
阅读全文
