搜索到
55
篇与
大祥子
的结果
-
-
Vue2/3实现dom拖动，Ctrl+鼠标滚轮放大缩小 1、在Vue2/3中dom拖动，Ctrl+鼠标滚轮放大缩小dom，可以使用@panzoom/panzoom库实现具体实现2、npm下载插件包 npm install @panzoom/panzoom -S 3、在需要的页面按需引入（也可以全局引入）,详细见下文代码块4、通过@wheel事件监听鼠标滚轮，调整dom大小（@wheel是只有当我们滚动鼠标滚轮的时候，才会触发）{mtitle title="Vue2实现方式"/}<template> // 需要拖动的dom <div ref="dom" @wheel="wheel"></div> </template> <script> import Panzoom from "@panzoom/panzoom"; // 页面挂载的时候就调用方法 export default { data () { return { panzoom: null } } mounted () { this.getPanzoomElement() }, methods: { // 拖动方法 getPanzoomElement () { // 存放Panzoom用于后面的其他操作 this.panzoom = Panzoom(this.$refs.dom, { // origin: "0 0", // 位置 maxScale: 2, // 最大比例 minScale: 0, // 最小比例 overflow: "auto", // 溢出 canvas: true, // 是否视为canvas }); } // 监听鼠标滚轮 wheel (event) { // 修改为根据鼠标位置缩放 if (event.ctrlKey) { // 这里可以扩展，比如按下其他案件+滚轮放大缩小等 const scaleResult = this.panzoom.zoomWithWheel(event); } } } } <script>{mtitle title="Vue3实现方式"/}<template> // 需要拖动的dom <div ref="wheelDom" @wheel="wheel"></div> </template> <script setup> // 按需引入 import { onMounted, reactive, toRefs,ref } from "vue"; import Panzoom from "@panzoom/panzoom"; // 引入插件 const wheelDom = ref(null); // ref获取dom // 响应式数据 const state = reactive({ panzoom: null }) // 拖动方法 const getPanzoomElement = () => { // 存放Panzoom用于后面的其他操作 state.panzoom = Panzoom(wheelDom.value, { // origin: "0 0", // 位置 maxScale: 2, // 最大比例 minScale: 0, // 最小比例 overflow: "auto", // 溢出 canvas: true, // 是否视为canvas }); } // 监听鼠标滚轮 const wheel = (event) => { // 修改为根据鼠标位置缩放 if (event.ctrlKey) { // 这里可以扩展，比如按下其他案件+滚轮放大缩小等 const scaleResult = this.panzoom.zoomWithWheel(event); } } // 页面挂载的时候就调用方法 onMounted(() => { getPanzoomElement() }); <script>
-
Vue事件中心管理传递--组件传值--传值 {mtitle title="新建js文件Bus.js"/}// 事件中心 import Vue from 'vue' export default new Vue(){mtitle title="A页面"/} // 引入事件中心传递 import Bus from '../../util/Bus' // 发送 Bus.$emit('名称', 数据){mtitle title="B页面"/}// 引入事件中心传递 import Bus from '../../util/Bus' // 接收，最好放在created里接收 Bus.$on('treeData', treeData => { this.treeData = treeData // console.log('我是树形：' + treeData) })
-
Vue简单封装Axios {mtitle title="新建api.js文件"/}/* * @Author: lzx * @Date: 2021-10-12 13:12:08 * @LastEditors: lzx * @LastEditTime: 2021-10-12 14:20:44 * @Description: Fuck Bug * @FilePath: \xsy-auth\src\util\api.js */ // 引入axios import axios from 'axios' // axios.defaults.baseURL = 'http://127.0.0.1:8000' // 设置请求后端的URL地址 axios.defaults.timeout = 2000 // axios请求超时时间 // // 头部携带token axios.defaults.headers.common.token = sessionStorage.getItem('token') // get请求 const get = (url, param) => { return new Promise((resolve, reject) => { axios.get(url, { param }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // put请求 const put = (url, data) => { return new Promise((resolve, reject) => { axios.put(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // delete请求 const del = (url, data) => { return new Promise((resolve, reject) => { axios.delete(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } // post请求 const post = (url, data) => { return new Promise((resolve, reject) => { axios.post(url, data).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } export { get, put, del, post } {mtitle title="main.js中引用"/}// 引入封装的Axios import { get, put, del, post } from './util/api.js' // 使用封装的Axios Vue.prototype.$get = get Vue.prototype.$put = put Vue.prototype.$delete = del Vue.prototype.$post = post{mtitle title="全局页面中使用方式"/}// 1、get请求 thi.$get('url').then(res => { console.log(res.data) }) // 2、put请求 this.$put('url', {有携带 | 没有可以直接如下}).then(res => { console.log(res.data) }) this.$put('url').then(res => { console.log(res.data) }) //this.$delete...如上 //this.$post...如上
-
